\n {(selected as string[]).map((value) => {\n const item: SelectItemProps =\n value === AppConstants.SELECT_ALL.value ? AppConstants.SELECT_ALL : items.filter((i) => i.value === value).length ? items.filter((i) => i.value === value)[0] : { name: \"\", value: \"\" };\n return
\n );\n } else {\n const item: SelectItemProps = items && items.filter((i) => i.value === selected).length ? items.filter((i) => i.value === selected)[0] : AppConstants.SELECT_NONE;\n return item.name;\n }\n };\n\n const close = () => {\n setIsOpen(false);\n setSearchText(\"\");\n };\n\n const stopImmediatePropagation = (e: any) => {\n e.stopPropagation();\n e.preventDefault();\n };\n\n return (\n <>\n - \n
- \n
- \n
- \n
- \n
- \n {(isAdmin || isCollectionPointManager || isDispatcher || isOnlyStandardDispatcher || isLastMileViewer || isOnlyStdLastMileViewer) && (\n
- \n
- \n {(isAdmin || isDispatcher || isOnlyStandardDispatcher || isLastMileViewer || isOnlyStdLastMileViewer) &&
- \n
- \n
\n \n
\n );\n};\n\nexport default React.memo(RenderRescheduleOrders);\n","import React from \"react\";\n\nimport { ReactComponent as crateBoxIcon } from \"../../../assets/icons/crate-box-icon.svg\";\nimport { ReactComponent as SixDotsIcon } from \"../../../assets/icons/six-dots-icon.svg\";\n\nimport { Checkbox, Grid, SvgIcon, Typography } from \"@material-ui/core\";\n\nimport { getVerificationStatusField, isSubRoute } from \"../utils/AllRouteUtils\";\nimport { getStatusWithoutUnderScore } from \"../../../mocks/allRoutes/response.transforms\";\nimport { COLORS } from \"../../../config/theme/baseTheme\";\n\nimport RenderRescheduleOrders from \"../../../common/RescheduleOrders/RenderRescheduleOrders\";\n\ninterface RenderOrderDetailsAccordionSummaryInterface {\n classes: any;\n routeObj: any;\n routeName: string;\n routeDataName: string;\n slotName: string;\n orderObj: any;\n orderObjIndex: number;\n viewMode?: boolean;\n orderActionPopUpViewChange?: (e: React.ChangeEvent\n {(showLoader || allRouteState.loading) && \n \n \n \n \n \n {isSubRouteObjectNonEmpty() ? (\n \n \n {!allRouteState.loading && allRouteState?.consignmentMarkersForMap?.length > 0 ? (\n {\"\"} \n )}\n \n \n {getMapContainerFooter()}\n \n \n\n {allRouteState.openAssignRoutePopUp && (\n \n \n \n \n {allRouteState.openSnackbar && (\n }\n content={getPublishDialogDetailsContent()}\n actions={getPublishDialogActions()}\n handleClose={handlePublishDialogClose}\n />\n )}\n {allRouteState.openUpdateConfirmDialog && (\n }\n content={getUpdateDialogDetailsContent()}\n actions={getUpdateDialogActions()}\n handleClose={handleUpdateDialogClose}\n />\n )}\n {allRouteState.openRemoveRouteConfirmDialog && (\n }\n content={getRemoveRouteDialogDetailsContent()}\n actions={getRemoveRouteDialogActions()}\n handleClose={handleOrderActionDialogClose}\n />\n )}\n {allRouteState.openAddRouteConfirmDialog && (\n }\n content={getAddToRouteDialogDetailsContent()}\n actions={getAddConsignmentToRouteDialogActions()}\n handleClose={handleOrderActionDialogClose}\n />\n )}\n {allRouteState.openMoveOrderToNewRoute && (\n }\n content={getAddToNewDraftedRouteDialogDetailsContent()}\n actions={getAddToNewDraftedRouteDialogActions()}\n handleClose={handleCloseMoveOrderToNewRoutePopUp}\n />\n )}\n {allRouteState.openCreateSubRouteDialog && (\n }\n content={createNewSubRouteRouteDialogDetailsContent()}\n actions={createNewSubRouteRouteDialogActions()}\n handleClose={handleCloseCreateSubRouteDialog}\n />\n )}\n {allRouteState.openDeleteSubRouteDialog && (\n }\n content={deleteSubRouteRouteDialogDetailsContent()}\n actions={deleteSubRouteDialogActions()}\n handleClose={handleCloseDeleteSubRouteDialog}\n />\n )}\n {allRouteState.openSubRouteOrderActionPopUp && (\n }\n content={updateSubRouteDetailsDetailsContent()}\n actions={updateSubRouteDialogActions()}\n handleClose={handleSubRouteUpdateDialogClose}\n />\n )}\n
\n );\n};\n\nexport default AllRoutes;\n","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles(\n {\n root: {\n flexGrow: 1,\n height: \"100%\"\n },\n container: {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\"\n },\n filterSection: {\n paddingRight: 12,\n flexGrow: 1,\n '& .filterHeading': {\n alignSelf: \"flex-start\",\n '& .headingContainer': {\n cursor: \"pointer\",\n '& .heading': {\n fontSize: 16,\n fontWeight: 600,\n color: theme.palette.primary.main,\n },\n '& .logo': {\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n }\n },\n '& .filtersContent': {\n display: \"flex\",\n gap: 8,\n '& .buttons': {\n marginLeft: \"auto\",\n alignSelf: \"center\"\n }\n }\n },\n exceptionsFilterSection: {\n padding: theme.spacing(1, 2, 1, 1),\n flexGrow: 1,\n '& .filterHeading': {\n alignSelf: \"flex-start\",\n '& .headingContainer': {\n cursor: \"pointer\",\n '& .heading': {\n fontSize: 16,\n fontWeight: 600,\n color: theme.palette.primary.main,\n },\n '& .logo': {\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n }\n },\n '& .filtersContent': {\n '& .buttons': {\n marginLeft: \"auto\",\n alignSelf: \"center\"\n }\n }\n },\n heading: {\n color: theme.palette.primary.main\n },\n button: {\n margin: theme.spacing(0.5),\n '&.reset-btn': {\n marginRight: theme.spacing(0)\n }\n },\n tableSection: {\n width: '100%',\n height: '100%'\n }\n }),\n);","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1\n },\n searchSelect: {\n '& .MuiOutlinedInput-root': {\n minWidth: 160,\n backgroundColor: theme.palette.secondary.main,\n borderRadius: \"8px 0px 0px 8px\",\n color: COLORS.DOVE_GRAY\n },\n '& .MuiOutlinedInput-input': {\n paddingLeft: theme.spacing(1.5),\n paddingRight: theme.spacing(1.5)\n },\n '& .MuiOutlinedInput-notchedOutline': {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderRight: \"none\"\n },\n '& .open .MuiOutlinedInput-notchedOutline': {\n borderBottom: `1px solid ${COLORS.BLACK_INPUT_BORDER}`\n }\n },\n searchTextbox: {\n '& .MuiOutlinedInput-root': {\n minWidth: 300\n },\n '& .MuiOutlinedInput-notchedOutline': {\n borderLeft: \"none\",\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n }\n },\n searchSelectPaperProps: {\n maxHeight: 200,\n border: `1px solid ${COLORS.BLACK_INPUT_BORDER}`,\n borderTop: \"none\",\n borderRadius: theme.spacing(1),\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n boxShadow: \"none\"\n }\n })\n);","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.2107 23.0597L17.1373 18.9964C13.264 21.9157 7.80948 21.4285 4.5148 17.869C1.22012 14.3095 1.1552 8.83372 4.36458 5.19715C7.57396 1.56058 13.0154 0.944248 16.9568 3.77087C20.8983 6.59749 22.0597 11.9491 19.6446 16.1553C19.5553 16.3103 19.4626 16.4614 19.3656 16.6104L18.4302 16.0025C18.5163 15.8709 18.598 15.736 18.6766 15.5996C20.8418 11.8331 19.7683 7.03645 16.2042 4.55224C12.6401 2.06804 7.76826 2.72078 4.98381 6.05559C2.19936 9.3904 2.42639 14.3005 5.50669 17.3641C8.58698 20.4278 13.4982 20.6282 16.8179 17.8257C17.0396 17.6384 17.3677 17.6519 17.5734 17.8567L22 22.2723L21.2107 23.0597Z\",\n fill: \"#4D4D4D\"\n});\n\nvar SvgSearch = function SvgSearch(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgSearch, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/search.44ac574d.svg\";\nexport { ForwardRef as ReactComponent };","import { Grid, IconButton, InputAdornment, SvgIcon } from '@material-ui/core';\nimport React from 'react';\nimport SelectBox, { SelectItemProps } from '../SelectBox';\nimport TextBox from '../TextBox';\nimport { useStyles } from './MultiSearchComponent.styles';\nimport { ReactComponent as searchIcon } from './../../assets/icons/search.svg';\n\nexport interface MultiSearchComponentProps {\n searchTypes: Array\n \n \n ( \n \n
\n );\n}\n\nexport default GridWrapper;","\nexport const persistState = {\n add(key:string, value: object) {\n sessionStorage.setItem(key, JSON.stringify(value));\n },\n remove(key:string) {\n sessionStorage.removeItem(key);\n },\n load(key:string ) {\n const stored = sessionStorage.getItem(key);\n return stored == null ? undefined : JSON.parse(stored);\n },\n};","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 24,\n height: 24,\n rx: 12,\n fill: \"#F4F4F4\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 17.4999H7C6.86739 17.4999 6.74021 17.4472 6.64645 17.3535C6.55268 17.2597 6.5 17.1325 6.5 16.9999V14.207C6.5 14.1414 6.51293 14.0764 6.53806 14.0157C6.56319 13.955 6.60002 13.8999 6.64645 13.8535L14.1464 6.35348C14.2402 6.25971 14.3674 6.20703 14.5 6.20703C14.6326 6.20703 14.7598 6.25971 14.8536 6.35348L17.6464 9.14637C17.7402 9.24014 17.7929 9.36732 17.7929 9.49992C17.7929 9.63253 17.7402 9.75971 17.6464 9.85348L10 17.4999Z\",\n stroke: \"#0E5AA7\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.5 8L16 11.5\",\n stroke: \"#0E5AA7\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17.5004 17.5004H10.0004L6.53223 14.0322\",\n stroke: \"#0E5AA7\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgEditIconNew = function SvgEditIconNew(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgEditIconNew, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/edit-icon-new.4033633d.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 24,\n height: 24,\n rx: 12,\n fill: \"#F4F4F4\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.0107 10.2324H18.0107V7.23242\",\n stroke: \"#0E5AA7\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.8891 15.8891C15.1199 16.6583 14.1399 17.1821 13.073 17.3943C12.0061 17.6065 10.9002 17.4976 9.89524 17.0813C8.89025 16.6651 8.03126 15.9601 7.42692 15.0556C6.82257 14.1512 6.5 13.0878 6.5 12C6.5 10.9122 6.82257 9.84884 7.42692 8.94437C8.03126 8.0399 8.89025 7.33495 9.89524 6.91867C10.9002 6.50238 12.0061 6.39346 13.073 6.60568C14.1399 6.8179 15.1199 7.34173 15.8891 8.11092L18.0104 10.2322\",\n stroke: \"#0E5AA7\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgRefreshIconNew = function SvgRefreshIconNew(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRefreshIconNew, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/refresh-icon-new.b8a8edbc.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 24,\n height: 24,\n rx: 12,\n fill: \"#F4F4F4\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.0107 10.2324H18.0107V7.23242\",\n stroke: \"#747474\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.8891 15.8891C15.1199 16.6583 14.1399 17.1821 13.073 17.3943C12.0061 17.6065 10.9002 17.4976 9.89524 17.0813C8.89025 16.6651 8.03126 15.9601 7.42692 15.0556C6.82257 14.1512 6.5 13.0878 6.5 12C6.5 10.9122 6.82257 9.84884 7.42692 8.94437C8.03126 8.0399 8.89025 7.33495 9.89524 6.91867C10.9002 6.50238 12.0061 6.39346 13.073 6.60568C14.1399 6.8179 15.1199 7.34173 15.8891 8.11092L18.0104 10.2322\",\n stroke: \"#747474\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgRefreshIconGrey = function SvgRefreshIconGrey(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRefreshIconGrey, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/refresh-icon-grey.ad9b541a.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 9,\n cy: 9,\n r: 9,\n fill: \"#0A437C\",\n fillOpacity: 0.4\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 8.99979,\n cy: 9.00003,\n r: 5.14286,\n fill: \"#0A437C\"\n});\n\nvar SvgActiveTimelineDot = function SvgActiveTimelineDot(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgActiveTimelineDot, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/active-timeline-dot.25b53ed6.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 9,\n cy: 9,\n r: 9,\n fill: \"#F34041\",\n fillOpacity: 0.4\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 9.00028,\n cy: 9.00003,\n r: 5.14286,\n fill: \"#F34041\"\n});\n\nvar SvgTimelineDotError = function SvgTimelineDotError(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgTimelineDotError, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/timeline-dot-error.07563691.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M1.4 14.58C1.17909 14.58 1 14.4009 1 14.18V12.9111C1 12.4693 1.35817 12.1111 1.8 12.1111H14.2727C14.7145 12.1111 15.0727 12.4693 15.0727 12.9111V14.18C15.0727 14.4009 14.8936 14.58 14.6727 14.58H13.1142C12.9722 14.58 12.857 14.4648 12.857 14.3228C12.857 14.1808 12.7419 14.0656 12.5998 14.0656H10.0099C9.86784 14.0656 9.7527 14.1808 9.7527 14.3228C9.7527 14.4648 9.63756 14.58 9.49553 14.58H6.71169C6.56966 14.58 6.45451 14.4648 6.45451 14.3228C6.45451 14.1808 6.33937 14.0656 6.19734 14.0656H3.54011C3.39808 14.0656 3.28294 14.1808 3.28294 14.3228C3.28294 14.4648 3.16779 14.58 3.02576 14.58H1.4ZM14.1029 12.7283C14.3239 12.7283 14.5029 12.9074 14.5029 13.1283V13.5628C14.5029 13.7837 14.3239 13.9628 14.1029 13.9628H13.6839C13.5419 13.9628 13.4268 13.8476 13.4268 13.7056C13.4268 13.5635 13.3116 13.4484 13.1696 13.4484H9.44014C9.2981 13.4484 9.18296 13.5635 9.18296 13.7056C9.18296 13.8476 9.06782 13.9628 8.92578 13.9628H7.28143C7.1394 13.9628 7.02426 13.8476 7.02426 13.7056C7.02426 13.5635 6.90912 13.4484 6.76708 13.4484H2.97037C2.82833 13.4484 2.71319 13.5635 2.71319 13.7056C2.71319 13.8476 2.59805 13.9628 2.45601 13.9628H1.96974C1.74883 13.9628 1.56974 13.7837 1.56974 13.5628V13.1283C1.56974 12.9074 1.74883 12.7283 1.96974 12.7283H14.1029Z\",\n fill: \"#666666\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.75276 1.61722C6.97367 1.61722 7.15276 1.79631 7.15276 2.01722V4.92056C7.15276 5.14148 6.97367 5.32056 6.75276 5.32056H3.05178C2.83086 5.32056 2.65178 5.14148 2.65178 4.92056V2.01722C2.65178 1.79631 2.83086 1.61722 3.05178 1.61722L4.24706 1.61722V1.7C4.24706 1.86569 4.38138 2 4.54706 2H5.08655C5.25224 2 5.38655 1.86569 5.38655 1.7V1.61722L6.75276 1.61722ZM5.08655 1H6.9225C7.36433 1 7.7225 1.35817 7.7225 1.8V5.13779C7.7225 5.57962 7.36433 5.93779 6.9225 5.93779H2.88203C2.4402 5.93779 2.08203 5.57962 2.08203 5.13779V1.8C2.08203 1.35817 2.4402 1 2.88203 1H4.54706H5.08655Z\",\n fill: \"#666666\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M13.0301 1.61722C13.251 1.61722 13.4301 1.79631 13.4301 2.01722V4.92056C13.4301 5.14148 13.251 5.32056 13.0301 5.32056H9.32912C9.10821 5.32056 8.92912 5.14148 8.92912 4.92056V2.01722C8.92912 1.79631 9.10821 1.61722 9.32912 1.61722L10.4999 1.61722V1.7C10.4999 1.86569 10.6342 2 10.7999 2H11.3393C11.505 2 11.6393 1.86569 11.6393 1.7V1.61722L13.0301 1.61722ZM11.3393 1H13.1998C13.6417 1 13.9998 1.35817 13.9998 1.8V5.13779C13.9998 5.57962 13.6417 5.93779 13.1998 5.93779H9.15937C8.71755 5.93779 8.35938 5.57962 8.35938 5.13779V1.8C8.35938 1.35817 8.71755 1 9.15937 1H10.7999H11.3393Z\",\n fill: \"#666666\"\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.67073 7.17948C6.89164 7.17948 7.07073 7.35857 7.07073 7.57948V10.4828C7.07073 10.7037 6.89164 10.8828 6.67073 10.8828H2.96975C2.74883 10.8828 2.56974 10.7037 2.56974 10.4828V7.57948C2.56974 7.35857 2.74883 7.17948 2.96974 7.17948H4.16503V7.24607V7.32884C4.16503 7.49453 4.29935 7.62884 4.46503 7.62884H5.00452C5.17021 7.62884 5.30452 7.49453 5.30452 7.32884V7.24607V7.17948H6.67073ZM2 7.36226C2 6.92043 2.35817 6.56226 2.8 6.56226H6.84047C7.2823 6.56226 7.64047 6.92043 7.64047 7.36226V10.7C7.64047 11.1419 7.2823 11.5 6.84047 11.5H2.8C2.35817 11.5 2 11.1419 2 10.7V7.36226Z\",\n fill: \"#666666\"\n});\n\nvar _ref6 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M13.0301 7.11722C13.251 7.11722 13.4301 7.29631 13.4301 7.51722V10.4206C13.4301 10.6415 13.251 10.8206 13.0301 10.8206H9.32912C9.10821 10.8206 8.92912 10.6415 8.92912 10.4206V7.51722C8.92912 7.29631 9.10821 7.11722 9.32912 7.11722H10.4998V7.11723V7.2C10.4998 7.36569 10.6342 7.5 10.7998 7.5H11.3393C11.505 7.5 11.6393 7.36569 11.6393 7.2V7.11723V7.11722H13.0301ZM8.35938 7.3C8.35938 6.85817 8.71755 6.5 9.15937 6.5H13.1998C13.6417 6.5 13.9998 6.85817 13.9998 7.3V10.6378C13.9998 11.0796 13.6417 11.4378 13.1998 11.4378H9.15937C8.71755 11.4378 8.35938 11.0796 8.35938 10.6378V7.3Z\",\n fill: \"#666666\"\n});\n\nvar SvgCrateStagingLocationIcon = function SvgCrateStagingLocationIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5, _ref6);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgCrateStagingLocationIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/crate-staging-location-icon.8a18d903.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 4,\n cy: 4,\n r: 4,\n fill: \"#92B3D4\"\n});\n\nvar SvgTimelineDot = function SvgTimelineDot(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 8,\n height: 8,\n viewBox: \"0 0 8 8\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgTimelineDot, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/timeline-dot.c979d655.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.75 11.2739V5.77393C3.75 5.57501 3.82902 5.38425 3.96967 5.2436C4.11032 5.10294 4.30109 5.02393 4.5 5.02393H19.5C19.6989 5.02393 19.8897 5.10294 20.0303 5.2436C20.171 5.38425 20.25 5.57501 20.25 5.77393V11.2739C20.25 19.1504 13.5651 21.7599 12.2303 22.2024C12.0811 22.2538 11.9189 22.2538 11.7697 22.2024C10.4349 21.7599 3.75 19.1504 3.75 11.2739Z\",\n stroke: \"#319E60\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.125 10.2739L10.625 15.5239L7.875 12.8989\",\n stroke: \"#319E60\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgShieldCheck = function SvgShieldCheck(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 25,\n viewBox: \"0 0 24 25\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgShieldCheck, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/ShieldCheck.71eb7071.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.97187 11.9997V6.9438H12.0121V5.93241H6.97187V0.876465H5.96403V5.93241H0.923828V6.9438H5.96403V11.9997H6.97187Z\",\n fill: \"white\"\n});\n\nvar SvgZoomIn = function SvgZoomIn(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 13,\n height: 12,\n viewBox: \"0 0 13 12\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgZoomIn, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/zoom-in.279aa7d5.svg\";\nexport { ForwardRef as ReactComponent };","export const Countdown = (function () {\n const retunObj: any = {};\n\n function startCountdown(id: any, count: number) {\n let timer : any;\n timer = setInterval(function () {\n if (count > 0 || count == 0) {\n retunObj[id] = count;\n count--;\n }\n\n if (count < 0) {\n delete retunObj[id];\n clearTimeout(timer);\n }\n }, 1000);\n }\n\n return {\n getInstance: function () {\n return retunObj;\n },\n startCountdown,\n };\n})();\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.98358 1.94401H12.0238V0.932617H6.98358H5.97574H0.935547V1.94401H5.97574H6.98358Z\",\n fill: \"white\"\n});\n\nvar SvgZoomOut = function SvgZoomOut(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 13,\n height: 2,\n viewBox: \"0 0 13 2\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgZoomOut, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/zoom-out.8c6f4dbd.svg\";\nexport { ForwardRef as ReactComponent };","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\nimport { boxShadow } from \"styled-system\";\nimport { marginTop } from \"styled-system\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n \"& .headingContainer\": {\n flexDirection: \"column\",\n \"& .titleHeading\": {\n fontSize: 18,\n fontWeight: 500,\n \"& .content\": {\n fontWeight: 600,\n },\n },\n \"& .titleContent\": {\n fontSize: 12,\n fontWeight: 600,\n margin: 'auto 0px',\n \"&.link\": {\n cursor: \"pointer\",\n },\n '&.ORANGE': {\n color: COLORS.GOLDEN_BELL\n },\n '&.SUCCESS_GREEN': {\n color: COLORS.PERSIAN_GREEN_DARK\n },\n },\n },\n \"& .tagContainer\": {\n marginLeft: theme.spacing(1),\n \"& .tag\": {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n \"&.PICTON_BLUE\": {\n backgroundColor: COLORS.PICTON_BLUE,\n },\n \"&.CREAM_CAN\": {\n backgroundColor: COLORS.CREAM_CAN,\n },\n \"&.VISTA_BLUE\": {\n backgroundColor: COLORS.VISTA_BLUE,\n },\n \"&.SEA_GREEN\": {\n backgroundColor: COLORS.SEA_GREEN,\n },\n \"&.GOLDEN_BELL\": {\n backgroundColor: COLORS.GOLDEN_BELL,\n },\n \"&.SCAMPI\": {\n backgroundColor: COLORS.SCAMPI,\n },\n \"&.BLUE\": {\n backgroundColor: COLORS.PRIMARY_MAIN,\n },\n \"&.SEA_GREEN2\": {\n backgroundColor: COLORS.SEA_GREEN2,\n },\n \"&.LUCKY\": {\n backgroundColor: COLORS.LUCKY,\n },\n \"&.DUSTY_GRAY\": {\n backgroundColor: COLORS.DUSTY_GRAY,\n },\n \"&.JUNGLE_GREEN\": {\n backgroundColor: COLORS.JUNGLE_GREEN,\n },\n \"&.BLACK\": {\n backgroundColor: COLORS.BLACK,\n },\n \"&.MINSK\": {\n backgroundColor: COLORS.SCAMPI,\n color: COLORS.WHITE,\n },\n },\n },\n \"& .editIcon\": {\n paddingLeft: theme.spacing(1),\n \"& .icon\": {\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n fill: \"none\",\n },\n \"& .refreshText\": {\n color: COLORS.MYSTIC_GREY,\n fontSize: 12,\n },\n \"& .refresh-block\": {\n cursor: \"default !important\",\n },\n \n },\n },\n tabs: {\n paddingTop: \"0px\",\n paddingLeft: \"0px\",\n minHeight: \"38px\",\n '& .tabLabel': {\n fontSize: \"14px\",\n fontWeight: 700\n }\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .tabValues': {\n padding: \"8px 0px 0px 0px\",\n },\n \"& .geocodedAddress\": {\n paddingBottom: theme.spacing(2),\n \"& .addressColItem\": {\n alignSelf: \"flex-start\",\n },\n \"& .geoLocAddressContainer\": {\n cursor: \"pointer\",\n \"& .address\": {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3,\n },\n \"& .addressLogo\": {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n \"&.open\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n \"& .addressMapContainer\": {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER,\n },\n },\n \"& .detailsHeader\": {\n flexDirection: \"column\",\n backgroundColor: COLORS.TRANSPARENT_BLUE,\n padding: theme.spacing(2),\n borderRadius: theme.spacing(1),\n \"& .detailsHeaderItem\": {\n paddingBottom: theme.spacing(1),\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"& .headerItemContainer\": {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n },\n \"& .contactItemContainer\": {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n },\n \"& p\": {\n lineHeight: \"17px\",\n fontSize: 14,\n },\n \"& .name\": {\n fontWeight: 600,\n },\n \"&.geocodedAddress\": {\n paddingBottom: theme.spacing(2),\n \"& .addressColItem\": {\n alignSelf: \"flex-start\",\n },\n \"& .geoLocAddressContainer\": {\n cursor: \"pointer\",\n \"& .address\": {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3,\n },\n \"& .addressLogo\": {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n \"&.open\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n \"& .addressMapContainer\": {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER,\n },\n },\n \"& .contactMobile\": {\n marginRight: theme.spacing(5),\n },\n \"& .logo\": {\n width: 24,\n height: 24,\n },\n \"& .contact\": {\n \"& a\": {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary,\n },\n paddingLeft: theme.spacing(1),\n \"&.mobile\": {\n paddingLeft: theme.spacing(0.25),\n },\n },\n },\n },\n \"& .detailsContent\": {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: theme.spacing(3, 0, 2, 0),\n \"& .contentRow\": {\n paddingBottom: theme.spacing(3),\n \"&.hubDetails\": {\n paddingBottom: theme.spacing(1),\n },\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"& .contentColumn\": {\n flex: \"2 0 0\",\n \"&:last-child\": {\n flex: \"1 0 0\",\n },\n \"& p\": {\n fontSize: 14,\n lineHeight: \"17px\",\n },\n \"& .label\": {\n paddingBottom: theme.spacing(1),\n },\n \"& .content\": {\n fontWeight: 600,\n },\n },\n },\n },\n \"& .sellerDetails\": {\n paddingTop: theme.spacing(1.75),\n \"& .detailsHeader\": {\n backgroundColor: theme.palette.secondary.main,\n },\n },\n \"& .deliveryProofSection\": {\n paddingBottom: theme.spacing(1),\n \"& .content\": {\n width: \"100%\",\n \"& .deliveryProofContainer\": {\n flexDirection: \"column\",\n \"& .deliveryProofItem\": {\n paddingBottom: theme.spacing(1.5),\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"& .imagesContainer\": {\n flexWrap: \"nowrap\",\n \"& .imagesItem\": {\n marginRight: theme.spacing(1.5),\n width: \"50%\",\n height: 145,\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(2),\n \"&:last-child\": {\n marginRight: 0,\n },\n \"& .imageItemContainer\": {\n flexDirection: \"column\",\n \"& .imageItem\": {\n paddingBottom: theme.spacing(2),\n \"& .heading\": {\n fontSize: 14,\n fontWeight: 500,\n },\n \"& .allImagesContainer\": {\n flexWrap: \"nowrap\",\n overflow: \"auto\",\n \"& .viewerContainer\": {\n display: \"flex\",\n },\n \"&.sign\": {\n justifyContent: \"space-around\",\n },\n \"& img\": {\n width: \"auto\",\n height: 64,\n cursor: \"pointer\",\n marginRight: theme.spacing(1.5),\n \"&:last-child\": {\n marginRight: 0,\n },\n },\n },\n },\n },\n },\n },\n \"& .commentsContainer\": {\n flexDirection: \"column\",\n padding: theme.spacing(1),\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n \"& .commentsItem\": {\n paddingBottom: theme.spacing(0.75),\n \"& p\": {\n fontWeight: 500,\n fontSize: 12,\n },\n \"& .heading\": {\n fontSize: 14,\n },\n },\n },\n },\n },\n },\n },\n \"& .consignmentHistory\": {\n paddingBottom: theme.spacing(1),\n },\n \"& .tabularSection\": {\n paddingBottom: theme.spacing(1),\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"&.crates\": {\n \"& .itemsContainer .item .itemContainer .itemColumn.item1 p\": {\n fontWeight: 600,\n },\n \"& .itemsContainer .item .itemContainer .itemColumn.item1 .header p\": {\n fontWeight: 500,\n },\n \"& .crateBarcode\": {\n width: 40,\n height: 15,\n marginLeft: theme.spacing(3),\n },\n \"& .crateStageLocationIcon\": {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1),\n },\n },\n \"& .itemDiv\": {\n padding: theme.spacing(0),\n \"& .content\": {\n width: \"100%\",\n \"& .itemsContainer\": {\n flexWrap: \"nowrap\",\n \"& .item\": {\n padding: theme.spacing(2, 0),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n \"&:first-child\": {\n padding: 0,\n },\n \"&:last-child\": {\n borderBottom: \"none\",\n },\n \"& .itemContainer\": {\n padding: theme.spacing(0, 2),\n \"&.items\": {\n backgroundColor: COLORS.SECONDARY_MAIN,\n padding: theme.spacing(2),\n },\n \"& p\": {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600,\n },\n \"&.header p\": {\n color: COLORS.DOVE_GRAY,\n fontWeight: 500,\n },\n \"& .itemColumn\": {\n padding: theme.spacing(0),\n \"&.item1\": {\n \"& p\": {\n fontWeight: 400,\n textTransform: \"capitalize\",\n },\n \"& .rejectedReason\": {\n fontSize: 10,\n color: COLORS.ALIZARIN_CRIMSON,\n },\n \"& .viewOriginalLink\": {\n fontSize: 9,\n color: COLORS.COPY,\n cursor: \"pointer\",\n paddingRight: 6,\n },\n \"& .originalName\": {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 400,\n },\n },\n \"&.item2\": {\n \"& p\": {\n textAlign: \"center\",\n \"& .green\": {\n color: COLORS.PERSIAN_GREEN,\n },\n },\n },\n \"&.item3\": {\n \"& p\": {\n textAlign: \"right\",\n },\n },\n },\n },\n },\n },\n \"& .paymentContainer\": {\n padding: 16,\n paddingTop: 13,\n \"& .totalDivider\": {\n margin: \"11px 0px\",\n },\n \"& .paymentItem\": {\n \"&:last-child p\": {\n fontWeight: 600,\n },\n padding: \"5px 0\",\n \"& .paymentItemColumn\": {\n \"& p\": {\n fontSize: 14,\n lineHeight: \"17px\",\n },\n \"& .vat\": {\n fontWeight: 400,\n paddingLeft: theme.spacing(0.25),\n },\n \"&.right\": {\n marginLeft: \"auto\",\n },\n },\n },\n },\n },\n },\n },\n },\n accordionSummary: {\n \"& .header\": {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: theme.spacing(0.5),\n margin: 'auto 0px',\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"& .smallHeading\": {\n fontSize: 12,\n },\n },\n \"& .content\": {\n flexGrow: 1,\n },\n },\n\n timeline: {\n padding: \"0 !important\",\n margin: 0,\n \"& .timelineItem\": {\n minHeight: 50,\n \"&:last-child\": {\n minHeight: \"auto\",\n },\n \"&:before\": {\n content: \"none\",\n },\n \"& .timelineDot\": {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n \"& .dotIcon\": {\n width: 18,\n height: 18,\n padding: 5,\n \"&.active\": {\n padding: 0,\n },\n },\n },\n '& .lastModifiedContent': {\n fontSize: \"12px\",\n lineHeight: \"10px\",\n color: COLORS.DOVE_GRAY_DARK,\n paddingTop: \"6px\",\n '& .name': {\n marginLeft: \"4px\"\n }\n },\n '& .timelineContentItem': {\n padding: \"8px 0px\"\n },\n \"& .primaryConnector\": {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`,\n },\n \"& .timelineContent\": {\n padding: 0,\n paddingLeft: theme.spacing(1),\n \"& .heading\": {\n paddingTop: 1,\n fontSize: 14,\n lineHeight: \"14px\",\n fontWeight: 600,\n color: theme.palette.primary.main,\n \"&.error\": {\n color: COLORS.DARK_RED,\n \"&.active\": {\n paddingBottom: 17,\n },\n },\n \"&.active\": {\n // paddingBottom: 17\n },\n \"& .dateTime\": {\n fontSize: 12,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.DOVE_GRAY_DARK,\n paddingLeft: theme.spacing(0.5),\n verticalAlign: \"bottom\",\n },\n },\n \"& .metadataContainer\": {\n paddingBottom: theme.spacing(1.5),\n \"& .title\": {\n fontSize: 12,\n lineHeight: \"10px\",\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n fontWeight: 500,\n color: COLORS.COPY,\n },\n \"& .description\": {\n fontSize: 10,\n lineHeight: \"10px\",\n color: COLORS.DOVE_GRAY_LIGHT,\n },\n },\n },\n },\n },\n accordionBundle: {\n flexGrow: 1,\n \"&.MuiAccordion-root\":{\n boxShadow:'none !important'\n },\n \"& .header\": {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: theme.spacing(0.5),\n \"&:last-child\": {\n paddingBottom: 0,\n },\n \"& .smallHeading\": {\n fontSize: 12,\n },\n },\n \"& .content\": {\n flexGrow: 1,\n },\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 680,\n },\n checkbox: {\n marginLeft: \"0px\",\n },\n addressLabel: {\n fontSize: \"12px\",\n color: COLORS.PRIMARY_MAIN,\n lineHeight: \"16px\",\n fontWeight: 700,\n marginLeft: \"12px\",\n },\n confirmDialogPaperPropsRoot: {\n width: 338,\n height: 214,\n margin: \"auto\",\n borderRadius: theme.spacing(1),\n },\n confirmDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n \"& .contentItem\": {\n \"& p\": {\n lineHeight: 1.2,\n },\n \"&.heading\": {\n \"& p\": {\n fontSize: 24,\n fontWeight: 600,\n },\n },\n \"&.desc\": {\n padding: theme.spacing(0, 2.5),\n \"& p\": {\n fontSize: 18,\n fontWeight: 400,\n \"& .count\": {\n fontWeight: 600,\n },\n },\n },\n },\n },\n confirmDialogButtonsContainer: {\n justifyContent: \"center\",\n \"& .dialogBtn\": {\n \"&.primary\": {\n marginLeft: theme.spacing(1),\n },\n },\n },\n verticalDiv: {\n color: \"#0E5AA7\",\n height: \"16px\",\n background: \"#0E5AA7\",\n width: \"2px\",\n margin: \"2px 16px 0px 16px\",\n },\n pdfDocStyle: {\n overflow: \"scroll\",\n height: \"890px\",\n },\n pdfHeader: {\n position: \"absolute\",\n backgroundColor: \"#393939\",\n height: \"56px\",\n width: \"100%\",\n zIndex: 1,\n },\n pdfRoot: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n zoomOutStyle: {\n marginRight: \"10px\",\n cursor: \"pointer\",\n marginTop: \"20px\",\n },\n zoomInStyle: {\n cursor: \"pointer\",\n marginTop: \"12px\",\n marginLeft: \"16px\",\n },\n pdfName: {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.WHITE,\n lineHeight: \"17px\",\n display: \"flex\",\n alignContent: \"center\",\n alignItems: \"center\",\n },\n pdfScaleNo: {\n backgroundColor: \"#000408\",\n width: \"44px\",\n height: \"24px\",\n padding: \"6px\",\n color: \"white\",\n },\n invoiceModalBody: {\n borderRadius: \"8px\",\n \"& .react-pdf__Page\": {\n marginTop: \"56px\",\n \"& .react-pdf__Page__canvas\": {\n margin: \"0 auto\",\n height: \"100% !important\",\n overflow: \"auto\",\n minWidth: \"1064px\",\n },\n },\n \"& .react-pdf__Page__annotations.annotationLayer\": {\n padding: \"8px\",\n },\n },\n countSection: {\n margin: \"auto\",\n width: 100,\n height: 40,\n borderRadius: 100,\n backgroundColor: COLORS.FOOTER_COUNT_BACKGROUND,\n color: COLORS.WHITE,\n left: \"calc(50% - 40px)\",\n bottom: \"38px\",\n position: \"fixed\",\n zIndex: 100,\n \"& .countContainer\": {\n height: \"100%\",\n \"& .countItem\": {\n margin: \"auto\",\n \"& p\": {\n fontSize: 16,\n fontWeight: 400,\n },\n \"& .current\": {\n fontWeight: 500,\n },\n \"& .separator\": {\n padding: \"0 2px\",\n },\n },\n },\n },\n closeModalIcon: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n paddingRight: \"48px\",\n },\n modalTitle: {\n fontSize: \"24px\",\n fontWeight: 600,\n padding: \"24px\",\n },\n applyModalBodyTitle: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n fontWeight: 600,\n fontSize: \"16px\",\n lineHeight: \"20px\",\n paddingTop: \"16px\",\n },\n noPdfModal: {\n border: \"none\",\n minWidth: \"800px\",\n minHeight: \"500px\",\n maxHeight: \"890px\",\n backgroundColor: COLORS.SECONDARY_LIGHT,\n position: \"absolute\",\n top: \"40%\",\n left: \"50%\",\n transform: \"translate(-40%, -50%)\",\n padding: \"24px\",\n textAlign: \"center\",\n borderRadius: \"8px\",\n },\n closeNoPdfModalIcon: {\n position: \"absolute\",\n right: \"-20px\",\n top: \"-21px\",\n width: \"40px\",\n height: \"40px\",\n zIndex: 1,\n cursor: \"pointer\",\n },\n noInvoiceMsg: {\n fontSize: \"18px\",\n fontWeight: 500,\n },\n openX: {\n transform: \"scaleX(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY,\n },\n closeX: {\n transform: \"scaleX(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY,\n },\n openY: {\n transform: \"scaleY(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY,\n },\n closeY: {\n transform: \"scaleY(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY,\n },\n bundleProduct:{\n \"& .icon\": {\n fill: \"none\",\n },\n '& .bundleRows':{\n marginTop: 24,\n '& .itemContainer':{\n marginTop: 12,\n '&.rowItem':{\n \"& p\": {\n fontWeight: '400 !important',\n },\n \n }\n \n },\n }\n },\n itemHeader:{\n display: 'flex',\n backgroundColor: COLORS.LIGHT_BLUE,\n width: 'fit-content',\n padding: '4px 8px 2px 8px',\n borderRadius: 12\n },\n rejectedReason:{\n textTransform: \"capitalize\",\n color: '#DD2326',\n fontSize: 8,\n padding: '0px 16px',\n marginTop: 8,\n \"& p\": {\n fontWeight: 400,\n fontSize:12\n },\n },\n accordianVerticalDiv: {\n color: \"#0E5AA7\",\n height: \"16px\",\n background: \"#0E5AA7\",\n width: \"2px\",\n margin: \"auto 8px auto 8px\",\n },\n titleContent: {\n fontSize: 12,\n fontWeight: 600,\n margin: 'auto 0px',\n color: COLORS.PERSIAN_GREEN_DARK \n },\n topLevelShieldCheckStyle: {\n margin: 'auto 0px auto 8px',\n fill: COLORS.WHITE\n },\n shieldCheckStyle: {\n margin: 'auto 4px auto 0px',\n fill: COLORS.WHITE\n }\n })\n);","import React from 'react';\nimport { useBarcode } from 'react-barcodes';\n\ninterface CustomBarcodeProps {\n value: string;\n imgProps?: any;\n options?: any;\n}\n\nconst CustomBarcode = (props: CustomBarcodeProps) => {\n const { value, imgProps, options } = props;\n\n const { inputRef } = useBarcode({\n value: value || \"N/A\",\n options: options || {}\n });\n\n return (\n Hello & welcome!
\n */\nexport const decodeHtmlEntities = (text: string): string => {\n const textarea = document.createElement(\"textarea\");\n textarea.innerHTML = text;\n return textarea.value;\n};\n","import React, { forwardRef, ReactElement, Ref, useCallback, useState, useEffect } from 'react';\nimport CustomDialog from '../common/Dialog';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { AppState } from \"../config/redux/reducers\";\nimport { useStyles } from './UpdatePartialRejection.styles';\nimport { TransitionProps } from \"@material-ui/core/transitions\";\nimport Slide from \"@material-ui/core/Slide\";\nimport { Button, Grid, Typography } from '@material-ui/core';\nimport AppConstants from '../constants';\nimport { fixDecimals } from 'utils/helpers.utils';\nimport SelectBox from '../common/SelectBox';\nimport { fetchRejectionReasons, fetchRefreshedDataForPCNotReceived } from './redux/planningSlice';\nimport { rejectionDataTransform, bundleRejectionDataTransform } from './../mocks/routePlanning/response.transforms';\nimport BundleProducts from '../BundleProducts/index'\nimport { decodeHtmlEntities } from 'utils/textUtils';\ninterface UpdatePartialRejectionProps {\n open: boolean;\n consignment: any;\n isPcNotRecieved?: boolean;\n items: any;\n bundleProduct?: any;\n closePopup: () => void;\n handleDialogAction?: (params: any) => void;\n}\n\nconst Transition = forwardRef(function Transition(\n props: TransitionProps & { children?: ReactElement\n View Original \n handleOriginalName()} />\n
\n }\n \n
\n }\n {!loading && !displayInvoice &&\n \n \n {Array.from(new Array(numPages), (el, index) => (\n
\n \n
\n }\n \n \n
\n setShowInvoiceModal(false)}>\n 
\n
\n {invoiceMessage}
\n\n {(deliveryInformation && deliveryInformation.carrierTrackingId) || consignment.orderReference \n ? (\n deliveryInformation && deliveryInformation.carrierTrackingUrl \n ? (<>\n {`Live Tracking (#${deliveryInformation && deliveryInformation.carrierTrackingId ? deliveryInformation.carrierTrackingId : consignment.orderReference ? consignment.orderReference : \"\"})`}\n \n handleInvoicePdf(consignment)}> View Invoice\n {deliveryInformation?.deliveryExecutionStatus && (\n <>\n \n {`${deliveryInformation?.deliveryExecutionStatus || \"\"}`} \n \n )}\n )\n : <>\n {`Track Consignment (#${deliveryInformation && deliveryInformation.carrierTrackingId ? deliveryInformation.carrierTrackingId : consignment.orderReference ? consignment.orderReference : \"\"})`} \n {deliveryInformation?.deliveryExecutionStatus && (\n <>\n \n {`${deliveryInformation?.deliveryExecutionStatus || \"\"}`} \n \n )}\n \n ) \n : deliveryInformation?.deliveryExecutionStatus && {`${deliveryInformation?.deliveryExecutionStatus || \"\"}`} \n }\n
\n No Crates Available
\n ) : null}\n {cratesFromAlecto.crateAvailableOrders &&\n cratesFromAlecto.crateAvailableOrders.length > 0 ? (\n {getCrateItemsFromAlecto()}
\n ) : null}\n \n ) : null}\n \n ) : null}\n \n )}\n \n {`${params.value}`} \n {params?.rowData?.rescheduled &&
\n )\n }\n if (newHeader.field === 'deliveryStatus') {\n newHeader.renderCell = (params: any) => (\n params.value ?\n \n {loading && \n \n \n \n \n \n \n \n \n {\n getFilterChips()\n }\n \n \n \n \n \n \n \n \n \n \n {\n getFilterChips(true)\n }\n \n \n \n \n \n {\n openPublishErrorMsgPopup &&\n \n \n \n \n {`${publishedRoutesErrors.length} Route(s) ${AppConstants.PLANNING_CONSTANTS.ROUTES_DATA.PUBLISH_ROUTES_ERROR_MSG}`} \n \n \n \n \n \n \n \n \n \n {getPublishedErrorContentItems()}\n \n \n \n }\n \n \n \n \n \n \n \n {openConsignmentDetailsPopup && }\n \n \n {!error && renderExcelProgress ? (\n \n {excelLoading ? (\n \n \n Your files are getting downloaded\n \n ) : (\n \n \n Your files have been downloaded\n \n \n )}\n {excelLoading ? \n \n \n \n }\n ) : (\n exportError === \"INTERNAL_SERVER_ERROR\" && renderExcelProgress ? (\n \n \n \n Error Downloading the file. Try Again!!\n \n \n \n \n \n \n \n ) : null)}\n\n \n
\n );\n};\n\nexport default RoutePlanning;","import { createStyles, makeStyles, StepConnector, Theme, withStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\nimport { alignItems } from \"styled-system\";\n\nexport const StepperTimelineConnector = withStyles({\n alternativeLabel: {\n top: 28,\n left: 'calc(-50% + 9px)',\n right: 'calc(50% + 9px)'\n },\n active: {\n '& $line': {\n borderColor: COLORS.SECONDARY_DARK,\n },\n },\n line: {\n borderColor: COLORS.SECONDARY_DARK,\n borderTopWidth: 4,\n borderRadius: 100,\n },\n})(StepConnector);\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n '& .padding-2': {\n padding: theme.spacing(2)\n }\n },\n statusHeaderContainer: {\n alignItems: \"center\",\n paddingLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"10px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 8,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.CREAM_CAN': {\n backgroundColor: COLORS.CREAM_CAN\n },\n '&.VISTA_BLUE': {\n backgroundColor: COLORS.VISTA_BLUE\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.SEA_GREEN\n },\n '&.GOLDEN_BELL': {\n backgroundColor: COLORS.GOLDEN_BELL\n },\n '&.SCAMPI': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.BLUE': {\n backgroundColor: COLORS.PRIMARY_MAIN\n },\n '&.SEA_GREEN2': {\n backgroundColor: COLORS.SEA_GREEN2\n },\n '&.LUCKY': {\n backgroundColor: COLORS.LUCKY\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n },\n '&.JUNGLE_GREEN': {\n backgroundColor: COLORS.JUNGLE_GREEN\n },\n '&.BLACK': {\n backgroundColor: COLORS.BLACK\n },\n '&.TROPICAL_BLUE': {\n backgroundColor: COLORS.TROPICAL_BLUE,\n color: COLORS.ASTRAL\n },\n '&.CATSKILL_WHITE': {\n backgroundColor: COLORS.CATSKILL_WHITE,\n color: COLORS.ASTRAL\n },\n '&.BLUE_HAZE': {\n backgroundColor: COLORS.BLUE_HAZE,\n color: COLORS.SCAMPI\n },\n '&.BARLEY_WHITE': {\n backgroundColor: COLORS.BARLEY_WHITE,\n color: COLORS.OLD_GOLD\n },\n '&.DOUBLE_PEARL_LUSTA': {\n backgroundColor: COLORS.DOUBLE_PEARL_LUSTA,\n color: COLORS.PIMPKIN_SKIN\n },\n '&.JAGGED_ICE': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.BLUE_STONE\n },\n '&.TARA': {\n backgroundColor: COLORS.TARA,\n color: COLORS.OCEAN_GREEN\n },\n '&.JAGGED_ICE_PREPARED': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.JUNGLE_GREEN\n },\n '&.ALTO': {\n backgroundColor: COLORS.ALTO,\n color: COLORS.DUSTY_GRAY_LIGHT\n },\n '&.parent':{\n backgroundColor: COLORS.OLD_GOLD,\n color: COLORS.WHITE,\n margin: 4,\n textTransform: \"uppercase\",\n }\n }\n },\n container: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n height: \"100%\",\n '& .createRtItem': {\n width: '100%',\n '&.heading': {\n paddingBottom: theme.spacing(3),\n display: \"flex\",\n justifyContent: \"space-between\",\n '& .headingContainer': {\n alignItems: \"center\"\n },\n '& .editIcon': {\n width: 22,\n height: 22,\n marginLeft: theme.spacing(1),\n cursor: \"pointer\"\n },\n '& .headingTitle': {\n fontSize: 24,\n color: COLORS.BLACK,\n fontWeight: 600,\n }\n },\n '&.content': {\n height: \"calc(100vh - 176px)\"\n }\n }\n },\n createRtContentContainer: {\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n boxShadow: `0px 1px 4px ${COLORS.LIGHT_BLACK_SHADOW}`,\n borderRadius: theme.spacing(1),\n height: \"100%\",\n '&.left': {\n width: 500,\n minWidth: 500,\n marginRight: theme.spacing(3),\n '& .consignmentsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentItem': {\n '& .headerSectionContainer': {\n flexDirection: \"column\",\n padding: theme.spacing(2, 2, 1, 2),\n '&.viewMode': {\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n },\n '& .searchTextBox': {\n '& .MuiOutlinedInput-root': {\n width: 210,\n }\n },\n '& .MuiOutlinedInput-root': {\n width: 143,\n minWidth: 143,\n height: 24,\n borderRadius: theme.spacing(.5)\n },\n '& .MuiOutlinedInput-input': {\n fontSize: 10,\n padding: 0,\n paddingLeft: theme.spacing(.5)\n },\n '& .MuiSelect-iconOutlined': {\n right: 0\n },\n '& .MuiSelect-root': {\n '& .MuiChip-root': {\n fontSize: 10,\n height: 15\n }\n },\n '& .headerContainer': {\n alignItems: \"center\",\n paddingBottom: theme.spacing(1.5),\n '& .headerItem': {\n '&.heading': {\n flexGrow: 1,\n '& .refreshIcon': {\n width: 16,\n height: 16,\n cursor: \"pointer\",\n marginLeft: theme.spacing(0.5)\n },\n '& p': {\n fontSize: 16,\n fontWeight: 600\n }\n },\n '&.icons': {\n display: \"flex\",\n alignItems: \"center\",\n '& .MuiOutlinedInput-adornedEnd': {\n paddingRight: 0,\n '& .MuiSvgIcon-root': {\n padding: theme.spacing(.25)\n }\n },\n '& .MuiInputAdornment-positionEnd': {\n marginLeft: 0\n },\n '& .MuiIconButton-sizeSmall': {\n padding: 0,\n '&.MuiIconButton-edgeEnd': {\n marginRight: 0\n }\n },\n '& .MuiSvgIcon-root': {\n width: 19,\n height: 19\n },\n '& .icon': {\n padding: theme.spacing(0.5)\n }\n }\n }\n },\n '& .filtersContainer': {\n '& .filterItem': {\n paddingRight: theme.spacing(0.5),\n '&:last-child': {\n paddingRight: 0\n },\n '& .icon-datepicker': {\n marginLeft: 0\n },\n '& .filterName': {\n fontSize: 9,\n fontWeight:600,\n marginBottom:4 \n },\n }\n }\n },\n '&.content': {\n height: \"calc(100% - 80px)\",\n '& .contentContainer': {\n position: \"relative\",\n height: \"100%\"\n },\n '& .hubLabel': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(8.5),\n '&.isRoute': {\n right: theme.spacing(2)\n },\n '& .hubLabelContainer': {\n alignItems: \"center\",\n height: 21,\n '& .hubLabelText': {\n fontSize: 12,\n fontWeight: 600,\n maxWidth: 200,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n '& .label': {\n fontWeight: 500,\n paddingRight: theme.spacing(0.5)\n }\n }\n }\n },\n '& .toggleAll': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(2.25),\n cursor: \"pointer\",\n userSelect: \"none\",\n '& .toggleAllContainer': {\n alignItems: \"center\",\n '& .toggleItem': {\n paddingLeft: theme.spacing(0.5),\n '&.iconItem': {\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.expanded': {\n transform: \"rotate(180deg)\"\n }\n },\n '& .toggleText': {\n fontSize: 14,\n fontWeight: 600\n },\n '& .toggleIcon': {\n width: 21,\n height: 21,\n verticalAlign: \"bottom\"\n }\n }\n }\n },\n '& .slotContentContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '&.viewMode': {\n overflow: \"auto\",\n paddingBottom: theme.spacing(2),\n '& .slotItemContainer': {\n paddingLeft: theme.spacing(2)\n },\n \"& .MuiAccordionSummary-root\":{\n minHeight: 'unset'\n },\n \"& .MuiAccordionSummary-content.Mui-expanded\":{\n margin : 'unset'\n },\n \"& .MuiAccordionDetails-root\": {\n display:\"inline\",\n },\n \"& .MuiAccordion-root.Mui-expanded\":{\n margin: 0,\n },\n },\n '& .slotItemContainer': {\n alignItems: \"flex-start\",\n padding: theme.spacing(1, 2, 1, 6),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n flexWrap: \"nowrap\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n borderLeft: `3px solid ${theme.palette.primary.main}`\n },\n '&.drafted': {\n color: COLORS.GRAY_DARK,\n paddingLeft: theme.spacing(3.5)\n },\n '&.terminal': {\n color: COLORS.GRAY_DARK,\n borderColor: COLORS.GRAY_DARK\n },\n '& .slotContentItem': {\n '&.checkbox': {\n '& .checkboxContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .lockIcon': {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1)\n }\n },\n paddingRight: theme.spacing(1.5)\n },\n '&.consignmentDetails': {\n flexGrow: 1,\n height: \"100%\",\n '& .consignmentDetailsContainer': {\n justifyContent: \"space-between\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailsItem': {\n '& .consignmentHeader': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentHeaderItem': {\n '&.details': {\n flexGrow: 1,\n paddingTop: theme.spacing(0.5)\n },\n '& .headerDetailsContainer': {\n flexWrap: \"nowrap\",\n '& .itemContainer': {\n flexWrap: \"nowrap\"\n },\n '& .consignmentAddressIcon':{\n marginLeft: \"8px\", \n minWidth:\"14px\",\n maxWidth:\"14px\"\n },\n },\n '&.status': {\n display: \"flex\",\n alignItems: \"center\"\n },\n }\n },\n\n '& .consignmentAddressCTA':{\n fontSize: \"10px\", \n color: \"#0E5AA7\", \n cursor: \"pointer\"\n },\n '& .headingContainer': {\n alignItems: \"center\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .heading': {\n fontSize: 12,\n fontWeight: 600,\n cursor: \"pointer\"\n },\n },\n '& .seqNoContainer': {\n backgroundColor: COLORS.ALERT_ORANGE,\n borderRadius: 2,\n '& .seqNo': {\n fontSize: 10,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n lineHeight: '16px',\n padding: theme.spacing(0, 1)\n }\n },\n '& .count': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n padding: theme.spacing(0, 0.75)\n },\n '& .icon': {\n width: 16,\n height: 16\n },\n '&.desc': {\n paddingTop: theme.spacing(1)\n },\n '& .descContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .location': {\n width: 356\n },\n '& .itemContainer': {\n alignItems: \"center\",\n paddingRight: theme.spacing(2.5),\n flexWrap: \"nowrap\",\n '& .locDesc': {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\"\n }\n },\n }\n }\n },\n }\n }\n }\n },\n '& .MuiTabs-root': {\n padding: theme.spacing(0, 2),\n minHeight: 42,\n borderBottom: `1px solid ${theme.palette.secondary.main}`\n },\n '& .tabPanel': {\n padding: 0,\n height: 'calc(100% - 42px)',\n overflow: \"auto\",\n '& .tabPanelContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .delSlotContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n },\n '& .highlightText': {\n backgroundColor: COLORS.SUCCESS_GREEN\n },\n '& .accordionRoot': {\n boxShadow: \"none\",\n margin: 0,\n '&::before': {\n opacity: 0\n }\n },\n '& .accordianSummary': {\n border: \"none\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '&.delArea': {\n minHeight: 46,\n height: 46,\n '& .areaHeaderContainer': {\n alignItems: \"center\",\n '& .areaHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT\n }\n }\n }\n }\n },\n '&.delSlot': {\n minHeight: 32,\n height: 32,\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n '& .slotHeaderContainer': {\n alignItems: \"center\",\n '& .Mui-disabled': {\n pointerEvents: 'auto',\n cursor: 'not-allowed',\n },\n '& .slotHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 12,\n fontWeight: 500,\n paddingLeft: theme.spacing(1.5)\n }\n }\n }\n }\n }\n },\n '& .accordianDetails': {\n padding: 0,\n '&.routes': {\n '& .slotItemContainer': {\n height: 56\n }\n }\n },\n '&.planned': {\n paddingTop: theme.spacing(1.5),\n '& .heading': {\n paddingLeft: '0px !important'\n },\n '& .accordianDetails': {\n '& .slotItemContainer': {\n padding: '10px 8px 10px 16px !important',\n cursor: 'pointer'\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.right': {\n flexGrow: 1,\n width: 'auto',\n overflow: 'auto',\n },\n '& .detailsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailItem': {\n '&.routeDetails': {\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n padding: theme.spacing(2),\n '&.viewMode': {\n '& .routeDetailsContainer .routeDetailsItem.basicDesc': {\n paddingBottom: 0\n }\n },\n '& .routeDetailsContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .routeDetailsItem': {\n '&.header': {\n display: \"flex\",\n justifyContent: \"space-between\",\n '& .routeIdHeaderContainer': {\n alignItems: \"center\",\n justifyContent: \"space-between\",\n '& .ddnsItem': {\n '& .MuiFormControl-root': {\n paddingRight: theme.spacing(1.5),\n '&:last-child': {\n paddingRight: 0\n }\n },\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n }\n }\n },\n paddingBottom: theme.spacing(2)\n },\n '& .heading': {\n fontSize: 16,\n fontWeight: 600,\n color: COLORS.BLACK\n },\n \"& .subHeading\": {\n fontSize: 14,\n fontWeight: 500,\n color: COLORS.BLACK,\n },\n '&.basicDesc': {\n paddingBottom: theme.spacing(3)\n },\n '&.noSelectedArea': {\n padding: theme.spacing(3),\n backgroundColor: COLORS.WHITE,\n border: `1px dashed ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n '& p': {\n textAlign: \"center\",\n fontSize: 14,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '&.timeline': {\n alignSelf: \"flex-start\",\n height: 80,\n maxWidth: '100%',\n overflow: 'auto',\n },\n '&.timelineWarning': {\n paddingBottom: theme.spacing(1.5),\n '& .warningContainer': {\n alignItems: \"center\",\n '& .warningItem': {\n paddingRight: theme.spacing(1),\n '& p': {\n fontSize: 11,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '& .warningIcon': {\n width: 20,\n height: 20,\n verticalAlign: \"middle\",\n\n }\n },\n\n },\n '& .basicDescContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .basicItem': {\n paddingBottom: theme.spacing(2),\n '&:last-child': {\n paddingBottom: 0\n },\n '&.driver': {\n paddingRight: theme.spacing(2)\n },\n '&.descriptions': {\n flexGrow: 1\n },\n '& .descCommonContainer': {\n '& .commonItem': {\n flex: \"1 0 0\",\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n },\n '&:last-child': {\n flex: \"0.5 0 0\"\n },\n '& .descContainer': {\n flexDirection: \"column\",\n '& .capacityBreachContainer': {\n alignItems: \"center\",\n '& .infoErrorIcon': {\n width: 16,\n height: 16,\n marginLeft: theme.spacing(1)\n }\n },\n '& p': {\n fontSize: 12,\n fontWeight: 500,\n lineHeight: \"18px\"\n },\n '& .value': {\n alignSelf: \"flex-start\",\n '& p': {\n fontWeight: 600\n }\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.mapZone': {\n flexGrow: 1,\n backgroundColor: theme.palette.secondary.dark,\n position: \"relative\",\n overflow: \"auto\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '& .listViewTimelineContent': {\n backgroundColor: COLORS.WHITE,\n padding: theme.spacing(2, 3),\n height: \"100%\",\n overflow: \"auto\"\n },\n '& .mapSwitchBtnContainer': {\n position: \"absolute\",\n alignItems: \"center\",\n width: 110,\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n backgroundColor: COLORS.WHITE,\n top: theme.spacing(1),\n right: theme.spacing(6.5),\n flexWrap: \"nowrap\",\n '& .switchBtnItem': {\n cursor: \"pointer\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n '&.mapView': {\n borderTopLeftRadius: theme.spacing(1),\n borderBottomLeftRadius: theme.spacing(1),\n '& path': {\n stroke: theme.palette.primary.main\n }\n },\n '&.listView': {\n borderTopRightRadius: theme.spacing(1),\n borderBottomRightRadius: theme.spacing(1),\n '& path': {\n fill: theme.palette.primary.main\n }\n },\n '& .title': {\n color: theme.palette.primary.main,\n fontWeight: 600\n }\n },\n '& .switchBtnItemContainer': {\n flexDirection: \"column\",\n alignItems: \"center\",\n '& .title': {\n fontSize: 12,\n fontWeight: 500,\n paddingBottom: theme.spacing(0.5)\n }\n },\n '& .switchBtnIcon': {\n width: 54,\n height: 40,\n verticalAlign: \"middle\",\n padding: theme.spacing(0, 2),\n backgroundColor: \"transparent\"\n },\n }\n\n }\n },\n '&.buttons': {\n '& .buttonsContainer': {\n padding: theme.spacing(2),\n justifyContent: \"flex-end\",\n '& .btn': {\n marginRight: theme.spacing(1.5),\n '&:last-child': {\n marginRight: 0\n }\n },\n '& .refreshMapBtn': {\n marginRight: \"auto\"\n },\n '& .saveBtn': {\n padding: theme.spacing(1, 5.5)\n }\n }\n },\n '&.planned': {\n '& .routeDetailsItem': {\n '&.basicDesc': {\n paddingBottom: '0 !important'\n }\n }\n },\n }\n }\n }\n },\n timelineStepper: {\n padding: 0,\n alignItems: \"center\",\n backgroundColor: 'transparent',\n '& .timelineStep': {\n paddingLeft: 16,\n paddingRight: 16,\n '&.isDragging': {\n '& .MuiStepConnector-alternativeLabel': {\n display: \"none\"\n }\n },\n '&.first': {\n paddingLeft: 0\n }\n },\n '& .MuiStepLabel-root': {\n flexDirection: 'column-reverse',\n '& .MuiStepLabel-labelContainer': {\n '& .MuiStepLabel-alternativeLabel': {\n whiteSpace: \"nowrap\",\n width: 32,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\"\n }\n },\n '&.MuiStepLabel-alternativeLabel': {\n flexDirection: 'column-reverse'\n }\n },\n '& .MuiStepLabel-iconContainer': {\n paddingRight: 0\n },\n '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {\n marginTop: 0\n },\n '& .MuiStepLabel-label': {\n fontSize: 10,\n color: '#252525',\n paddingBottom: 6,\n textAlign: \"center\"\n }\n },\n listViewTimeline: {\n padding: \"0 !important\",\n margin: 0,\n '& .timelineItem': {\n minHeight: 64,\n '&.first': {\n minHeight: 62,\n '& .MuiTimelineSeparator-root': {\n padding: 0\n }\n },\n '& .MuiTimelineSeparator-root': {\n paddingLeft: 3\n },\n '&:last-child': {\n minHeight: \"auto\",\n '& .primaryConnector': {\n display: \"none\"\n },\n },\n '&:before': {\n content: \"none\"\n },\n '& .timelineDot': {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n '&.listItem': {\n paddingTop: 9\n },\n '& .timelineIcon': {\n padding: 0,\n },\n '& .countIcon': {\n width: 24,\n height: 24,\n borderRadius: \"50%\",\n backgroundColor: COLORS.MAROON,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n '& .count': {\n fontSize: 10,\n fontWeight: 600,\n lineHeight: \"12px\",\n color: COLORS.WHITE\n }\n },\n '& .areaIcon': {\n width: 32,\n height: 32\n }\n },\n '& .primaryConnector': {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`\n },\n '& .timelineContent': {\n padding: 0,\n paddingLeft: theme.spacing(1.5),\n '& .contentContainer': {\n alignItems: \"center\",\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n flexWrap: \"nowrap\",\n marginBottom: theme.spacing(2),\n '& .listViewContentItem': {\n '&.itemHeading': {\n padding: theme.spacing(0, 2),\n cursor: \"pointer\"\n },\n '&.itemSubHeading': {\n padding: theme.spacing(0, 1),\n \n },\n '& .id': {\n fontSize: 12,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n whiteSpace: \"nowrap\"\n },\n '& .subHeading': {\n fontSize: 12,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n whiteSpace: \"normal\",\n margin:'auto',\n padding: theme.spacing(0, 0, 0, 0.5),\n },\n '&.itemDetails': {\n flexGrow: 1,\n padding: theme.spacing(1, 1.5, 1)\n },\n '& .itemDetailsContainer': {\n flexWrap: \"nowrap\",\n alignItems: \"center\",\n '& .detailsItem': {\n paddingRight: theme.spacing(1.5)\n },\n '& .itemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\",\n whiteSpace: \"nowrap\",\n '&.address': {\n whiteSpace: \"normal\",\n }\n },\n '& .valueDetails': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\",\n whiteSpace: \"normal\",\n '&.address': {\n whiteSpace: \"normal\",\n }\n }\n },\n '& .flexWrapNoWrap': {\n flexWrap: \"nowrap\",\n }\n }\n }\n },\n '& .titleHeading': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.BLACK,\n paddingTop: theme.spacing(1)\n }\n }\n }\n },\n viewModeSubroute:{\n margin: theme.spacing(0.5, 0, 0, 0),\n padding: 0,\n '& .slotItemContainer': {\n '&:last-child': {\n borderBottom: 'none !important'\n },\n }\n },\n subRoute: {\n margin: theme.spacing(0, 0, 0, 0),\n boxShadow: 'none',\n borderRadius: 'none',\n \"& .MuiAccordion-root.Mui-expanded\" : { margin: theme.spacing(0, 0, 0, 0) },\n '& .MuiAccordionSummary-root' : {},\n '& .MuiAccordionSummary-content':{\n display:'flex',\n alignItems:'center'\n },\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.25, 0.5),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n fontSize: 8,\n textTransform: \"uppercase\",\n '&.subRouteTag':{\n backgroundColor: COLORS.INFO_BLUE,\n color: COLORS.WHITE,\n margin: 4\n },\n '&.status':{\n backgroundColor: COLORS.TROPICAL_BLUE ,\n color: COLORS.ASTRAL,\n margin: 4\n }\n }\n },\n confirmDialogButtonsContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(8.25),\n '& .dialogBtn': {\n '&.secondary': {\n paddingLeft: theme.spacing(8),\n paddingRight: theme.spacing(8),\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n paddingLeft: theme.spacing(7.25),\n paddingRight: theme.spacing(7.25),\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmDialogAddressButtonsContainer: {\n justifyContent: \"center\",\n \"& .dialogBtn\": {\n \"&.primary\": {\n marginLeft: theme.spacing(1),\n },\n },\n },\n confirmDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '& p': {\n textAlign: \"center\",\n lineHeight: 1.2,\n '&.alignLeft': {\n textAlign: \"left\",\n }\n },\n '&.heading': {\n padding: theme.spacing(0, 15.75, 5),\n '& p': {\n fontSize: 24,\n fontWeight: 600\n }\n },\n '&.desc': {\n padding: theme.spacing(0, 2.5),\n '& p': {\n fontSize: 18,\n fontWeight: 400,\n '& .count': {\n fontWeight: 600\n }\n }\n }\n }\n },\n capacityBreachDialogTitle: {\n fontSize: 20,\n fontWeight: 600,\n paddingLeft: theme.spacing(2.5)\n },\n capacityBreachDialogButtonsContainer: {\n justifyContent: \"flex-end\",\n paddingBottom: theme.spacing(3.75),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmWithTitleDialogPaperPropsRoot: {\n width: 600,\n height: 240,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n confirmDialogPaperPropsRoot: {\n width: 600,\n height: 350,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n addressConfirmDialogPaperPropsRoot: {\n width: 338,\n height: 214,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n endSessionSelectionDialogPaperPropsRoot: {\n width: 428,\n height: 242,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n endSessionSelectionDialogTitle: {\n fontSize: 20,\n fontWeight: 600,\n padding: \"6px 0px 0px 12px\"\n },\n\n endSessionSelectionDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '&.heading': {\n '& p': {\n fontSize: 14,\n fontWeight: 400\n }\n },\n '&.hub': {\n paddingTop: theme.spacing(3.75)\n }\n }\n },\n content: {\n fontWeight: 500,\n fontSize: \"14px\",\n lineHeight: \"15px\",\n color: \"#252525\"\n },\n endSessionDialogButtonsContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(1),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n selectMenuPropsList: {\n '& .MuiListItem-root': {\n paddingLeft: theme.spacing(1.5),\n paddingRight: theme.spacing(1.5),\n whiteSpace: \"normal\",\n '& .MuiListItemText-primary': {\n fontSize: 10\n }\n },\n '& .MuiCheckbox-root': {\n backgroundSize: \"16px 16px\",\n marginRight: theme.spacing(0.75)\n }\n },\n selectMenuPaperProps: {\n maxHeight: 200,\n width: 143,\n border: `1px solid ${COLORS.BLACK_INPUT_BORDER}`,\n borderRadius: theme.spacing(1),\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n overflow: \"auto\",\n boxShadow: \"none\"\n },\n titleContainer: {\n \"& .headingContainer\": {\n flexDirection: \"column\",\n \"& .titleHeading\": {\n fontSize: 18,\n fontWeight: 500,\n \"& .content\": {\n fontWeight: 600,\n },\n },\n \"& .titleContent\": {\n fontSize: 12,\n fontWeight: 600,\n \"&.link\": {\n cursor: \"pointer\",\n },\n },\n },\n },\n addressContent: {\n fontSize: \"14px\", \n fontWeight: 500, \n },\n flexWrapNoWrap: {\n flexWrap: \"nowrap\",\n }\n })\n\n);\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M12.4435 6.16339L16.5758 9.63955L20 5.52399L19.2268 4.88575L16.9771 7.59075C16.5201 3.34673 12.9813 0.0994883 8.7073 0.00223783C4.43328 -0.0950127 0.750005 2.9879 0.0998253 7.20672C-0.550355 11.4255 2.03427 15.4714 6.13986 16.6616C10.2454 17.8517 14.5983 15.8169 16.312 11.9064L15.3924 11.5039C13.8771 14.9751 10.011 16.7775 6.37265 15.709C2.73429 14.6404 0.461381 11.035 1.0699 7.29748C1.67842 3.55994 4.9781 0.858994 8.76811 0.996114C12.5581 1.13323 15.6533 4.06554 15.9893 7.83725L13.0909 5.39859L12.4435 6.16339Z\",\n fill: \"#4D4D4D\"\n});\n\nvar SvgRefreshIcon = function SvgRefreshIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 17,\n viewBox: \"0 0 20 17\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgRefreshIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/refresh-icon.69ef7882.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.57326 2.99102C10.8424 1.68587 12.9192 1.66777 14.2129 2.9491C15.515 4.23615 15.5386 6.34344 14.2648 7.65907V12.6396C14.2648 12.7768 14.1818 12.8997 14.0563 12.9502L11.502 13.9771C11.4633 13.9924 11.4218 14 11.3812 14L11.3783 13.999L11.3736 14H11.0434L11.0462 8.54219C9.63459 8.16017 8.64099 6.88456 8.60796 5.40983H8.11918V7.57809C8.11918 7.63621 8.08805 7.69146 8.03804 7.72099C7.98708 7.75053 7.92575 7.75148 7.87385 7.72385L7.47188 7.50188L7.07086 7.72385C7.02085 7.75148 6.9614 7.75148 6.91139 7.72385L6.51131 7.50188L6.11028 7.72385C6.08575 7.73719 6.05838 7.74481 6.03102 7.74481C5.93949 7.74481 5.86589 7.6705 5.86589 7.57809V5.40983H2.65391V13.3484H10.0856V14H2.32931C2.1472 14 2 13.8504 2 13.6666V5.08783C2.00283 5.05449 2.00849 5.02496 2.01793 4.99733C2.02076 4.98304 2.02359 4.9697 2.02736 4.95541C2.03586 4.94017 2.04624 4.92493 2.05756 4.91064C2.06888 4.88968 2.08304 4.86872 2.09813 4.85062C2.10663 4.843 2.11795 4.83823 2.12644 4.83157C2.15003 4.81061 2.1774 4.79251 2.20665 4.77917L2.20948 4.77726L4.87229 3.72171C4.91098 3.70647 4.95155 3.69885 4.99307 3.69885H9.04862C9.1911 3.44068 9.36756 3.20251 9.57326 2.99102ZM13.6043 8.17923C13.0919 8.49646 12.5031 8.66604 11.902 8.66889C11.8369 8.66889 11.7765 8.65365 11.7114 8.64984V13.175L13.6043 12.4148V8.17923ZM11.8958 2.7016C10.4361 2.7016 9.25376 3.89529 9.25376 5.36906C9.25376 6.84188 10.4361 8.03652 11.8958 8.03652C13.3546 8.03652 14.5379 6.84188 14.5379 5.36906C14.5379 3.89529 13.3546 2.7016 11.8958 2.7016ZM7.78798 5.40983H6.19615V7.29611L6.4311 7.16559C6.48111 7.13796 6.5415 7.13796 6.59057 7.16559L6.99159 7.38756L7.39262 7.16559C7.44263 7.13796 7.50208 7.13796 7.55114 7.16559L7.78798 7.29611V5.40983ZM11.472 3.52746L12.0316 3.52842L12.0269 5.45661L13.2167 6.91418L12.777 7.25524L11.4673 5.6519L11.472 3.52746ZM8.78253 4.36571H7.83516L7.06142 4.7544H8.32394L8.74762 4.49528C8.76083 4.45336 8.76838 4.40858 8.78253 4.36571ZM7.0935 4.36571H5.05535L4.07496 4.7544H6.3207L7.0935 4.36571Z\",\n fill: \"#666666\"\n});\n\nvar SvgConsignmentsIcon = function SvgConsignmentsIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 17,\n height: 16,\n viewBox: \"0 0 17 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgConsignmentsIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/consignments-icon.b998cf06.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.045 1.05566V15.1132M1.05566 1.05566L7.12332 3.386L14.045 1.05566L20.0557 3.386V15.3663V17.3701L14.045 15.1132L7.12332 17.6465L1.05566 15.1132V1.05566ZM7.12332 3.386V17.6465V3.386Z\",\n stroke: \"#4D4D4D\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgMapViewIcon = function SvgMapViewIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 19,\n viewBox: \"0 0 22 19\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgMapViewIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/map-view-icon.56cfa7c3.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M4.001 17.994V19H0V17.994H4.001ZM19.999 17.992V18.99H6V17.992H19.999ZM4.001 11.99V12.996H0V11.99H4.001ZM19.999 11.988V12.986H6V11.988H19.999ZM4.001 6.002V7.008H0V6.002H4.001ZM19.999 6V6.998H6V6H19.999ZM4.001 0.00399995V1.01H0V0.00399995H4.001ZM19.999 0V0.998H6V0H19.999Z\",\n fill: \"#4D4D4D\"\n});\n\nvar SvgListViewIcon = function SvgListViewIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 19,\n viewBox: \"0 0 20 19\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgListViewIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/list-view-icon.ed203583.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 16,\n cy: 16,\n r: 16,\n fill: \"white\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 16,\n cy: 16,\n r: 16,\n fill: \"#0E5AA7\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 15.9998,\n cy: 16.0003,\n rx: 13.6585,\n ry: 13.6585,\n fill: \"white\"\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M15.191 10.0746C13.5188 11.1138 12.7692 13.0244 12.6935 14.8735C12.6886 14.9788 12.6873 15.0833 12.6873 15.1879V15.1876C12.6873 15.1977 12.6855 15.2511 12.6855 15.2685V21.8364H14.8611V15.2685C14.8611 14.8539 15.0489 14.4836 15.3437 14.2381L16.2021 15.2685L17.0591 14.2383C17.354 14.4836 17.5423 14.8539 17.5423 15.2685V21.8364H19.7174V15.2685C19.7174 13.3267 18.1431 11.7525 16.2021 11.7525C15.7424 11.7525 15.3037 11.8403 14.9023 12.001V12.0006C15.3479 11.4774 16.0209 11.2181 16.7567 11.2022H16.7584C16.9881 11.1967 17.224 11.2159 17.4606 11.2578C19.3857 11.5732 20.8522 13.1866 20.8597 15.1325C20.8635 15.2067 20.8649 15.2818 20.8649 15.3581V21.8364H23.0413V15.3034C23.0413 12.4738 21.3408 10.2051 18.4425 9.52964C18.3368 9.50563 18.1691 9.47189 18.0191 9.45174C17.8048 9.42327 17.585 9.39941 17.358 9.39941C16.8871 9.39941 16.545 9.48289 16.1509 9.61415C15.87 9.7084 15.5917 9.82465 15.191 10.0746Z\",\n fill: \"#0E5AA7\"\n});\n\nvar _ref6 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M15.7845 9.36548C12.0053 9.36548 9.36572 11.8893 9.36572 15.2354V21.8533H11.5585C11.5585 21.8533 11.5567 18.2124 11.5567 15.2306C11.5567 12.1181 13.9393 9.8982 16.3304 9.41637C16.4277 9.39612 16.5418 9.36548 16.4282 9.36548H15.7845Z\",\n fill: \"#EE2527\"\n});\n\nvar SvgTimelineAreaIcon = function SvgTimelineAreaIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5, _ref6);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgTimelineAreaIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/timeline-area-icon.ac5aab88.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 0C4.47254 0 0 4.47293 0 10C0 15.5275 4.47293 20 10 20C15.5275 20 20 15.5271 20 10C20 4.47254 15.527 0 10 0ZM10 18.4375C5.33621 18.4375 1.5625 14.6635 1.5625 10C1.5625 5.33621 5.33652 1.5625 10 1.5625C14.6638 1.5625 18.4375 5.33652 18.4375 10C18.4375 14.6638 14.6634 18.4375 10 18.4375Z\",\n fill: \"#666666\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 8.37109C9.56852 8.37109 9.21875 8.72086 9.21875 9.15234V14.1833C9.21875 14.6148 9.56852 14.9646 10 14.9646C10.4315 14.9646 10.7812 14.6148 10.7812 14.1833V9.15234C10.7812 8.72086 10.4315 8.37109 10 8.37109Z\",\n fill: \"#666666\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 7.41602C10.5825 7.41602 11.0547 6.94382 11.0547 6.36133C11.0547 5.77884 10.5825 5.30664 10 5.30664C9.41751 5.30664 8.94531 5.77884 8.94531 6.36133C8.94531 6.94382 9.41751 7.41602 10 7.41602Z\",\n fill: \"#666666\"\n});\n\nvar SvgInfoWarningIcon = function SvgInfoWarningIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 20,\n viewBox: \"0 0 20 20\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgInfoWarningIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/info-warning-icon.81f91ad9.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.39977 11.7424C2.39977 11.8712 2.2953 11.9757 2.16649 11.9757C2.03757 11.9757 1.93311 11.8712 1.93311 11.7424C1.93311 11.6135 2.03757 11.509 2.16649 11.509C2.2953 11.509 2.39977 11.6135 2.39977 11.7424Z\",\n fill: \"#666666\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.39977 12.6758C2.39977 12.8046 2.2953 12.9091 2.16649 12.9091C2.03757 12.9091 1.93311 12.8046 1.93311 12.6758C1.93311 12.547 2.03757 12.4424 2.16649 12.4424C2.2953 12.4424 2.39977 12.547 2.39977 12.6758Z\",\n fill: \"#666666\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.0668 11.7424C14.0668 11.8712 13.9623 11.9757 13.8334 11.9757C13.7046 11.9757 13.6001 11.8712 13.6001 11.7424C13.6001 11.6135 13.7046 11.509 13.8334 11.509C13.9623 11.509 14.0668 11.6135 14.0668 11.7424Z\",\n fill: \"#666666\"\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.0668 12.6758C14.0668 12.8046 13.9623 12.9091 13.8334 12.9091C13.7046 12.9091 13.6001 12.8046 13.6001 12.6758C13.6001 12.547 13.7046 12.4424 13.8334 12.4424C13.9623 12.4424 14.0668 12.547 14.0668 12.6758Z\",\n fill: \"#666666\"\n});\n\nvar _ref6 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.3 2.17578H1.70004C1.3136 2.17621 1.00043 2.48938 1 2.87582V4.74246C1.00085 5.03812 1.18777 5.30119 1.46666 5.39946V6.41876C1.18777 6.51703 1.00085 6.78011 1 7.07576V8.9424C1.00085 9.23816 1.18777 9.50124 1.46666 9.5994V10.6188C1.18777 10.717 1.00085 10.9801 1 11.2758V13.1424C1.00043 13.5289 1.3136 13.8421 1.70004 13.8425H14.3C14.6864 13.8421 14.9996 13.5289 15 13.1424V11.2758C14.9991 10.9801 14.8122 10.717 14.5333 10.6188V9.5994C14.8122 9.50124 14.9991 9.23816 15 8.9424V7.07576C14.9991 6.78011 14.8122 6.51703 14.5333 6.41876V5.39946C14.8122 5.30119 14.9991 5.03812 15 4.74246V2.87582C14.9996 2.48938 14.6864 2.17621 14.3 2.17578ZM3.79996 5.4424V6.37582H1.93332V5.4424H3.79996ZM5.54996 5.4424C6.00081 5.44186 6.3661 5.07657 6.36664 4.62582C6.36685 4.4326 6.52344 4.27602 6.71666 4.2758H9.28334C9.47656 4.27602 9.63315 4.4326 9.63336 4.62582C9.6339 5.07657 9.99919 5.44186 10.45 5.4424H11.7334V6.37582H4.26662V5.4424H5.54996ZM14.0667 5.4424V6.37582H12.2V5.4424H14.0667ZM3.79996 9.64244V10.5758H1.93332V9.64244H3.79996ZM11.7334 9.64244V10.5758H4.26662V9.64244H11.7334ZM14.0667 9.64244V10.5758H12.2V9.64244H14.0667ZM14.5333 13.1424C14.5332 13.2713 14.4288 13.3757 14.3 13.3758H1.70004C1.57123 13.3757 1.46677 13.2713 1.46666 13.1424V11.2758C1.46677 11.147 1.57123 11.0425 1.70004 11.0424H14.3C14.4288 11.0425 14.5332 11.147 14.5333 11.2758V13.1424ZM14.5333 8.9424C14.5332 9.07132 14.4288 9.17567 14.3 9.17578H1.70004C1.57123 9.17567 1.46677 9.07132 1.46666 8.9424V7.07576C1.46677 6.94695 1.57123 6.84259 1.70004 6.84248H14.3C14.4288 6.84259 14.5332 6.94695 14.5333 7.07576V8.9424ZM14.5333 4.74246C14.5332 4.87128 14.4288 4.97563 14.3 4.97574H10.45C10.2568 4.97552 10.1002 4.81894 10.1 4.62582C10.0995 4.17497 9.73419 3.80968 9.28334 3.80914H6.71666C6.26581 3.80968 5.90051 4.17497 5.89998 4.62582C5.89977 4.81894 5.74318 4.97552 5.54996 4.97574H1.70004C1.57123 4.97563 1.46677 4.87128 1.46666 4.74246V2.87582C1.46677 2.74701 1.57123 2.64255 1.70004 2.64244H14.3C14.4288 2.64255 14.5332 2.74701 14.5333 2.87582V4.74246Z\",\n fill: \"#666666\"\n});\n\nvar _ref7 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.39977 3.34251C2.39977 3.47133 2.2953 3.57579 2.16649 3.57579C2.03757 3.57579 1.93311 3.47133 1.93311 3.34251C1.93311 3.21359 2.03757 3.10913 2.16649 3.10913C2.2953 3.10913 2.39977 3.21359 2.39977 3.34251Z\",\n fill: \"#666666\"\n});\n\nvar _ref8 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.39977 4.27586C2.39977 4.40468 2.2953 4.50914 2.16649 4.50914C2.03757 4.50914 1.93311 4.40468 1.93311 4.27586C1.93311 4.14694 2.03757 4.04248 2.16649 4.04248C2.2953 4.04248 2.39977 4.14694 2.39977 4.27586Z\",\n fill: \"#666666\"\n});\n\nvar _ref9 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.0668 3.34251C14.0668 3.47133 13.9623 3.57579 13.8334 3.57579C13.7046 3.57579 13.6001 3.47133 13.6001 3.34251C13.6001 3.21359 13.7046 3.10913 13.8334 3.10913C13.9623 3.10913 14.0668 3.21359 14.0668 3.34251Z\",\n fill: \"#666666\"\n});\n\nvar _ref10 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.0668 4.27586C14.0668 4.40468 13.9623 4.50914 13.8334 4.50914C13.7046 4.50914 13.6001 4.40468 13.6001 4.27586C13.6001 4.14694 13.7046 4.04248 13.8334 4.04248C13.9623 4.04248 14.0668 4.14694 14.0668 4.27586Z\",\n fill: \"#666666\"\n});\n\nvar _ref11 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.33336 11.509H3.10008C2.97116 11.509 2.8667 11.6135 2.8667 11.7424C2.8667 11.8712 2.97116 11.9757 3.10008 11.9757H3.33336C3.46228 11.9757 3.56674 11.8712 3.56674 11.7424C3.56674 11.6135 3.46228 11.509 3.33336 11.509Z\",\n fill: \"#666666\"\n});\n\nvar _ref12 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.3665 11.509H4.26648C4.13766 11.509 4.0332 11.6135 4.0332 11.7424C4.0332 11.8712 4.13766 11.9757 4.26648 11.9757H6.3665C6.49542 11.9757 6.59988 11.8712 6.59988 11.7424C6.59988 11.6135 6.49542 11.509 6.3665 11.509Z\",\n fill: \"#666666\"\n});\n\nvar _ref13 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.86656 3.10913H9.63329C9.50436 3.10913 9.3999 3.21359 9.3999 3.34251C9.3999 3.47133 9.50436 3.57579 9.63329 3.57579H9.86656C9.99548 3.57579 10.0999 3.47133 10.0999 3.34251C10.0999 3.21359 9.99548 3.10913 9.86656 3.10913Z\",\n fill: \"#666666\"\n});\n\nvar _ref14 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.9002 3.10913H10.8002C10.6714 3.10913 10.5669 3.21359 10.5669 3.34251C10.5669 3.47133 10.6714 3.57579 10.8002 3.57579H12.9002C13.0291 3.57579 13.1336 3.47133 13.1336 3.34251C13.1336 3.21359 13.0291 3.10913 12.9002 3.10913Z\",\n fill: \"#666666\"\n});\n\nvar SvgCratesIcon = function SvgCratesIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgCratesIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/crates-icon.0f1979bc.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.375 4.5H9V3C9 1.34546 7.65454 0 6 0C4.34546 0 3 1.34546 3 3V4.5H2.625C2.005 4.5 1.5 5.00446 1.5 5.625V10.875C1.5 11.4955 2.005 12 2.625 12H9.375C9.995 12 10.5 11.4955 10.5 10.875V5.625C10.5 5.00446 9.995 4.5 9.375 4.5ZM4.00003 3C4.00003 1.89697 4.89697 1.00003 6 1.00003C7.10303 1.00003 7.99997 1.89697 7.99997 3V4.5H4.00003V3Z\",\n fill: \"#252525\"\n});\n\nvar SvgLockIcon = function SvgLockIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12,\n height: 12,\n viewBox: \"0 0 12 12\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgLockIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/lock-icon.46ab148a.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M10.0002 9.65771V11.0064C10.0004 11.1856 10.1456 11.3307 10.3247 11.3308H13.9918V9.33341H10.3247C10.1456 9.33346 10.0004 9.47858 10.0002 9.65771ZM10.9998 9.99957C11.1824 10.001 11.3295 10.1499 11.3286 10.3326C11.3277 10.5152 11.1791 10.6627 10.9965 10.6622C10.8138 10.6618 10.666 10.5136 10.6659 10.331C10.6666 10.1472 10.8161 9.99888 10.9998 9.99955L10.9998 9.99957ZM14.0077 5.39092V4.26559C14.0058 3.75305 13.5893 3.33878 13.0768 3.33948H11.476L9.52552 0.959105C9.38612 0.788545 9.18229 0.683354 8.9625 0.66855C8.74272 0.653746 8.52663 0.730653 8.36561 0.880979L7.72112 1.48841L7.19597 1.14929C7.05247 1.03313 6.86784 0.980439 6.68464 1.00338C6.50113 1.02791 6.33601 1.12745 6.22864 1.27828L4.77206 3.35234L2.46464 3.3512C1.78741 3.41069 1.28447 4.00455 1.3373 4.68233C1.3373 4.703 1.3417 4.72221 1.34252 4.74264V15.3265H2.00865V5.88993C2.1492 5.96507 2.30595 6.0048 2.46532 6.00566H4.00971V6.00224L13.6701 5.99524C13.8531 5.99415 14.0026 6.14118 14.0045 6.32418V8.67061H10.3303C9.78323 8.67137 9.34002 9.11478 9.33951 9.66183V11.0105C9.34002 11.5576 9.78323 12.001 10.3303 12.0018H14.0045V14.3379C14.0025 14.5208 13.8531 14.6678 13.6701 14.6667H3.35118V15.3336H13.6701C14.2211 15.3343 14.6687 14.8888 14.6706 14.3379V6.32419C14.6688 5.90435 14.4035 5.53089 14.0077 5.39092ZM6.80297 1.68721L7.22171 1.9591L5.34728 3.72611L6.80297 1.68721ZM3.37908 5.33589L2.92583 5.33622V5.33882H2.46526C2.21937 5.33882 2.00339 5.03202 2.00339 4.66865C2.00339 4.31571 2.21481 4.01799 2.46461 4.01799L4.30384 4.01897L3.37908 5.33589ZM4.61262 5.3349L8.82038 1.3681C8.84739 1.34433 8.88269 1.33216 8.91861 1.33425C8.95454 1.33642 8.98787 1.35369 9.01037 1.38178L12.2446 5.32936L4.61262 5.3349ZM13.3416 5.32858L13.1061 5.32874L12.0225 4.00631H13.0769C13.2214 4.00518 13.3397 4.12104 13.3416 4.26559V5.32858Z\",\n fill: \"#666666\"\n});\n\nvar SvgWalletIcon = function SvgWalletIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgWalletIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/wallet-icon.efc4568e.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M5.55049 1.98807H10.4712C10.9824 1.98956 11.3959 2.40468 11.3954 2.91592V3.32467H4.62621V2.91592C4.62572 2.40467 5.03924 1.98956 5.55049 1.98807ZM4.68925 13.0712V12.0063L11.3428 12.0075V13.999H5.61353C5.10229 13.9975 4.68877 13.5824 4.68925 13.0712ZM7.34199 13.331H8.67973V12.6664H7.34199V13.331ZM10.4604 1.33325H5.53976C4.67926 1.34497 3.99056 2.0509 4.0001 2.91143V13.0884C3.99056 13.9489 4.67926 14.6549 5.53976 14.6666H10.0157V13.9954H11.3444V14.6648H12.0001V2.91143C12.0096 2.0509 11.3209 1.34497 10.4604 1.33325ZM11.3318 11.3447H4.65979V4.00502H11.3318V11.3447Z\",\n fill: \"#666666\"\n});\n\nvar SvgMobileIcon = function SvgMobileIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgMobileIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/mobile-icon.6f5c365b.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 0C3.57803 0 0 3.57834 0 8C0 12.422 3.57834 16 8 16C12.422 16 16 12.4217 16 8C16 3.57803 12.4216 0 8 0ZM8 14.75C4.26897 14.75 1.25 11.7308 1.25 8C1.25 4.26897 4.26922 1.25 8 1.25C11.731 1.25 14.75 4.26922 14.75 8C14.75 11.731 11.7308 14.75 8 14.75Z\",\n fill: \"#F34041\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 6.69727C7.65481 6.69727 7.375 6.97708 7.375 7.32227V11.347C7.375 11.6922 7.65481 11.972 8 11.972C8.34519 11.972 8.625 11.6922 8.625 11.347V7.32227C8.625 6.97708 8.34519 6.69727 8 6.69727Z\",\n fill: \"#F34041\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 5.93164C8.46599 5.93164 8.84375 5.55388 8.84375 5.08789C8.84375 4.6219 8.46599 4.24414 8 4.24414C7.53401 4.24414 7.15625 4.6219 7.15625 5.08789C7.15625 5.55388 7.53401 5.93164 8 5.93164Z\",\n fill: \"#F34041\"\n});\n\nvar SvgInfoErrorIcon = function SvgInfoErrorIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgInfoErrorIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/info-error-icon.26347234.svg\";\nexport { ForwardRef as ReactComponent };","export const CreateRouteConstant = {\n ON_EXIT_SCREEN_MESSAGE: \"All changes will be discarded. Are you sure you want to leave this page?\",\n};\n","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Prompt, useHistory } from \"react-router\";\n\nimport moment from \"moment\";\nimport _ from \"lodash\";\n\nimport { DragDropContext, Draggable, Droppable } from \"react-beautiful-dnd\";\nimport {\n Accordion,\n AccordionDetails,\n AccordionSummary,\n Button,\n Checkbox,\n Divider,\n Grid,\n IconButton,\n InputAdornment,\n Step,\n StepLabel,\n Stepper,\n SvgIcon,\n Tab,\n Tabs,\n Typography,\n} from \"@material-ui/core\";\nimport { TabContext, TabPanel, Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator } from \"@material-ui/lab\";\n\nimport { AppState } from \"../config/redux/reducers\";\n\nimport { StepperTimelineConnector, useStyles } from \"./CreateRoute.styles\";\nimport { useStyles as useStyleNew } from \"./AllRoutes/AllRoutes.styles\";\n\nimport { ReactComponent as searchIcon } from \"./../assets/icons/search-icon-small.svg\";\nimport { ReactComponent as refreshIcon } from \"./../assets/icons/refresh-icon.svg\";\nimport { ReactComponent as consignmentsIcon } from \"./../assets/icons/consignments-icon.svg\";\nimport { ReactComponent as activeTimelineDot } from \"./../assets/icons/active-timeline-dot.svg\";\nimport { ReactComponent as mapViewIcon } from \"./../assets/icons/map-view-icon.svg\";\nimport { ReactComponent as listViewIcon } from \"./../assets/icons/list-view-icon.svg\";\nimport { ReactComponent as areaTimelineIcon } from \"./../assets/icons/timeline-area-icon.svg\";\nimport { ReactComponent as infoWarningIcon } from \"./../assets/icons/info-warning-icon.svg\";\nimport { ReactComponent as cratesIcon } from \"./../assets/icons/crates-icon.svg\";\nimport { ReactComponent as lockIcon } from \"./../assets/icons/lock-icon.svg\";\nimport { ReactComponent as walletIcon } from \"./../assets/icons/wallet-icon.svg\";\nimport { ReactComponent as mobileIcon } from \"./../assets/icons/mobile-icon.svg\";\nimport { ReactComponent as locationIcon } from \"./../assets/icons/location-icon.svg\";\nimport { ReactComponent as downArrowIcon } from \"./../assets/icons/down-arrow-icon.svg\";\nimport { ReactComponent as infoErrorIcon } from \"./../assets/icons/info-error-icon.svg\";\nimport { ReactComponent as timeSlotIcon } from \"./../assets/icons/time-slot-icon.svg\";\nimport { ReactComponent as editIcon } from \"./../assets/icons/edit-icon.svg\";\nimport transferPointIcon from \"./../assets/icons/transfer-point-icon.svg\";\nimport mapHubIcon from \"./../assets/icons/timeline-area-icon.svg\";\nimport mapItemIcon from \"./../assets/icons/map-item-icon.svg\";\nimport alertIcon from \"./../assets/icons/Alert.svg\";\nimport calendarIcon from \"./../assets/icons/calendar-icon.svg\";\nimport verifiedIcon from \"./../assets/icons/verified-icon.svg\";\nimport unverifiedIcon from \"./../assets/icons/unverified-icon.svg\";\nimport pendingIcon from \"./../assets/icons/pending-icon.svg\";\nimport TrcukFilledIcon from \"./../assets/icons/TrcukFilledIcon.svg\";\n\nimport AppConstants from \"../constants/\";\nimport Loader from \"../common/Loader\";\nimport DateRangePickerComponent from \"../common/DateRangeComponent\";\nimport CustomSnackbar from \"../common/CustomSnackbar\";\nimport TextBox from \"../common/TextBox\";\nimport CustomDialog from \"../common/Dialog\";\nimport ConsignmentDetails from \"./ConsignmentDetails\";\nimport MapContainer from \"common/GoogleMapContainer\";\nimport CustomTooltip from \"common/Tooltip\";\nimport CustomPlannedRouteView from \"./AllRoutes/common/CustomPlannedRouteView\";\n\nimport SelectBox, { SelectItemProps } from \"../common/SelectBox\";\nimport { userLogout } from \"../Login/redux/loginSlice\";\nimport { API_RESPONSE_STATUS } from \"../constants/CommonConstants\";\nimport { COLORS } from \"config/theme/baseTheme\";\nimport { ADDRESS_STATUS } from \"../constants/CommonConstants\";\nimport { mapOptionStyles, ROUTE_TYPE, ALL_ROUTES_TEXT_CONTANT, ALL_ROUTE_INITIAL_STATE, ALL_ROUTE_INITIAL_STATE_INTERFACE } from \"./AllRoutes/utils/AllRouteConstant\";\nimport { CreateRouteConstant } from \"./CreateRoute/CreateRouteConstant\";\nimport {\n calculateTransitTime,\n createDraftRoutePayload,\n createGetAllDropdownsPayload,\n createGetAllPlannedRoutesPayload,\n createRouteCreationPayload,\n createUpdateOrderStatusPayload,\n getAllAreasAndSlots,\n getConsignmentData,\n getTotalCrates,\n transformRouteConsignments,\n getAddressInfo,\n getRouteStatusField,\n getConsignmentStatusField,\n checkTerminalStatus,\n createPayloadToReleaseAssignee,\n createPayloadToMarkAddressUnverified,\n isRouteStatusOutForDelivery,\n transformedDataViewRoute,\n} from \"../mocks/routePlanning/response.transforms\";\nimport {\n createDraftRoute,\n createAndEditRoute,\n fetchAllDrivers,\n fetchAllHelpers,\n fetchAllVehicles,\n fetchAllPlannedRoutes,\n fetchAllPlannedRoutesNew,\n updateConsignmentStatus,\n discardRouteChanges,\n resetPlanningError,\n updateAllConsignmentsState,\n loadAllSlots,\n clearCurrentSlot,\n fetchRouteConsignments,\n clearUpdatedRoute,\n releaseAssignee,\n getAddressStatus,\n resetAddressupdateStatus,\n getDriverMarkerApi,\n fetchSubRouteById,\n resetViewRouteState,\n fetchOrderById,\n resetRouteConsignmentsState,\n resetSubrouteState,\n} from \"./redux/planningSlice\";\nimport {\n getMatchingValues,\n getSlotUIValue,\n getUniqueValues,\n highlightTextWithClass,\n isEqualArrays,\n convertTime,\n getDifferenceValues,\n isUndefined,\n isNull,\n isNonEmptyObject,\n isObject,\n countObjectProperties,\n loadDashIsEmpty,\n} from \"../utils/helpers.utils\";\nimport {\n designAllRoutesStateObjectUtils,\n handleRouteAccordianClickedUtils,\n handleRoutAreaSubareaAccordianToggleUtils,\n handleRoutAreaAccordianToggleUtils,\n handleRouteSlotAccordianToggleUtils,\n handleSubRouteSlotAccordianToggleUtils,\n handleSubrouteOrderAccordianToggleUtils,\n handleOrderAccordianToggleUtils,\n} from \"./AllRoutes/utils/AllRouteUtils\";\nimport RenderRescheduleOrders from \"../common/RescheduleOrders/RenderRescheduleOrders\";\n\ninterface CreateRouteProps {\n location?: any;\n match?: any;\n editMode?: boolean;\n viewMode?: boolean;\n}\n\nconst CreateRoute = (props: CreateRouteProps) => {\n const { editMode, viewMode, match, location } = props;\n\n const classes2 = useStyleNew();\n\n const classes = useStyles();\n const dispatch = useDispatch();\n const history = useHistory();\n\n const { mapRouteDirections, countryCode, hubData } = useSelector((state: AppState) => state.common);\n const { isLastMileViewer, isOnlyStdLastMileViewer } = useSelector((state: AppState) => state.userLogin);\n const {\n loading,\n draftRoute,\n areawiseConsignments,\n slotwiseConsignments,\n allConsignments,\n routeConsignments,\n driversList,\n helpersList,\n vehiclesList,\n vehiclesData,\n routeCreateSuccess,\n updatedRoute,\n routeDiscardSuccess,\n currentSlot,\n slotsList,\n zoneList,\n consignmentStatusList,\n error,\n errorCode,\n isReleaseAssignee,\n releaseMessage,\n consignmentDataAfterAddressUpdate,\n isAddressUpdated,\n subRoutes,\n order,\n plannedRoutesNew,\n fetchStatus,\n } = useSelector((state: AppState) => state.routePlanning);\n\n const shouldBlockNavigationRef = useRef\n {loading && CreateRouteConstant.ON_EXIT_SCREEN_MESSAGE} />\n \n \n \n \n \n {editMode ? `Edit ${draftRoute?.route ? draftRoute?.route?.routeId || \"Route\" : \"\"}` : viewMode ? location?.state?.route?.routeId : \"Create Route\"}\n \n {viewMode && (\n \n \n {location.state ? location.state.route.status : \"\"} \n {location.state.parentRoute === ROUTE_TYPE.PARENT_ROUTE && {ALL_ROUTES_TEXT_CONTANT.PARENT_ROUTE} }\n {!(isLastMileViewer || isOnlyStdLastMileViewer) && location.state.route.displayRouteStatus !== AppConstants.PLANNING_CONSTANTS.ROUTES_DATA.UNEDITABLE_CHIP && (\n \n \n )}\n \n \n {viewMode && location.state.route.displayRouteStatus === AppConstants.PLANNING_CONSTANTS.ROUTES_DATA.UNEDITABLE_CHIP && (\n \n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n {viewMode ? \"Consignments\" : tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? `Consignments(${allConsignments.length})` : \"Routes\"}\n \n {!viewMode && tabValue !== AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? (\n \n \n {!viewMode && (\n \n {tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED && (\n \n \n \n \n }\n >\n )}\n \n )}\n \n \n {!viewMode && (\n \n \n \n Status \n \n \n \n Slot \n \n \n \n Zone \n \n \n {!editMode && (\n \n Date \n \n )}\n \n \n )}\n \n \n \n {viewMode ? (\n <>\n {getViewModeConsignments()} \n \n ) : (\n /** When Edit Route is clicked */\n \n \n \n \n \n \n {areawiseConsignments?.length > 0 ? getAreawiseConsignments() : {getViewModeConsignments()} }\n \n \n \n \n {getPllanedAreawiseConsignments()}\n \n \n \n \n \n \n Hub:\n {location.state.hubName || \"\"}\n \n \n \n {tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED && areawiseConsignments?.length > 0 && (\n \n \n \n All \n \n \n \n \n \n )}\n \n )}\n \n \n \n \n \n {viewMode ? (\n \n \n {location?.state?.route && (\n \n {location.state.route && location.state.route.routeId} \n {/* {createRouteState?.refreshInterval > 0 && (\n {`Driver location refresh in ${createRouteState.minutes || \"\"} Min : ${createRouteState.seconds || \"\"} Sec`} \n )} */}\n \n )}\n {location?.state?.route ? (\n \n \n \n \n \n \n \n Driver \n \n \n {location.state.route && location.state.route.assignee ? location.state.route.assignee.name : \"Not Assigned\"} \n \n \n \n \n \n \n Helper \n \n \n {location.state.route && location.state.route.helper ? location.state.route.helper.name : \"Not Assigned\"} \n \n \n \n \n \n \n Vehicle \n \n \n {location.state.route && location.state.route.assignedVehicle ? location.state.route.assignedVehicle.name : \"Not Assigned\"} \n \n \n \n \n \n \n Hub \n \n \n {location.state.route && location.state.route.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n \n \n \n Consignments \n \n \n {location.state.route && `${location.state.route.totalConsignment}`.padStart(2, \"0\")} \n \n \n \n \n \n \n Crates \n \n \n {location.state.route && `${location.state.route.totalCrates}`.padStart(2, \"0\")} \n \n \n \n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n {`${ALL_ROUTES_TEXT_CONTANT.ACTUAL_DISTANCE}`} \n \n \n {location?.state?.route?.actualTransitDistance?.formattedDistance || \"\"} \n \n \n \n \n \n \n \n ) : (\n \n Route Details will appear here \n \n )}\n \n \n ) : tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? (\n \n \n \n \n \n {draftRoute.route && draftRoute.route.routeId} \n \n {getAllSelectedConsignments().length || draftRoute?.route ? (\n \n \n \n \n \n ) : null}\n \n \n {getAllSelectedConsignments().length || draftRoute?.route?.id ? (\n \n \n \n \n \n \n \n Delivery Area \n \n \n {getAllSelectedConsignments().length ? (\n \n {getSelectedAreas()} \n \n ) : (\n \n {getDraftSelectedAreas()} \n \n )}\n \n \n \n \n \n \n Consignments \n \n \n \n {getAllSelectedConsignments().length ? (\n {`${getAllSelectedConsignments().length}`.padStart(2, \"0\")} \n ) : (\n {`${draftRoute?.route?.consignmentsIds?.length}`.padStart(2, \"0\")} \n )}\n {calculateCapacityBreach(\"consignments\") && (\n \n \n )}\n \n \n \n \n \n \n \n Crates \n \n \n \n {getAllSelectedConsignments().length ? (\n {`${getTotalCrates(getAllSelectedConsignments())}`.padStart(2, \"0\")} \n ) : (\n {`${draftRoute?.route?.totalCrates}`.padStart(2, \"0\")} \n )}\n {calculateCapacityBreach(\"crates\") && (\n \n \n )}\n \n \n \n \n \n \n \n Delivery Slot \n \n \n {getAllSelectedConsignments().length ? (\n \n {getSelectedDeliverySlots()} \n \n ) : (\n \n {getDraftSelectedDeliverySlots()} \n \n )}\n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n {`${ALL_ROUTES_TEXT_CONTANT.ACTUAL_DISTANCE}`} \n \n \n {`${draftRoute?.route?.actualTransitDistance?.formattedDistance || \"\"}`} \n \n \n \n \n \n \n \n ) : (\n \n Selected Consignments will appear here \n \n )}\n {getAllSelectedConsignments().length > 0 && draftRoute?.route?.routeType !== ROUTE_TYPE.PARENT_ROUTE && draftRoute?.route?.routeType !== ROUTE_TYPE.SUB_ROUTE && (\n <>\n \n \n \n \n \n You can also drag and reorder the consigments to change their sequence. \n \n \n \n \n \n \n \n {(provided) => (\n \n \n {draftRoute.route && draftRoute.route.hubName}\n \n \n {getStepperTimelineItems()}\n {provided.placeholder}\n \n )}\n \n \n \n \n \n )}\n \n \n ) : (\n \n \n {selectedRoute?.code && selectedRoute?.value && (\n \n {selectedRoute && selectedRoute.value} \n \n )}\n {selectedRoute.code ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Hub \n \n \n {selectedRoute.data && selectedRoute.data.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n \n \n \n Consignments \n \n \n {selectedRoute.data && `${selectedRoute.data.totalConsignment}`.padStart(2, \"0\")} \n \n \n \n \n \n \n Crates \n \n \n {selectedRoute.data && `${selectedRoute.data.totalCrates}`.padStart(2, \"0\")} \n \n \n \n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n {`${ALL_ROUTES_TEXT_CONTANT.ACTUAL_DISTANCE}`} \n \n \n {selectedRoute?.data?.actualTransitDistance?.formattedDistance || \"\"} \n \n \n \n \n \n \n \n ) : (\n \n Selected Route Details will appear here \n \n )}\n \n \n )}\n \n {tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.PLANNED && !selectedRoute.code ? null : isListView ? (\n \n \n \n \n \n \n \n \n {tabValue !== AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.PLANNED && (\n {viewMode ? location.state.route && location.state.route.hubName : draftRoute.route && draftRoute.route.hubName} \n )}\n {tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.PLANNED && {selectedRoute?.value} }\n \n \n {isNonEmptyObject(getDockAddressObject()) && showDockAddressTimeLine()}\n {editMode && subRoutes?.length > 0 ? (\n <>\n {routeConsignments?.length > 0 && getCustomSubRouteTimelineItems()}\n {getListViewSubRouteTimelineItems()}\n \n ) : getAllSelectedConsignments().length ? (\n <>\n {getListViewTimelineItems()}\n {getListViewSubRouteTimelineItems()}\n \n ) : subRoutes?.length > 0 ? (\n getListViewSubRouteTimelineItems()\n ) : (\n routeConsignments?.length > 0 && getCustomSubRouteTimelineItems()\n )}\n \n \n ) : (\n \n )}\n \n toggleListView(\"map\")} item>\n \n Map \n \n \n toggleListView(\"list\")} item>\n \n List \n \n \n \n \n {!viewMode ? (\n \n \n {!isListView && (\n <>\n \n \n \n )}\n {tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? (\n editMode ? (\n <>\n \n \n \n ) : (\n \n )\n ) : (\n \n )}\n \n \n ) : null}\n \n \n \n \n \n {openConsignmentDetailsPopup && (\n \n )}\n {openDiscardConfirmDialog && (\n \n )}\n {openDateChangeConfirmDialog && (\n \n )}\n {openUpdateConfirmDialog && (\n \n )}\n {openCapacityBreachConfirmDialog && (\n \n )}\n {openReleaseDialog && (\n \n )}\n {openAddressPopup && (\n \n )}\n {openSnackbar && (\n
\n );\n};\n\nexport default CreateRoute;\n","import { createStyles, makeStyles, StepConnector, Theme, withStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const StepperTimelineConnector = withStyles({\n alternativeLabel: {\n top: 28,\n left: 'calc(-50% + 9px)',\n right: 'calc(50% + 9px)'\n },\n active: {\n '& $line': {\n borderColor: COLORS.SECONDARY_DARK,\n },\n },\n line: {\n borderColor: COLORS.SECONDARY_DARK,\n borderTopWidth: 4,\n borderRadius: 100,\n },\n})(StepConnector);\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n '& .padding-2': {\n padding: theme.spacing(2)\n }\n },\n statusHeaderContainer: {\n alignItems: \"center\",\n paddingLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"10px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 8,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.CREAM_CAN': {\n backgroundColor: COLORS.CREAM_CAN\n },\n '&.VISTA_BLUE': {\n backgroundColor: COLORS.VISTA_BLUE\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.SEA_GREEN\n },\n '&.GOLDEN_BELL': {\n backgroundColor: COLORS.GOLDEN_BELL\n },\n '&.SCAMPI': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.BLUE': {\n backgroundColor: COLORS.PRIMARY_MAIN\n },\n '&.SEA_GREEN2': {\n backgroundColor: COLORS.SEA_GREEN2\n },\n '&.LUCKY': {\n backgroundColor: COLORS.LUCKY\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n },\n '&.JUNGLE_GREEN': {\n backgroundColor: COLORS.JUNGLE_GREEN\n },\n '&.BLACK': {\n backgroundColor: COLORS.BLACK\n },\n '&.TROPICAL_BLUE': {\n backgroundColor: COLORS.TROPICAL_BLUE,\n color: COLORS.ASTRAL\n },\n '&.CATSKILL_WHITE': {\n backgroundColor: COLORS.CATSKILL_WHITE,\n color: COLORS.ASTRAL\n },\n '&.BLUE_HAZE': {\n backgroundColor: COLORS.BLUE_HAZE,\n color: COLORS.SCAMPI\n },\n '&.BARLEY_WHITE': {\n backgroundColor: COLORS.BARLEY_WHITE,\n color: COLORS.OLD_GOLD\n },\n '&.DOUBLE_PEARL_LUSTA': {\n backgroundColor: COLORS.DOUBLE_PEARL_LUSTA,\n color: COLORS.PIMPKIN_SKIN\n },\n '&.JAGGED_ICE': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.BLUE_STONE\n },\n '&.TARA': {\n backgroundColor: COLORS.TARA,\n color: COLORS.OCEAN_GREEN\n },\n '&.JAGGED_ICE_PREPARED': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.JUNGLE_GREEN\n },\n '&.ALTO': {\n backgroundColor: COLORS.ALTO,\n color: COLORS.DUSTY_GRAY_LIGHT\n },\n }\n },\n container: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n height: \"100%\",\n '& .createRtItem': {\n width: '100%',\n '&.heading': {\n paddingBottom: theme.spacing(3),\n '& .headingContainer': {\n alignItems: \"center\"\n },\n '& .editIcon': {\n width: 22,\n height: 22,\n marginLeft: theme.spacing(1),\n cursor: \"pointer\"\n },\n '& .headingTitle': {\n fontSize: 24,\n color: COLORS.BLACK,\n fontWeight: 600\n }\n },\n '&.content': {\n height: \"calc(100vh - 176px)\"\n }\n }\n },\n createRtContentContainer: {\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n boxShadow: `0px 1px 4px ${COLORS.LIGHT_BLACK_SHADOW}`,\n borderRadius: theme.spacing(1),\n height: \"100%\",\n '&.left': {\n width: 500,\n minWidth: 500,\n marginRight: theme.spacing(3),\n '& .consignmentsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentItem': {\n '& .headerSectionContainer': {\n flexDirection: \"column\",\n padding: theme.spacing(2, 2, 1, 2),\n '&.viewMode': {\n borderBottom: `1px solid ${theme.palette.secondary.dark}`\n },\n '& .searchTextBox': {\n '& .MuiOutlinedInput-root': {\n width: 210,\n }\n },\n '& .MuiOutlinedInput-root': {\n width: 145,\n minWidth: 145,\n height: 24,\n borderRadius: theme.spacing(.5)\n },\n '& .MuiOutlinedInput-input': {\n fontSize: 10,\n padding: 0,\n paddingLeft: theme.spacing(.5)\n },\n '& .MuiSelect-iconOutlined': {\n right: 0\n },\n '& .MuiSelect-root': {\n '& .MuiChip-root': {\n fontSize: 10,\n height: 15\n }\n },\n '& .headerContainer': {\n alignItems: \"center\",\n paddingBottom: theme.spacing(1.5),\n '& .headerItem': {\n '&.heading': {\n flexGrow: 1,\n '& .refreshIcon': {\n width: 16,\n height: 16,\n cursor: \"pointer\",\n marginLeft: theme.spacing(0.5)\n },\n '& p': {\n fontSize: 16,\n fontWeight: 600\n }\n },\n '&.icons': {\n display: \"flex\",\n alignItems: \"center\",\n '& .MuiOutlinedInput-adornedEnd': {\n paddingRight: 0,\n '& .MuiSvgIcon-root': {\n padding: theme.spacing(.25)\n }\n },\n '& .MuiInputAdornment-positionEnd': {\n marginLeft: 0\n },\n '& .MuiIconButton-sizeSmall': {\n padding: 0,\n '&.MuiIconButton-edgeEnd': {\n marginRight: 0\n }\n },\n '& .MuiSvgIcon-root': {\n width: 19,\n height: 19\n },\n '& .icon': {\n padding: theme.spacing(0.5)\n }\n }\n }\n },\n '& .filtersContainer': {\n '& .filterItem': {\n paddingRight: theme.spacing(1),\n '&:last-child': {\n paddingRight: 0\n },\n '&.slot': {\n flexGrow: 1\n }\n }\n }\n },\n '&.content': {\n height: \"calc(100% - 80px)\",\n '& .contentContainer': {\n position: \"relative\",\n height: \"100%\"\n },\n '& .hubLabel': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(8.5),\n '&.isRoute': {\n right: theme.spacing(2)\n },\n '& .hubLabelContainer': {\n alignItems: \"center\",\n height: 21,\n '& .hubLabelText': {\n fontSize: 12,\n fontWeight: 600,\n maxWidth: 200,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n '& .label': {\n fontWeight: 500,\n paddingRight: theme.spacing(0.5)\n }\n }\n }\n },\n '& .toggleAll': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(2.25),\n cursor: \"pointer\",\n userSelect: \"none\",\n '& .toggleAllContainer': {\n alignItems: \"center\",\n '& .toggleItem': {\n paddingLeft: theme.spacing(0.5),\n '&.iconItem': {\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.expanded': {\n transform: \"rotate(180deg)\"\n }\n },\n '& .toggleText': {\n fontSize: 14,\n fontWeight: 600\n },\n '& .toggleIcon': {\n width: 21,\n height: 21,\n verticalAlign: \"bottom\"\n }\n }\n }\n },\n '& .slotContentContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '&.viewMode': {\n overflow: \"auto\",\n paddingBottom: theme.spacing(2),\n '& .slotItemContainer': {\n paddingLeft: theme.spacing(2)\n }\n },\n '& .slotItemContainer': {\n height: 80,\n alignItems: \"flex-start\",\n padding: theme.spacing(1, 2, 1, 6),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n flexWrap: \"nowrap\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n borderLeft: `3px solid ${theme.palette.primary.main}`\n },\n '&.drafted': {\n color: COLORS.GRAY_DARK,\n paddingLeft: theme.spacing(3.5)\n },\n '&.terminal': {\n color: COLORS.GRAY_DARK,\n borderColor: COLORS.GRAY_DARK\n },\n '& .slotContentItem': {\n '&.checkbox': {\n '& .checkboxContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .lockIcon': {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1)\n }\n },\n paddingRight: theme.spacing(1.5)\n },\n '&.consignmentDetails': {\n flexGrow: 1,\n height: \"100%\",\n '& .consignmentDetailsContainer': {\n justifyContent: \"space-between\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailsItem': {\n '& .consignmentHeader': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentHeaderItem': {\n '&.details': {\n flexGrow: 1,\n paddingTop: theme.spacing(0.5)\n },\n '& .headerDetailsContainer': {\n flexWrap: \"nowrap\",\n '& .itemContainer': {\n flexWrap: \"nowrap\"\n }\n }\n }\n },\n '& .headingContainer': {\n alignItems: \"center\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .heading': {\n fontSize: 12,\n fontWeight: 600,\n cursor: \"pointer\"\n },\n },\n '& .seqNoContainer': {\n backgroundColor: COLORS.ALERT_ORANGE,\n borderRadius: 2,\n '& .seqNo': {\n fontSize: 10,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n lineHeight: '16px',\n padding: theme.spacing(0, 1)\n }\n },\n '& .count': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n padding: theme.spacing(0, 0.75)\n },\n '& .icon': {\n width: 16,\n height: 16\n },\n '&.desc': {\n paddingTop: theme.spacing(1)\n },\n '& .descContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .location': {\n width: 356\n },\n '& .itemContainer': {\n alignItems: \"center\",\n paddingRight: theme.spacing(2.5),\n flexWrap: \"nowrap\",\n '& .locDesc': {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\"\n }\n }\n }\n }\n },\n }\n }\n }\n },\n '& .MuiTabs-root': {\n padding: theme.spacing(0, 2),\n minHeight: 42,\n borderBottom: `1px solid ${theme.palette.secondary.main}`\n },\n '& .tabPanel': {\n padding: 0,\n height: 'calc(100% - 42px)',\n overflow: \"auto\",\n '& .tabPanelContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .delSlotContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n },\n '& .highlightText': {\n backgroundColor: COLORS.SUCCESS_GREEN\n },\n '& .accordionRoot': {\n boxShadow: \"none\",\n margin: 0,\n '&::before': {\n opacity: 0\n }\n },\n '& .accordianSummary': {\n border: \"none\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '&.delArea': {\n minHeight: 46,\n height: 46,\n '& .areaHeaderContainer': {\n alignItems: \"center\",\n '& .areaHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT\n }\n }\n }\n }\n },\n '&.delSlot': {\n minHeight: 32,\n height: 32,\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n '& .slotHeaderContainer': {\n alignItems: \"center\",\n '& .slotHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 12,\n fontWeight: 500,\n paddingLeft: theme.spacing(1.5)\n }\n }\n }\n }\n }\n },\n '& .accordianDetails': {\n padding: 0,\n '&.routes': {\n '& .slotItemContainer': {\n height: 56\n }\n }\n },\n '&.planned': {\n paddingTop: theme.spacing(1.5),\n '& .heading': {\n paddingLeft: '0px !important'\n },\n '& .accordianDetails': {\n '& .slotItemContainer': {\n padding: '10px 8px 10px 16px !important',\n cursor: 'pointer'\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.right': {\n flexGrow: 1\n },\n '& .detailsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailItem': {\n '&.routeDetails': {\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n padding: theme.spacing(2),\n '&.viewMode': {\n '& .routeDetailsContainer .routeDetailsItem.basicDesc': {\n paddingBottom: 0\n }\n },\n '& .routeDetailsContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .routeDetailsItem': {\n '&.header': {\n '& .routeIdHeaderContainer': {\n alignItems: \"center\",\n justifyContent: \"space-between\",\n '& .ddnsItem': {\n '& .MuiFormControl-root': {\n paddingRight: theme.spacing(1.5),\n '&:last-child': {\n paddingRight: 0\n }\n },\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n }\n }\n },\n paddingBottom: theme.spacing(2)\n },\n '& .heading': {\n fontSize: 16,\n fontWeight: 600,\n color: COLORS.BLACK\n },\n '&.basicDesc': {\n paddingBottom: theme.spacing(3.75)\n },\n '&.noSelectedArea': {\n padding: theme.spacing(3),\n backgroundColor: COLORS.WHITE,\n border: `1px dashed ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n '& p': {\n textAlign: \"center\",\n fontSize: 14,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '&.timeline': {\n alignSelf: \"flex-start\",\n height: 55\n },\n '&.timelineWarning': {\n paddingTop: theme.spacing(1.5),\n '& .warningContainer': {\n alignItems: \"center\",\n '& .warningItem': {\n paddingRight: theme.spacing(1),\n '& p': {\n fontSize: 11,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '& .warningIcon': {\n width: 20,\n height: 20,\n verticalAlign: \"middle\",\n\n }\n },\n\n },\n '& .basicDescContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .basicItem': {\n paddingBottom: theme.spacing(2),\n '&:last-child': {\n paddingBottom: 0\n },\n '&.driver': {\n paddingRight: theme.spacing(2)\n },\n '&.descriptions': {\n flexGrow: 1\n },\n '& .descCommonContainer': {\n '& .commonItem': {\n flex: \"1 0 0\",\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n },\n '&:last-child': {\n flex: \"0.5 0 0\"\n },\n '& .descContainer': {\n flexDirection: \"column\",\n '& .capacityBreachContainer': {\n alignItems: \"center\",\n '& .infoErrorIcon': {\n width: 16,\n height: 16,\n marginLeft: theme.spacing(1)\n }\n },\n '& p': {\n fontSize: 12,\n fontWeight: 500,\n lineHeight: \"18px\"\n },\n '& .value': {\n alignSelf: \"flex-start\",\n '& p': {\n fontWeight: 600\n }\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.mapZone': {\n flexGrow: 1,\n backgroundColor: theme.palette.secondary.dark,\n position: \"relative\",\n overflow: \"auto\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '& .listViewTimelineContent': {\n backgroundColor: COLORS.WHITE,\n padding: theme.spacing(2, 3),\n height: \"100%\",\n overflow: \"auto\"\n },\n '& .mapSwitchBtnContainer': {\n position: \"absolute\",\n alignItems: \"center\",\n width: 110,\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n backgroundColor: COLORS.WHITE,\n top: theme.spacing(1),\n right: theme.spacing(6.5),\n flexWrap: \"nowrap\",\n '& .switchBtnItem': {\n cursor: \"pointer\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n '&.mapView': {\n borderTopLeftRadius: theme.spacing(1),\n borderBottomLeftRadius: theme.spacing(1),\n '& path': {\n stroke: theme.palette.primary.main\n }\n },\n '&.listView': {\n borderTopRightRadius: theme.spacing(1),\n borderBottomRightRadius: theme.spacing(1),\n '& path': {\n fill: theme.palette.primary.main\n }\n },\n '& .title': {\n color: theme.palette.primary.main,\n fontWeight: 600\n }\n },\n '& .switchBtnItemContainer': {\n flexDirection: \"column\",\n alignItems: \"center\",\n '& .title': {\n fontSize: 12,\n fontWeight: 500,\n paddingBottom: theme.spacing(0.5)\n }\n },\n '& .switchBtnIcon': {\n width: 54,\n height: 40,\n verticalAlign: \"middle\",\n padding: theme.spacing(0, 2),\n backgroundColor: \"transparent\"\n },\n }\n\n }\n },\n '&.buttons': {\n '& .buttonsContainer': {\n padding: theme.spacing(2),\n justifyContent: \"flex-end\",\n '& .btn': {\n marginRight: theme.spacing(1.5),\n '&:last-child': {\n marginRight: 0\n }\n },\n '& .refreshMapBtn': {\n marginRight: \"auto\"\n },\n '& .saveBtn': {\n padding: theme.spacing(1, 5.5)\n }\n }\n },\n '&.planned': {\n '& .routeDetailsItem': {\n '&.basicDesc': {\n paddingBottom: '0 !important'\n }\n }\n },\n }\n }\n }\n },\n timelineStepper: {\n padding: 0,\n alignItems: \"center\",\n backgroundColor: 'transparent',\n '& .timelineStep': {\n paddingLeft: 16,\n paddingRight: 16,\n '&.isDragging': {\n '& .MuiStepConnector-alternativeLabel': {\n display: \"none\"\n }\n },\n '&.first': {\n paddingLeft: 0\n }\n },\n '& .MuiStepLabel-root': {\n flexDirection: 'column-reverse',\n '& .MuiStepLabel-labelContainer': {\n '& .MuiStepLabel-alternativeLabel': {\n whiteSpace: \"nowrap\",\n width: 32,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\"\n }\n },\n '&.MuiStepLabel-alternativeLabel': {\n flexDirection: 'column-reverse'\n }\n },\n '& .MuiStepLabel-iconContainer': {\n paddingRight: 0\n },\n '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {\n marginTop: 0\n },\n '& .MuiStepLabel-label': {\n fontSize: 10,\n color: '#252525',\n paddingBottom: 6,\n textAlign: \"center\"\n }\n },\n listViewTimeline: {\n padding: \"0 !important\",\n margin: 0,\n '& .timelineItem': {\n minHeight: 64,\n '&.first': {\n minHeight: 62,\n '& .MuiTimelineSeparator-root': {\n padding: 0\n }\n },\n '& .MuiTimelineSeparator-root': {\n paddingLeft: 3\n },\n '&:last-child': {\n minHeight: \"auto\",\n '& .primaryConnector': {\n display: \"none\"\n },\n },\n '&:before': {\n content: \"none\"\n },\n '& .timelineDot': {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n '&.listItem': {\n paddingTop: 9\n },\n '& .timelineIcon': {\n padding: 0,\n },\n '& .countIcon': {\n width: 24,\n height: 24,\n borderRadius: \"50%\",\n backgroundColor: COLORS.MAROON,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n '& .count': {\n fontSize: 10,\n fontWeight: 600,\n lineHeight: \"12px\",\n color: COLORS.WHITE\n }\n },\n '& .areaIcon': {\n width: 32,\n height: 32\n }\n },\n '& .primaryConnector': {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`\n },\n '& .timelineContent': {\n padding: 0,\n paddingLeft: theme.spacing(1.5),\n '& .contentContainer': {\n alignItems: \"center\",\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n flexWrap: \"nowrap\",\n marginBottom: theme.spacing(2),\n '& .listViewContentItem': {\n '&.itemHeading': {\n padding: theme.spacing(0, 2),\n cursor: \"pointer\"\n },\n '& .id': {\n fontSize: 12,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n whiteSpace: \"nowrap\"\n },\n '&.itemDetails': {\n flexGrow: 1,\n padding: theme.spacing(1, 1.5, 1)\n },\n '& .itemDetailsContainer': {\n flexWrap: \"nowrap\",\n alignItems: \"center\",\n '& .detailsItem': {\n paddingRight: theme.spacing(1.5)\n },\n '& .itemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\",\n whiteSpace: \"nowrap\",\n '&.address': {\n whiteSpace: \"normal\",\n }\n }\n }\n }\n }\n },\n '& .titleHeading': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.BLACK,\n paddingTop: theme.spacing(1)\n }\n }\n }\n },\n confirmDialogButtonsContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(8.25),\n '& .dialogBtn': {\n '&.secondary': {\n paddingLeft: theme.spacing(8),\n paddingRight: theme.spacing(8),\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n paddingLeft: theme.spacing(7.25),\n paddingRight: theme.spacing(7.25),\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '& p': {\n textAlign: \"center\",\n lineHeight: 1.2,\n '&.alignLeft': {\n textAlign: \"left\",\n }\n },\n '&.heading': {\n padding: theme.spacing(0, 15.75, 5),\n '& p': {\n fontSize: 24,\n fontWeight: 600\n }\n },\n '&.desc': {\n padding: theme.spacing(0, 2.5),\n '& p': {\n fontSize: 18,\n fontWeight: 400,\n '& .count': {\n fontWeight: 600\n }\n }\n }\n }\n },\n capacityBreachDialogTitle: {\n fontSize: 20,\n fontWeight: 600,\n paddingLeft: theme.spacing(2.5)\n },\n capacityBreachDialogButtonsContainer: {\n justifyContent: \"flex-end\",\n paddingBottom: theme.spacing(3.75),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmWithTitleDialogPaperPropsRoot: {\n width: 600,\n height: 240,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n confirmDialogPaperPropsRoot: {\n width: 600,\n height: 350,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n selectMenuPropsList: {\n '& .MuiListItem-root': {\n paddingLeft: theme.spacing(1.5),\n paddingRight: theme.spacing(1.5),\n whiteSpace: \"normal\",\n '& .MuiListItemText-primary': {\n fontSize: 10\n }\n },\n '& .MuiCheckbox-root': {\n backgroundSize: \"16px 16px\",\n marginRight: theme.spacing(0.75)\n }\n },\n selectMenuPaperProps: {\n maxHeight: 200,\n width: 145,\n border: `1px solid ${COLORS.BLACK_INPUT_BORDER}`,\n borderRadius: theme.spacing(1),\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n overflow: \"auto\",\n boxShadow: \"none\"\n }\n })\n);\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M7.99989 1.33643C10.0701 1.33643 11.7484 3.44602 11.7484 6.04824C11.8084 7.69419 11.0472 9.26251 9.71687 10.2336C9.76187 10.2721 9.8088 10.3083 9.85749 10.342C10.5661 10.6414 11.3142 10.837 12.0786 10.9229C12.5219 11.0117 12.9397 11.1986 13.3015 11.4698C13.7693 11.8085 14.1341 12.2701 14.3556 12.8034C14.5259 13.2144 14.6276 13.6506 14.6566 14.0945C14.6589 14.1253 14.6666 14.6698 14.6666 14.6698H1.34411C1.33134 14.4782 1.33142 14.286 1.34437 14.0945C1.37343 13.6506 1.47512 13.2144 1.6454 12.8034C1.86689 12.2701 2.23174 11.8085 2.69951 11.4698C3.06126 11.1986 3.4791 11.0117 3.92242 10.9229C4.68685 10.837 5.43491 10.6413 6.14352 10.342C6.19204 10.3084 6.2388 10.2724 6.28363 10.234C4.95293 9.26301 4.1914 7.69447 4.25143 6.04824C4.25143 3.44602 5.92969 1.33643 7.99989 1.33643ZM7.99895 2.15087C6.39166 2.15087 5.08405 3.89918 5.08405 6.04824C5.03151 7.41829 5.6512 8.72768 6.74399 9.55569C6.96122 9.69388 7.09908 9.92781 7.11471 10.1848C7.13035 10.4418 7.02187 10.6907 6.82299 10.8542C6.75604 10.9109 6.68623 10.9642 6.61384 11.0138C5.83393 11.3972 4.99056 11.6349 4.12523 11.7152L4.06184 11.7257C3.74533 11.7934 3.44779 11.9306 3.19069 12.1272C2.84594 12.3783 2.57742 12.72 2.41487 13.1143C2.3157 13.3519 2.24628 13.6007 2.20821 13.8553H13.7917C13.7531 13.6008 13.6835 13.352 13.5843 13.1145C13.4218 12.7201 13.1532 12.3784 12.8084 12.1272C12.5512 11.9305 12.2536 11.7934 11.937 11.7257L11.874 11.7152C11.0088 11.6349 10.1655 11.3973 9.38562 11.0141C9.31272 10.9641 9.24241 10.9104 9.17495 10.8533C8.97638 10.6897 8.86817 10.4409 8.88389 10.1841C8.89962 9.92729 9.03737 9.69354 9.25442 9.55538C10.3469 8.72729 10.9663 7.41808 10.9139 6.04824C10.9139 3.89918 9.60623 2.15087 7.99895 2.15087Z\",\n fill: \"#666666\"\n});\n\nvar SvgUserIcon = function SvgUserIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgUserIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/user-icon.1dc9d87e.svg\";\nexport { ForwardRef as ReactComponent };","import moment from \"moment\";\nimport { RowData } from \"../../common/GridWrapper/DataTable\";\nimport AppConstants from \"../../constants\";\nimport { enumerateDaysBetweenDates, fixDecimals, getUniqueValues, localTimeString } from \"../../utils/helpers.utils\";\n\nexport interface MetaData {\n paymentType: string;\n totalAmount: string;\n transactionDate: Date;\n amountToCollect: string;\n collectedAmount: string;\n currency: string;\n category: string;\n deliveryType: string;\n modeOfCollection: string;\n invoiceNumber: string;\n internalExternal: string;\n origin: string;\n status: string;\n deliveryStatus: string;\n routeId: string;\n routeName: string;\n routeStatus: string;\n numberOfItems: number;\n lastStatusUpdatedTime: string;\n}\n\nexport interface Name {\n ar: string;\n en: string;\n}\n\nexport interface Product {\n sku: string;\n entryNumber: string;\n hasRejectedProducts: boolean;\n name: Name;\n quantity: string;\n acceptedQty: string\n unitPrice: string;\n imgUrl: string;\n vatPercentage: string;\n uom: string;\n orderedBarcode: string;\n associatedBarcodes: string[];\n substitution: boolean;\n}\n\nexport interface Address {\n area: string;\n landmark: string;\n building: string;\n apartment: string;\n zoneNumber: string;\n makani: string;\n streetNumber: string;\n streetName: string;\n city: string;\n postalCode: string;\n countryName: string;\n countryIsoCode: string;\n longitude: string;\n latitude: string;\n}\n\nexport interface ContactInfo {\n name: string;\n phone: string;\n altphone: string;\n email: string;\n address: Address;\n}\n\nexport interface PosInformation {\n store: string;\n storeName: string;\n contactInfo: ContactInfo;\n}\n\nexport interface DeliverySlot {\n startTime: Date;\n endTime: Date;\n}\n\nexport interface CustomerContactInfo {\n name: string;\n phone: string;\n email: string;\n address: Address;\n}\n\nexport interface DeliveryInformation {\n deliveryInstructions: string;\n deliveryCost: string;\n carrier: string;\n carrierTrackingId: string;\n shipmentSize: string;\n deliverySlot: DeliverySlot;\n customerContactInfo: CustomerContactInfo;\n driver: Driver;\n helper: Driver;\n vehicle: Vehicle;\n transitTime: string;\n actualTransitTime: string;\n dynamicTransitTime: string;\n estimatedTransitTime: string;\n}\n\nexport interface PickUpContactInfo {\n companyName: string;\n name: string;\n phone: string;\n email: string;\n address: Address;\n}\n\nexport interface PickupSlot {\n startTime: Date;\n endTime: Date;\n}\n\nexport interface PickUpInformation {\n pickUpContactInfo: PickUpContactInfo;\n pickupSlot: PickupSlot;\n}\n\nexport interface Reason {\n deliveryStatus: string;\n reasonCode: string;\n reasonDescription: string;\n}\n\nexport interface Order {\n id: string;\n orderCode: string,\n consignmentCode: string,\n hasRejectedProducts: boolean,\n retryCount: number,\n metadata: MetaData;\n products: Product[];\n reason: Reason;\n posInformation: PosInformation;\n deliveryInformation: DeliveryInformation;\n pickUpInformation: PickUpInformation;\n statuses: Statuses[];\n}\n\nexport interface CountryDetails {\n countryCode: string;\n countryName: string;\n}\n\nexport interface AssignedStatus {\n vehicleAssigned: boolean;\n helperAssigned: boolean;\n driverAssigned: boolean;\n consignmentsAvailable: boolean;\n}\n\nexport interface Vehicle {\n brand: string;\n country: string;\n crateCapacity: number;\n fleetId: string;\n id: string;\n orderCapacity: number;\n type: string;\n name: string;\n}\n\nexport interface Driver {\n countryIsoCode: string;\n countryName: string;\n licenseNumber: number;\n id: string;\n name: string;\n type: string;\n}\n\nexport interface Route {\n id: string;\n routeId: string;\n creationTime: string;\n plannedDate: string;\n createdBy: string;\n carrier: string;\n deliveryProposition: string;\n deliveryArea: string[];\n deliverySlot: string[];\n countryDetails: CountryDetails;\n totalConsignment: number;\n transitTime: number;\n displayRouteStatus: string;\n hubCode: string;\n hubName: string;\n status: string;\n assignedStatus: AssignedStatus;\n assignedVehicle: Vehicle;\n assignee: Driver;\n helper: Driver;\n actualTransitTime: string;\n}\n\nexport interface Sort {\n sorted: boolean;\n unsorted: boolean;\n empty: boolean;\n}\n\nexport interface Pageable {\n sort: Sort;\n offset: number;\n requestContinuation: string;\n pageNumber: number;\n pageSize: number;\n paged: boolean;\n unpaged: boolean;\n}\n\nexport interface Sort2 {\n sorted: boolean;\n unsorted: boolean;\n empty: boolean;\n}\n\nexport interface PlanningOrdersDataResponse {\n pageNumber: number;\n totalElements: number;\n totalPages: number;\n continuationToken?: string;\n elements: Order[];\n}\n\nexport interface PlanningRoutesDataResponse {\n pageNumber: number;\n totalElements: number;\n totalPages: number;\n continuationToken?: string;\n elements: Route[];\n}\nexport interface Statuses {\n statusCode: string;\n statusName: string;\n statusDate: string;\n reason: Reason;\n}\n\nexport const lastMileVTOrdersDataTransform = (response: PlanningOrdersDataResponse): any[] => {\n const transformedArray: any[] = [];\n response.elements.forEach((order: Order) => {\n const {\n id,\n metadata,\n posInformation: { store, storeName },\n deliveryInformation,\n orderCode,\n products,\n reason,\n consignmentCode,\n statuses,\n } = order;\n // TODO: map/add actual objects too for drilling down content or store in state\n const deliveryDate = moment(deliveryInformation.deliverySlot.startTime, AppConstants.DATE_FORMAT_BACKEND);\n const startTime = new Date(deliveryInformation.deliverySlot.startTime);\n const endTime = new Date(deliveryInformation.deliverySlot.endTime);\n const customerContactInfo = deliveryInformation.customerContactInfo || {\n address: {}\n };\n const transactionDate = moment(metadata.transactionDate, AppConstants.DATE_FORMAT_BACKEND);\n const statusDate = metadata.lastStatusUpdatedTime ? moment(metadata.lastStatusUpdatedTime, AppConstants.DATE_FORMAT_BACKEND).format(AppConstants.TIMESTAMP) : statuses && statuses.length ? moment(statuses[0].statusDate, AppConstants.DATE_FORMAT_BACKEND).format(AppConstants.TIMESTAMP) : \"\";\n\n transformedArray.push({\n id: id,\n hubCode: store,\n hubName: storeName,\n deliveryArea: customerContactInfo.address ? customerContactInfo.address.area : \"\",\n consignmentId: consignmentCode,\n type: metadata.category,\n deliveryDate: deliveryDate.format(AppConstants.DATE_FORMAT),\n startEndTime: `${localTimeString(startTime)} - ${localTimeString(endTime)}`,\n deliveryStatus: metadata.deliveryStatus,\n statusDate: statusDate,\n products: products && products.length ? products.length : 0,\n numberOfItems: metadata.numberOfItems && metadata.numberOfItems > 0 ? metadata.numberOfItems : products && products.length ? products.length : 0,\n orderId: orderCode,\n transactionDate: transactionDate.format(AppConstants.DATE_FORMAT),\n customerName: customerContactInfo.name,\n customerEmail: customerContactInfo.email,\n customerMobileNumber: customerContactInfo.phone,\n deliveryStreetAddress: getAddressInfo(customerContactInfo.address),\n landmark: customerContactInfo.address.landmark,\n paymentType: metadata.paymentType,\n totalAmount: fixDecimals(2, metadata.totalAmount ? metadata.totalAmount.toString() : \"\"),\n codAmount: fixDecimals(2, metadata.amountToCollect ? metadata.amountToCollect.toString() : \"\"),\n collectedAmount: fixDecimals(2, metadata.collectedAmount ? metadata.collectedAmount.toString() : \"\"),\n carrier: deliveryInformation.carrier,\n deliveryProposition: metadata.deliveryType,\n routeId: metadata.routeName,\n routeStatus: metadata.routeStatus,\n driver: deliveryInformation.driver ? deliveryInformation.driver.name : \"\",\n helper: deliveryInformation.helper ? deliveryInformation.helper.name : \"\",\n vehicle: deliveryInformation.vehicle ? deliveryInformation.vehicle.name : \"\",\n plannedDuration: deliveryInformation.dynamicTransitTime ? deliveryInformation.dynamicTransitTime : deliveryInformation.estimatedTransitTime,\n actualDuration: deliveryInformation.actualTransitTime ? deliveryInformation.actualTransitTime : \"\",\n deliveryFailedReason: reason ? reason.reasonDescription : statuses && statuses.length && statuses[0].reason ? statuses[0].reason.reasonDescription : \"\",\n });\n });\n return [...transformedArray];\n};\n\nexport const lastMileVTRoutesDataTransform = (response: PlanningRoutesDataResponse): any[] => {\n const transformedArray: any[] = [];\n response.elements.forEach((order: Route) => {\n const {\n id,\n routeId,\n hubCode,\n hubName,\n carrier,\n deliveryProposition,\n transitTime,\n deliveryArea,\n deliverySlot,\n plannedDate,\n status,\n totalConsignment,\n assignedVehicle,\n assignee,\n helper,\n createdBy,\n actualTransitTime\n } = order;\n // TODO: map/add actual objects too for drilling down content or store in state\n const deliveryDate = moment(plannedDate, AppConstants.DATE_FORMAT_BACKEND);\n transformedArray.push({\n id: id,\n hubCode: hubCode,\n hubName: hubName,\n deliveryArea: deliveryArea && deliveryArea.length ? deliveryArea : [],\n deliveryDate: deliveryDate.format(AppConstants.DATE_FORMAT),\n deliverySlot: deliverySlot && deliverySlot.length ? deliverySlot : [],\n consignments: totalConsignment,\n carrier: carrier,\n deliveryProposition: deliveryProposition,\n routeId: routeId,\n routeStatus: status,\n driver: assignee ? assignee.name : \"\",\n vehicle: assignedVehicle ? assignedVehicle.name : \"\",\n helper: helper ? helper.name : \"\",\n createdBy: createdBy,\n plannedDuration: transitTime,\n actualDuration: actualTransitTime,\n actions: order\n });\n });\n return [...transformedArray];\n};\n\nexport const getConsignmentStatusField = (fieldName: string, statusCode: string) => {\n const statuses: any = AppConstants.VALET_TROLLEY_CONSTANTS.CONSIGNMENTS_DATA.STATUSES;\n return statusCode && statuses[statusCode] ? statuses[statusCode][fieldName] : \"\";\n}\n\nexport const getRouteStatusField = (fieldName: string, statusCode: string) => {\n const statuses: any = AppConstants.VALET_TROLLEY_CONSTANTS.ROUTES_DATA.STATUSES;\n return statusCode && statuses[statusCode] ? statuses[statusCode][fieldName] : \"\";\n}\n\nexport const sortedCountryData = (\n columnName: string,\n isDescending: boolean\n) => (a: any, b: any) => {\n const aVal = isDescending ? a : b;\n const bVal = isDescending ? b : a;\n if (\n aVal[columnName].match(/^[0-9]+$/) &&\n bVal[columnName].match(/^[0-9]+$/)\n ) {\n return parseFloat(aVal[columnName]) - parseFloat(bVal[columnName]);\n } else {\n if (aVal[columnName] < bVal[columnName]) {\n return -1;\n } else if (aVal[columnName] > bVal[columnName]) {\n return 1;\n } else {\n return 0;\n }\n }\n};\n\nconst getFilterAttributeValue = (attrValue: any, noKey?: boolean) => {\n let currentValue = noKey ? attrValue : attrValue.map((item: any) => item.value);\n const selectAllIdx = currentValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = currentValue.indexOf(AppConstants.SELECT_NONE.value);\n if (selectAllIdx > -1) {\n currentValue = [];\n }\n if (selectNoneIdx > -1) {\n currentValue = [];\n }\n return currentValue;\n}\n\nexport const createFilterPayload = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n payload.attributes = [];\n if (payload.hub) {\n if (payload.hub.value) {\n let hubValue = payload.hub.value.map((item: any) => item.value);\n let hubNameValue = [];\n if (payload.hubName && payload.hubName.value.length) {\n hubNameValue = payload.hubName.value.map((item: any) => item.value);\n }\n hubValue = hubValue.concat(hubNameValue);\n const selectAllIdx = hubValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = hubValue.indexOf(AppConstants.SELECT_NONE.value);\n if (selectAllIdx > -1) {\n hubValue = [];\n }\n if (selectNoneIdx > -1) {\n hubValue = [];\n }\n payload.attributes.push({\n key: payload.hub.fieldName,\n value: getUniqueValues(hubValue)\n })\n delete payload.hub;\n delete payload.hubName;\n } else {\n payload.attributes.push({\n key: payload.hub.fieldName,\n value: []\n });\n delete payload.hub;\n delete payload.hubName;\n }\n }\n if (payload.deliveryArea) {\n let attrValue = [];\n if (payload.deliveryArea.value) {\n attrValue = getFilterAttributeValue(payload.deliveryArea.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryArea.fieldName,\n value: attrValue\n })\n delete payload.deliveryArea;\n }\n if (payload.orderType) {\n let attrValue = [];\n if (payload.orderType.value) {\n attrValue = getFilterAttributeValue(payload.orderType.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.orderType.fieldName,\n value: attrValue\n })\n delete payload.orderType;\n }\n if (payload.deliveryStatus) {\n let attrValue = [];\n if (payload.deliveryStatus.value) {\n attrValue = getFilterAttributeValue(payload.deliveryStatus.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryStatus.fieldName,\n value: attrValue\n })\n delete payload.deliveryStatus;\n }\n if (payload.paymentType) {\n let attrValue = [];\n if (payload.paymentType.value) {\n attrValue = getFilterAttributeValue(payload.paymentType.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.paymentType.fieldName,\n value: attrValue\n })\n delete payload.paymentType;\n }\n if (payload.carrier) {\n let attrValue = [];\n if (payload.carrier.value) {\n attrValue = getFilterAttributeValue(payload.carrier.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.carrier.fieldName,\n value: attrValue\n })\n delete payload.carrier;\n }\n if (payload.deliveryProposition) {\n payload.attributes.push({\n key: payload.deliveryProposition.fieldName,\n value: [\"SVT\"]\n })\n delete payload.deliveryProposition;\n }\n if (payload.routeId) {\n let attrValue = [];\n if (payload.routeId.value) {\n attrValue = getFilterAttributeValue(payload.routeId.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.routeId.fieldName,\n value: attrValue\n })\n delete payload.routeId;\n }\n if (payload.routeStatus) {\n let attrValue = [];\n if (payload.routeStatus.value) {\n attrValue = getFilterAttributeValue(payload.routeStatus.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.routeStatus.fieldName,\n value: attrValue\n })\n delete payload.routeStatus;\n }\n if (payload.driver) {\n let attrValue = [];\n if (payload.driver.value) {\n attrValue = getFilterAttributeValue(payload.driver.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.driver.fieldName,\n value: attrValue\n })\n delete payload.driver;\n }\n if (payload.vehicle) {\n let attrValue = [];\n if (payload.vehicle.value) {\n attrValue = getFilterAttributeValue(payload.vehicle.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.vehicle.fieldName,\n value: attrValue\n })\n delete payload.vehicle;\n }\n if (payload.helper) {\n let attrValue = [];\n if (payload.helper.value) {\n attrValue = getFilterAttributeValue(payload.helper.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.helper.fieldName,\n value: attrValue\n })\n delete payload.helper;\n }\n if (payload.deliveryFailedReason) {\n let attrValue = [];\n if (payload.deliveryFailedReason.value) {\n attrValue = getFilterAttributeValue(payload.deliveryFailedReason.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryFailedReason.fieldName,\n value: attrValue\n })\n delete payload.deliveryFailedReason;\n }\n if (payload.createdBy) {\n let attrValue = [];\n if (payload.createdBy.value) {\n attrValue = getFilterAttributeValue(payload.createdBy.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.createdBy.fieldName,\n value: attrValue\n })\n delete payload.createdBy;\n }\n if (payload.displayRouteStatus) {\n payload.attributes.push({\n key: payload.displayRouteStatus.fieldName,\n value: payload.displayRouteStatus.value || []\n })\n delete payload.displayRouteStatus;\n }\n if (payload.deliverySlot && payload.deliverySlot.value) {\n let delSlotValue = payload.deliverySlot.value.map((item: any) => item.value);\n let dateRange = [];\n const selectAllIdx = delSlotValue.indexOf(AppConstants.SELECT_ALL.value);\n if (payload.dateRange && payload.dateRange.value) {\n const allDates = enumerateDaysBetweenDates(payload.dateRange.value.startDate, payload.dateRange.value.endDate);\n if (selectAllIdx > -1 || !delSlotValue.length) {\n payload.isDateRange = true;\n dateRange.push({\n startTime: moment(payload.dateRange.value.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.dateRange.value.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n } else {\n payload.isDateRange = false;\n delSlotValue.forEach((slot: any) => {\n const splitSlot = slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n if (allDates.length) {\n allDates.forEach((date: string) => {\n dateRange.push({\n startTime: moment(date, AppConstants.DATE_FORMAT).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(date, AppConstants.DATE_FORMAT).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n })\n })\n }\n })\n }\n if (payload.reset) {\n delete payload.isDateRange;\n }\n }\n payload.dateRange = dateRange;\n delete payload.displayRouteStatus;\n delete payload.deliverySlot;\n delete payload.reset;\n }\n if (isLoadMore && data) {\n payload.pageNumber = data.pageNumber + 1 < data.totalPages ? data.pageNumber + 1 : payload.pageNumber;\n }\n if (data.continuationToken && payload.pageNumber) {\n payload.requestContinuationToken = data.continuationToken\n }\n payload.isSVT = true;\n return payload;\n};\n\nexport const createPayloadForExcelExport = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n let newPayload = createFilterPayload(payload, data, isLoadMore, isRoute);\n var orderFilterRequestDto = { orderFilterRequestDto: newPayload };\n return orderFilterRequestDto;\n};\n\nexport const createRoutesPayloadForExcelExport = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n let newPayload = createFilterPayload(payload, data, isLoadMore, isRoute);\n var routeFilterRequestDto = { routeFilterRequestDto: newPayload };\n return routeFilterRequestDto;\n};\n\n/* export const createCratesInfoPayload = (payload: any) => {\n if (payload) {\n let consignmentCode;\n let storeCode;\n if (payload.consignmentCode) {\n consignmentCode = payload.consignmentCode;\n }\n if (payload.posInformation) {\n storeCode = payload.posInformation.store\n };\n var consignmentCodePosCodeMap = {\n consignmentCodePosCodeMap: {\n [consignmentCode]: storeCode\n }\n }\n return consignmentCodePosCodeMap;\n }\n} */\n\nexport const createDraftRoutePayload = (payload: any,) => {\n const routeId = sessionStorage.getItem('routeId');\n const consignments = JSON.parse(sessionStorage.getItem('extraConsignments') || '[]');\n let responsePayload: any;\n responsePayload = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n hubCode: payload.hubCode,\n hubName: payload.hubName,\n isSVT: true\n }\n if (payload.slotValue) {\n let dateRange = [];\n const selectAllIdx = payload.slotValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = payload.slotValue.indexOf(AppConstants.SELECT_NONE.value);\n if (payload.date) {\n const allDates = enumerateDaysBetweenDates(payload.date.startDate, payload.date.endDate);\n if (selectAllIdx > -1 || selectNoneIdx > -1 || !payload.slotValue.length) {\n responsePayload.isDateRange = true;\n dateRange.push({\n startTime: moment(payload.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n } else {\n responsePayload.isDateRange = false;\n payload.slotValue.forEach((slot: any) => {\n const splitSlot = slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n if (allDates.length) {\n allDates.forEach((date: string) => {\n dateRange.push({\n startTime: moment(date, AppConstants.DATE_FORMAT).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(date, AppConstants.DATE_FORMAT).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n })\n })\n }\n })\n }\n }\n responsePayload.timeSlot = dateRange;\n }\n if (payload.editMode) {\n responsePayload.editMode = true;\n }\n if (payload.statusValue) {\n responsePayload.deliveryStatuses = getFilterAttributeValue(payload.statusValue, true);\n }\n if (routeId) {\n if (!payload.editMode) {\n if (consignments.length) {\n responsePayload.route = {\n id: routeId\n }\n }\n } else {\n responsePayload.route = {\n id: routeId\n }\n }\n if (consignments.length) {\n responsePayload.consignmentIds = consignments;\n }\n }\n return responsePayload;\n}\n\nexport const getDiscardRoutePayload = (params: any) => {\n const routeId = sessionStorage.getItem('routeId');\n const consignments = JSON.parse(sessionStorage.getItem('extraConsignments') || '[]');\n const previousConsignments = params.previousCons;\n let responsePayload: any = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n routeId: routeId || \"\",\n previousConsignments: previousConsignments\n }\n if (consignments.length) {\n responsePayload.consignmentsAdded = consignments\n }\n return responsePayload;\n}\n\nexport const createPublishRoutesPayload = (routes: RowData[]) => {\n return routes.length ? {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n ids: routes.map((route: RowData) => route.id)\n } : null;\n}\n\nexport const createConsignmentReplanningPayload = (params: any) => {\n let payload: any = {\n consignmentId: params.id\n };\n if (params.selection === AppConstants.PLANNING_CONSTANTS.CONSIGNMENTS_DATA.DEFAULT_REPLANNING_SELECTION) {\n payload.reScheduled = true;\n const splitSlot = params.slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n payload.timeSlot = {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT_UI).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT_UI).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n }\n } else {\n payload.reScheduled = false;\n payload.comments = params.commentsValue;\n payload.reason = params.reason ? {\n reasonCode: params.reason.reasonCode,\n reasonDescription: params.reason.reasonDescription,\n deliveryStatus: params.reason.deliveryStatus\n } : {}\n }\n return payload;\n}\n\nexport const createDeleteRoutePayload = (id: string) => {\n return id ? {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n id: id\n } : null;\n}\n\nexport const createRouteCreationPayload = (payload: any) => {\n let transitTime: any = calculateTransitTimeForConsignments(payload.mapRouteDirections, payload.consignments);\n let routePayload: any = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n route: {\n id: payload.route.id,\n creationTime: payload.route.creationTime,\n createdBy: payload.route.createdBy,\n countryDetails: payload.route.countryDetails,\n hubCode: payload.route.hubCode,\n hubName: payload.route.hubName,\n deliveryArea: getUniqueValues(payload.consignments, 'area'),\n deliverySlot: getUniqueValues(payload.consignments, 'slot'),\n totalConsignment: payload.consignments.length,\n deliveryDate: moment(payload.date, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n plannedDate: payload.route.plannedDate,\n transitTime: payload.transitTime,\n consignmentsIds: payload.consignments.map((item: any) => item.code)\n },\n consignmentTransitTime: transitTime\n }\n if (payload.selectedDriver !== AppConstants.SELECT_NONE.value) {\n routePayload.route.assignee = {\n id: payload.selectedDriver\n }\n }\n if (payload.selectedHelper !== AppConstants.SELECT_NONE.value) {\n routePayload.route.helper = {\n id: payload.selectedHelper\n }\n }\n if (payload.selectedVehicle !== AppConstants.SELECT_NONE.value) {\n routePayload.route.assignedVehicle = {\n id: payload.selectedVehicle\n }\n }\n return routePayload;\n}\n\nexport const createGetAllDropdownsPayload = (params: any) => {\n return {\n timeSlot: {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n },\n hubCode: params.hubCode,\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE)\n }\n}\n\nexport const createGetAllPlannedRoutesPayload = (params: any) => {\n return {\n timeSlot: {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n },\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n hubCode: params.hubCode,\n isSVT: true\n }\n}\n\nexport const createUpdateOrderStatusPayload = (params: any) => {\n return {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n consignmentIds: params.consignments,\n displayRouteStatus: params.status,\n routeId: params.routeId\n }\n}\n\nexport const getPlannedRoutesData = (routeData: any) => {\n let plannedSlots = [];\n if (routeData.PLANNED) {\n const plannedValue: any = routeData.PLANNED;\n for (let slotKey in plannedValue) {\n const slotValue: any = plannedValue[slotKey];\n let slot: any = {\n code: slotKey,\n value: slotValue.slotValue,\n data: []\n };\n let totalConsignments = 0;\n const elements: any = slotValue.elements.map((route: any) => {\n totalConsignments += route.totalConsignment;\n return {\n code: route.id,\n value: route.routeId,\n data: route,\n slot: slotKey,\n slotValue: slotValue.slotValue\n };\n });\n slot.data = elements;\n slot.totalConsignments = totalConsignments;\n plannedSlots.push(slot);\n }\n }\n return plannedSlots;\n}\n\n\nexport const createVTOrderReplanningPayload = (params: any) => {\n let payload: any = {\n consignmentId: params.id\n };\n if (params.status === AppConstants.VALET_TROLLEY_CONSTANTS.CONSIGNMENTS_DATA.DEFAULT_REPLANNING_SELECTION) {\n payload.reScheduled = true;\n const splitSlot = params.slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n payload.timeSlot = {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT_UI).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT_UI).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n }\n } else {\n payload.reScheduled = false;\n payload.status = params.selection;\n payload.comments = params.commentsValue;\n payload.reason = params.reason ? {\n reasonCode: params.reason.reasonCode,\n reasonDescription: params.reason.reasonDescription,\n deliveryStatus: params.reason.deliveryStatus\n } : {}\n }\n return payload;\n}\n\nexport const getConsignmentData = async (draftRouteData: any) => {\n let areas: any[] = [];\n let consignments: any[] = [];\n let slots: any = {};\n if (draftRouteData) {\n Object.keys(draftRouteData).forEach((statusKey: string) => {\n const statusValue: any = draftRouteData[statusKey]\n Object.keys(statusValue).forEach((areaKey: string) => {\n const areaIndex: number = areas.findIndex((area: any) => area.code === areaKey);\n let area: any = areaIndex === -1 ? {\n code: areaKey,\n value: areaKey,\n data: []\n } : { ...areas[areaIndex] };\n const areaValue: any = statusValue[areaKey];\n Object.keys(areaValue).forEach((slotKey: string) => {\n const slotValue: any = areaValue[slotKey];\n const slotIndex: number = areaIndex !== -1 ? area.data.findIndex((slot: any) => slot.code === slotKey) : -1;\n let slot: any = slotIndex === -1 ? {\n code: slotKey,\n value: slotValue.slotValue,\n area: areaKey,\n data: []\n } : { ...area.data[slotIndex] };\n const elements: any = slotValue.elements.map((consignment: any) => {\n return {\n code: consignment.id,\n value: consignment.id,\n data: consignment,\n slot: slotKey,\n slotValue: slotValue.slotValue,\n area: areaKey,\n status: statusKey\n };\n });\n if (slotIndex !== -1) {\n slot.data = [...slot.data, ...elements];\n area.data[slotIndex] = slot;\n } else {\n slot.data = elements;\n area.data.push(slot);\n }\n if (slots[area.code]) {\n slots[area.code][slot.code] = slot.data;\n } else {\n slots[area.code] = {\n [slot.code]: slot.data\n }\n }\n consignments = [...consignments, ...elements];\n })\n if (areaIndex !== -1) {\n areas[areaIndex] = area;\n } else {\n areas.push(area);\n }\n })\n })\n }\n return {\n areaWiseConsignments: areas,\n allConsignments: consignments,\n slotwiseConsignments: slots\n };\n}\n\nexport const createPayloadForUpdatingCustAddress = (params: any, consignmentCode: any) => {\n return {\n consignmentCode: consignmentCode,\n address: params\n }\n}\n\nexport const transformRouteConsignments = (consignments: any[]) => {\n let routeConsignments: any = {};\n let seqConsignments: any = [];\n consignments.forEach((consignment: any) => {\n let newConsignment: any = {\n code: consignment.id,\n value: consignment.id,\n data: consignment,\n area: consignment.deliveryInformation && consignment.deliveryInformation.customerContactInfo && consignment.deliveryInformation.customerContactInfo.address.area,\n slot: consignment.deliveryInformation && consignment.deliveryInformation.deliverySlot.deliverySlotTime\n };\n seqConsignments.push(consignment.id);\n if (routeConsignments[newConsignment.area]) {\n if (routeConsignments[newConsignment.area][newConsignment.slot]) {\n routeConsignments[newConsignment.area][newConsignment.slot].push(newConsignment);\n } else {\n routeConsignments[newConsignment.area][newConsignment.slot] = [newConsignment];\n }\n } else {\n routeConsignments[newConsignment.area] = {\n [newConsignment.slot]: [newConsignment]\n };\n }\n });\n return {\n routeConsignments: routeConsignments,\n seqConsignments: seqConsignments\n };\n}\n\nexport const getAllAreasAndSlots = (areas: any[]) => {\n let allAreas: string[] = [];\n areas.forEach((area: any) => {\n const slots = area.data;\n slots.forEach((slot: any) => {\n allAreas.push(`${area.code}-${slot.code}`);\n });\n allAreas.push(area.code);\n });\n return allAreas;\n}\n\nexport const getDropdownsData = (payload: any, codeKey?: string, valueKey?: string) => {\n return payload.length ? payload.map((item: any) => {\n return {\n code: codeKey ? item[codeKey] : item.id,\n value: valueKey ? item[valueKey] : item.name\n }\n }) : [];\n}\n\nexport const getTotalCrates = (consignments: any[]) => {\n let totalCrates = 0;\n if (consignments.length) {\n consignments.forEach((item: any) => {\n if (item.data && item.data.deliveryInformation) {\n totalCrates += parseInt(item.data.deliveryInformation.totalCratesCount);\n }\n });\n }\n return totalCrates;\n}\n\nexport const calculateTransitTime = (directions: any) => {\n let transitTime = 0;\n if (directions.legs && directions.legs.length) {\n directions.legs.forEach((leg: any) => {\n transitTime += leg.duration ? leg.duration.value : 0;\n });\n transitTime += (AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.DRIVER_SERVICE_TIME * directions.legs.length);\n }\n return transitTime;\n}\n\nexport const calculateTransitTimeForConsignments = (directions: any, consignments: any) => {\n let consignmentIdsTransitTime: any = {};\n if (directions.legs && directions.legs.length) {\n for (var i = 0; i < consignments.length; i++) {\n if (directions.legs[i]) {\n consignmentIdsTransitTime[consignments[i].code] = directions.legs[i].duration.value\n }\n else {\n consignmentIdsTransitTime[consignments[i].code] = 0\n }\n }\n }\n return consignmentIdsTransitTime;\n}\n\nexport const getAddressInfo = (addressObj: Address) => {\n return addressObj ? `${addressObj.building ? addressObj.building + ', ' : \"\"}${addressObj.apartment ? addressObj.apartment + ', ' : \"\"}${addressObj.zoneNumber ? addressObj.zoneNumber + ', ' : \"\"}${addressObj.makani ? addressObj.makani + ', ' : \"\"}${addressObj.streetNumber ? addressObj.streetNumber + ', ' : \"\"}${addressObj.streetName ? addressObj.streetName + ', ' : \"\"}${addressObj.area ? addressObj.area + ', ' : \"\"}${addressObj.zoneNumber ? addressObj.zoneNumber : \"\"}\n ${addressObj.city ? addressObj.city + ', ' : \"\"}${addressObj.postalCode ? addressObj.postalCode + ', ' : \"\"}${addressObj.countryIsoCode ? addressObj.countryIsoCode : \"\"}` : \"\";\n}\n\nexport const getLatLong = (addressObj: Address) => {\n return addressObj ? `${addressObj.latitude ? parseFloat(addressObj.latitude).toFixed(5) + ', ' : \"\"}${addressObj.longitude ? parseFloat(addressObj.longitude).toFixed(5) : \"\"}` : \"\";\n}\n\nexport const checkTerminalStatus = (deliveryStatus: string) => {\n return AppConstants.VALET_TROLLEY_CONSTANTS.CONSIGNMENTS_DATA.TERMINAL_STATUSES.indexOf(deliveryStatus) > -1;\n}\n","import { createSlice, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport moment from \"moment\";\nimport networkHandler from \"../../network/networkHandler\";\nimport { EApiMiddlewareMethods } from \"../../network/networkHandler.types\";\nimport { ValetTrolleyState } from \"./valetTrolleySlice.types\";\nimport AppConstants from \"../../constants\";\nimport { transformSelectValues, saveFile } from \"../../utils/helpers.utils\";\nimport { getDropdownsData, getPlannedRoutesData } from \"../../mocks/valetTrolley/response.transforms\";\n\nexport const fetchPlanningList = createAsyncThunk(\n \"ValetTrolley/FetchByCountry\",\n async (\n {\n requestContinuationToken,\n searchBy,\n searchValue,\n }: {\n requestContinuationToken?: string;\n searchBy: string;\n searchValue: string;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/${searchBy}/${searchValue}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n\n if (requestContinuationToken) {\n request.headers = {\n \"x-requestcontinuation-token\": requestContinuationToken,\n };\n }\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDynamicFiltersOrdersDropdownValues = createAsyncThunk(\n \"ValetTrolleyFetchDynamicFiltersOrdersDropdownValues\",\n async ({\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/dynamic-filter-count',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDynamicFiltersRoutesDropdownValues = createAsyncThunk(\n \"ValetTrolley/FetchDynamicFiltersRoutesDropdownValues\",\n async ({\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/dynamic-filter-count',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDeliveryReasons = createAsyncThunk(\n \"ValetTrolley/FetchDeliveryReasons\",\n async (params, { rejectWithValue }) => {\n try {\n const request = {\n url: `order/get-delivery-reasons/Default`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchPlanningOrderListByFilter = createAsyncThunk(\n \"ValetTrolley/FetchOrdersByFilter\",\n async (\n {\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/filter',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchPlanningRouteListByFilter = createAsyncThunk(\n \"ValetTrolley/FetchRoutesByFilter\",\n async (\n {\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/filter',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllDrivers = createAsyncThunk(\n \"ValetTrolley/FetchAllDrivers\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'assignee/drivers',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllHelpers = createAsyncThunk(\n \"ValetTrolley/FetchAllHelpers\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'assignee/helpers',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllVehicles = createAsyncThunk(\n \"ValetTrolley/FetchAllVehicles\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'vehicle/load',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createDraftRoute = createAsyncThunk(\n \"ValetTrolley/CreateDraftRoute\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/draft/create',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const loadAllSlots = createAsyncThunk(\n \"ValetTrolley/LoadAllSlots\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/draft/load/slots',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const vtOrderReplanning = createAsyncThunk(\n \"ValetTrolley/VtOrderReplanning\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/replanning',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\n\nexport const fetchAllPlannedRoutes = createAsyncThunk(\n \"ValetTrolley/FetchAllPlannedRoutes\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/view',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createAndEditRoute = createAsyncThunk(\n \"ValetTrolley/CreateAndEditRoute\",\n async (\n {\n payload,\n editMode\n }: {\n payload: any,\n editMode: boolean\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/edit',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const discardRouteChanges = createAsyncThunk(\n \"ValetTrolley/DiscardRouteChanges\",\n async (\n {\n params,\n redirect\n }: {\n params: any,\n redirect?: boolean\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/discard',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const publishRoutes = createAsyncThunk(\n \"ValetTrolley/PublishRoutes\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/publish',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const deleteRoute = createAsyncThunk(\n \"ValetTrolley/DeleteRoute\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/delete',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateConsignmentStatus = createAsyncThunk(\n \"ValetTrolley/UpdateOrderStatus\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/updateRouteStatus',\n method: EApiMiddlewareMethods.PUT,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchOrdersFilterChipsDisplayCount = createAsyncThunk(\n \"ValetTrolley/FetchOrdersFilterChipsDisplayCount\",\n async (\n {\n filters\n }: {\n filters: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/displayStatusCount',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRoutesFilterChipsDisplayCount = createAsyncThunk(\n \"ValetTrolley/FetchRoutesFilterChipsDisplayCount\",\n async (\n {\n filters\n }: {\n filters: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/displayStatusCount',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRouteConsignments = createAsyncThunk(\n \"ValetTrolley/FetchRouteConsignments\",\n async ({\n id\n }: {\n id: string\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `route/get-consignments-by-route/${id}`,\n method: EApiMiddlewareMethods.POST,\n data: {}\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportToExcel = createAsyncThunk(\n \"ValetTrolley/ExportOrderToExcel\",\n async (\n {\n payload,\n }: {\n payload: object;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'export/order',\n method: EApiMiddlewareMethods.POST,\n data: payload,\n responseType: \"blob\"\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportRoutesToExcel = createAsyncThunk(\n \"ValetTrolley/ExportRoutesToExcel\",\n async (\n {\n payload,\n }: {\n payload: object;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'export/route',\n method: EApiMiddlewareMethods.POST,\n data: payload,\n responseType: \"blob\"\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportInvoicePdf = createAsyncThunk(\n \"ValetTrolley/ExportInvoicePdf\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/view-invoice',\n method: EApiMiddlewareMethods.POST,\n data: params,\n responseType: \"bytes\"\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchVTSlotDropdownValues = createAsyncThunk(\n \"ValetTrolley/FetchVTSlotDropdownValues\",\n async (\n {\n countryCode\n }: {\n countryCode: any;\n },\n { rejectWithValue }\n ) => {\n let params = countryCode ? countryCode : sessionStorage.getItem(AppConstants.COUNTRY_CODE);\n try {\n const request = {\n url: `filter/all/${params}/SVT`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateAllConsignmentsState = createAsyncThunk(\"ValetTrolley/UpdateAllConsignmentsState\", ({\n consignments\n}: {\n consignments: any\n}) => {\n return consignments;\n});\n\nexport const clearPublishedRoutesErrors = createAsyncThunk(\"ValetTrolley/ClearPublishedRoutesErrors\", () => {\n return [];\n});\n\nexport const clearPublishedRoutes = createAsyncThunk(\"ValetTrolley/ClearPublishedRoutes\", () => {\n return [];\n});\n\nexport const resetPlanningError = createAsyncThunk(\"ValetTrolley/ResetPlanningError\", () => {\n return \"\";\n});\n\nexport const clearUpdatedRoute = createAsyncThunk(\"ValetTrolley/ClearUpdatedRoute\", () => {\n return null;\n});\n\nexport const clearDeletedRoute = createAsyncThunk(\"ValetTrolley/ClearDeletedRoute\", () => {\n return null;\n});\n\nexport const resetCreateRouteSuccess = createAsyncThunk(\"ValetTrolley/ResetCreateRouteSuccess\", () => {\n return false;\n});\n\nexport const resetDraftRoute = createAsyncThunk(\"ValetTrolley/ResetDraftRoute\", () => {\n return {};\n});\n\nexport const resetConsignmentReplanningSuccess = createAsyncThunk(\"ValetTrolley/ResetConsignmentReplanningSuccess\", () => {\n return false;\n});\n\nexport const clearCurrentSlot = createAsyncThunk(\"ValetTrolley/ClearCurrentSlot\", () => {\n return null;\n});\n\nexport const fetchConsignmentHistoryAndProducts = createAsyncThunk(\n \"ValetTrolleyConsignmentDetails/FetchConsignmentHistoryAndProducts\",\n async (\n {\n params\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/statusHistoryProducts/${params}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const getCratesInfo = createAsyncThunk(\n \"ValetTrolleyConsignmentDetails/getCratesInfo\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/updateCratesAlectoApi`,\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchVTStatuses = createAsyncThunk(\n \"ValetTrolley/FetchVTStatuses\",\n async (\n {\n params\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/statuses/${params}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateCustomerAddress = createAsyncThunk(\n \"ValetTrolley/UpdateCustomerAddress\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/update-delivery-address',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const closeDialog = createAsyncThunk(\"ValetTrolley/CloseDialog\", () => {\n return false;\n});\n\nexport const resetReplanningSuccess = createAsyncThunk(\"ValetTrolley/ResetReplanningSuccess\", () => {\n return false;\n});\n\nexport const updateAddressSuccess = createAsyncThunk(\"VTAddressUpdate/AddressUpdateSuccess\", () => {\n return false;\n});\n\nconst initialState: ValetTrolleyState = {\n loading: false,\n tableLoading: false,\n invoiceData: \"\",\n displayInvoice: false,\n invoiceMessage: \"\",\n invoiceConsignment: \"\",\n exportError: \"\",\n cratesFromAlecto: \"\",\n productsListFromAlecto: [],\n vtOrdersFilterChipsDisplayCount: {\n consignmentCount: {\n UNPLANNED: 0,\n PLANNED: 0,\n PUBLISHED: 0,\n PREPARING: 0,\n PREPARED: 0,\n OUT_FOR_DELIVERY: 0,\n COMPLETED: 0,\n }\n },\n routesFilterChipsDisplayCount: {\n routCount: {\n UNPLANNED: 0,\n PLANNED: 0,\n PUBLISHED: 0,\n PREPARING: 0,\n PREPARED: 0,\n OUT_FOR_DELIVERY: 0,\n COMPLETED: 0,\n }\n },\n ordersFiltersDropdowns: {\n hubCodeList: [],\n hubNameList: [],\n deliveryAreaList: [],\n typeList: [],\n deliverySlotList: [],\n statusList: [],\n paymentTypeList: [],\n carrierList: [],\n deliveryPropositionList: [],\n routeIdList: [],\n routeStatusList: [],\n driverList: [],\n helperList: [],\n vehicleList: [],\n undeliveredReasonList: []\n },\n routesFiltersDropdowns: {\n hubCodeList: [],\n hubNameList: [],\n routeIdList: [],\n deliveryAreaList: [],\n deliverySlotList: [],\n carrierList: [],\n deliveryPropositionList: [],\n routeStatusList: [],\n driverList: [],\n helperList: [],\n vehicleList: [],\n createdByList: []\n },\n reasonsDropdownList: [],\n deliveryReasons: {},\n ordersData: {\n elements: [],\n pageNumber: 0\n },\n routesData: {\n elements: [],\n pageNumber: 0\n },\n vtStatuses: [],\n error: \"\",\n errorCode: \"\",\n draftRoute: {},\n plannedRoutes: {},\n slotwisePlannedRoutes: [],\n areawiseConsignments: [],\n slotwiseConsignments: {},\n allConsignments: [],\n routeConsignments: [],\n driversList: [],\n helpersList: [],\n vehiclesList: [],\n slotsList: [],\n consignmentStatusList: [],\n currentSlot: null,\n routeCreateSuccess: false,\n updatedRoute: null,\n routeDiscardSuccess: false,\n publishedRoutesErrors: [],\n publishedRoutes: [],\n vtReplanningConsignmentSuccess: false,\n deletedRoute: null,\n excelLoading: false,\n consignmentStatuses: [],\n productsList: [],\n consignmentDataAfterReplanning: {},\n isUpdateAddress: false,\n deliverySlotListVT: [],\n updatedCustomerAddress: {}\n};\n\nconst valetTrolleySlice = createSlice({\n name: \"ValetTrolley\",\n initialState,\n reducers: {},\n extraReducers: (builders) => {\n builders\n .addCase(fetchPlanningList.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningList.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.ordersData = payload;\n })\n .addCase(fetchPlanningList.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.vtReplanningConsignmentSuccess = false;\n state.ordersFiltersDropdowns = {\n hubCodeList: transformSelectValues(payload.hubCodes || []),\n hubNameList: transformSelectValues(payload.hubNames || []),\n deliveryAreaList: transformSelectValues(payload.areas || []),\n typeList: transformSelectValues(payload.types || []),\n deliverySlotList: transformSelectValues(payload.deliverySlots || []),\n statusList: transformSelectValues(payload.statuses || []),\n paymentTypeList: transformSelectValues(payload.paymentTypes || []),\n carrierList: transformSelectValues(payload.carriers || []),\n deliveryPropositionList: transformSelectValues(payload.deliveryPropositions || []),\n routeIdList: transformSelectValues(payload.routeIds || []),\n routeStatusList: transformSelectValues(payload.routeStatuses || []),\n driverList: transformSelectValues(payload.drivers || []),\n helperList: transformSelectValues(payload.helpers || []),\n vehicleList: transformSelectValues(payload.vehicles || []),\n undeliveredReasonList: transformSelectValues(payload.undeliveredReasons || [])\n };\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesFiltersDropdowns = {\n hubCodeList: transformSelectValues(payload.hubCodes || []),\n hubNameList: transformSelectValues(payload.hubNames || []),\n routeIdList: transformSelectValues(payload.routeIds || []),\n deliveryAreaList: transformSelectValues(payload.areas || []),\n deliverySlotList: transformSelectValues(payload.deliverySlots || []),\n carrierList: transformSelectValues(payload.carriers || []),\n deliveryPropositionList: transformSelectValues(payload.deliveryPropositions || []),\n routeStatusList: transformSelectValues(payload.routeStatuses || []),\n driverList: transformSelectValues(payload.drivers || []),\n helperList: transformSelectValues(payload.helpers || []),\n vehicleList: transformSelectValues(payload.vehicles || []),\n createdByList: transformSelectValues(payload.createdBy || [])\n };\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDeliveryReasons.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDeliveryReasons.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n let deliveryReasonsList: any = [];\n if (payload.reasons) {\n deliveryReasonsList = payload.reasons.map((reason: any) => {\n return {\n code: reason.reasonCode,\n value: reason.reasonDescription\n };\n });\n }\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.reasonsDropdownList = transformSelectValues(deliveryReasonsList);\n state.deliveryReasons = payload.reasons;\n })\n .addCase(fetchDeliveryReasons.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vtReplanningConsignmentSuccess = false;\n state.vtOrdersFilterChipsDisplayCount = payload;\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesFilterChipsDisplayCount = payload;\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllDrivers.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllDrivers.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.driversData = payload;\n const drivers = getDropdownsData(payload);\n state.driversList = transformSelectValues(drivers);\n })\n .addCase(fetchAllDrivers.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllHelpers.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllHelpers.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.helpersData = payload;\n const helpers = getDropdownsData(payload);\n state.helpersList = transformSelectValues(helpers);\n })\n .addCase(fetchAllHelpers.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllVehicles.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllVehicles.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vehiclesData = payload;\n const vehicles = getDropdownsData(payload);\n state.vehiclesList = transformSelectValues(vehicles);\n })\n .addCase(fetchAllVehicles.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(loadAllSlots.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(loadAllSlots.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.slotwisePlannedRoutes = [];\n state.slotsData = payload;\n state.currentSlot = payload.currentSlot && payload.currentSlot.length ? payload.currentSlot[0] : {};\n state.slotsList = transformSelectValues(payload.allSlots);\n })\n .addCase(loadAllSlots.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.currentSlot = null;\n state.slotsList = [];\n state.draftRoute = {};\n state.slotwisePlannedRoutes = [];\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllPlannedRoutes.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllPlannedRoutes.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.plannedRoutes = payload;\n state.slotwisePlannedRoutes = getPlannedRoutesData(payload.allRoutes);\n })\n .addCase(fetchAllPlannedRoutes.rejected, (state, action) => {\n state.loading = false;\n state.plannedRoutes = {};\n state.slotwisePlannedRoutes = [];\n })\n .addCase(createDraftRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.draftRoute = {};\n })\n .addCase(createDraftRoute.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeCreateSuccess = false;\n state.updatedRoute = null;\n state.routeDiscardSuccess = false;\n state.currentSlot = null;\n state.slotwisePlannedRoutes = [];\n state.draftRoute = payload;\n state.consignmentStatusList = transformSelectValues(payload.deliveryStatuses || []);\n sessionStorage.setItem('routeId', payload.route && payload.route.id);\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(createDraftRoute.rejected, (state, action) => {\n const {\n payload,\n meta: {\n arg: { params }\n }\n } = action;\n const errorPayload: any = payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.routeCreateSuccess = false;\n state.updatedRoute = null;\n state.routeDiscardSuccess = false;\n state.currentSlot = null;\n state.draftRoute = {};\n state.slotwisePlannedRoutes = [];\n if (!params.editMode) {\n sessionStorage.setItem('routeId', '');\n sessionStorage.setItem('extraConsignments', '[]');\n }\n })\n .addCase(vtOrderReplanning.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(vtOrderReplanning.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vtReplanningConsignmentSuccess = true;\n state.consignmentDataAfterReplanning = payload;\n })\n .addCase(vtOrderReplanning.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.vtReplanningConsignmentSuccess = false;\n })\n .addCase(createAndEditRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(createAndEditRoute.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { editMode }\n }\n } = action;\n state.loading = false;\n if (editMode) {\n state.updatedRoute = payload;\n } else {\n state.routeCreateSuccess = true;\n }\n state.currentSlot = null;\n sessionStorage.setItem('routeId', '');\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(createAndEditRoute.rejected, (state, action) => {\n const {\n payload,\n meta: {\n arg: { editMode }\n }\n } = action;\n const errorPayload: any = payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n if (editMode) {\n state.updatedRoute = null;\n } else {\n state.routeCreateSuccess = false;\n }\n })\n .addCase(discardRouteChanges.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(discardRouteChanges.fulfilled, (state, action) => {\n const {\n meta: {\n arg: { redirect }\n }\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeDiscardSuccess = true;\n state.draftRoute = {};\n state.currentSlot = null;\n if (!redirect) {\n sessionStorage.setItem('routeId', '');\n }\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(discardRouteChanges.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.routeDiscardSuccess = false;\n })\n .addCase(publishRoutes.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutesErrors = [];\n })\n .addCase(publishRoutes.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n if (payload.publishErrorDto && payload.publishErrorDto.length) {\n state.publishedRoutesErrors = payload.publishErrorDto;\n state.publishedRoutes = payload.publishedRoutes && payload.publishedRoutes.length ? payload.publishedRoutes : [];\n } else {\n state.publishedRoutes = payload.publishedRoutes && payload.publishedRoutes.length ? payload.publishedRoutes : [];\n }\n })\n .addCase(publishRoutes.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.publishedRoutes = [];\n state.publishedRoutesErrors = [];\n })\n .addCase(deleteRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(deleteRoute.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.deletedRoute = payload;\n })\n .addCase(deleteRoute.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.deletedRoute = null;\n })\n .addCase(updateConsignmentStatus.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateConsignmentStatus.fulfilled, (state, action) => {\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateConsignmentStatus.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchPlanningOrderListByFilter.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningOrderListByFilter.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { filters }\n }\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vtReplanningConsignmentSuccess = false;\n state.ordersData = {\n ...payload,\n elements:\n filters.pageNumber === 0\n ? [...payload.elements]\n : [...state.ordersData.elements, ...payload.elements],\n totalElements: payload.totalElements,\n totalPages: payload.totalPages\n };\n })\n .addCase(fetchPlanningOrderListByFilter.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchPlanningRouteListByFilter.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningRouteListByFilter.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { filters }\n }\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesData = {\n ...payload,\n elements:\n filters.pageNumber === 0\n ? [...payload.elements]\n : [...state.routesData.elements, ...payload.elements],\n totalElements: payload.totalElements,\n totalPages: payload.totalPages\n };\n })\n .addCase(fetchPlanningRouteListByFilter.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRouteConsignments.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchRouteConsignments.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeConsignments = payload;\n })\n .addCase(fetchRouteConsignments.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(updateAllConsignmentsState.fulfilled, (state, action) => {\n const { payload } = action;\n state.areawiseConsignments = payload.areaWiseConsignments;\n state.slotwiseConsignments = payload.slotwiseConsignments;\n state.allConsignments = payload.allConsignments;\n state.loading = payload.loading;\n state.error = \"\";\n })\n .addCase(clearPublishedRoutesErrors.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutesErrors = payload;\n })\n .addCase(clearPublishedRoutes.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutes = payload;\n })\n .addCase(resetPlanningError.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = payload;\n state.error = payload;\n })\n .addCase(clearUpdatedRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.updatedRoute = payload;\n state.routeDiscardSuccess = false;\n })\n .addCase(clearDeletedRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.deletedRoute = payload;\n })\n .addCase(clearCurrentSlot.fulfilled, (state, action) => {\n const { payload } = action;\n state.currentSlot = payload;\n })\n .addCase(resetCreateRouteSuccess.fulfilled, (state, action) => {\n const { payload } = action;\n state.routeCreateSuccess = payload;\n })\n .addCase(resetDraftRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.draftRoute = payload;\n })\n .addCase(resetConsignmentReplanningSuccess.fulfilled, (state, action) => {\n const { payload } = action;\n state.vtReplanningConsignmentSuccess = payload;\n })\n .addCase(exportToExcel.pending, (state) => {\n state.excelLoading = true;\n state.error = \"\";\n })\n .addCase(exportToExcel.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.excelLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n if (payload) {\n const currentDate = moment().format(\"YYYY-MM-DD\");\n const currentTime = moment().format(\"HH-mm\");\n let filename = `Consignments_${currentDate}_${currentTime}.xlsx`;\n saveFile(payload, filename);\n }\n })\n .addCase(exportToExcel.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.excelLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(exportRoutesToExcel.pending, (state) => {\n state.excelLoading = true;\n state.error = \"\";\n })\n .addCase(exportRoutesToExcel.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.excelLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n if (payload) {\n const currentDate = moment().format(\"YYYY-MM-DD\");\n const currentTime = moment().format(\"HH-mm\");\n let filename = `Routes_${currentDate}_${currentTime}.xlsx`;\n saveFile(payload, filename);\n }\n })\n .addCase(exportRoutesToExcel.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.excelLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.exportError = errorPayload.status;\n })\n .addCase(exportInvoicePdf.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(exportInvoicePdf.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n const data = payload.Invoices && payload.Invoices.length ? payload.Invoices[0].FileDataBytes : [];\n state.invoiceConsignment = payload.Invoices && payload.Invoices.length ? payload.Invoices[0].ConsignmentNo : \"\";\n state.displayInvoice = payload.Invoices && payload.Invoices.length;\n const pdfData = `data:application/pdf;base64,${data}`;\n state.invoiceData = payload.Invoices && payload.Invoices.length ? pdfData : [];\n state.invoiceMessage = payload.Message;\n })\n .addCase(exportInvoicePdf.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchConsignmentHistoryAndProducts.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchConsignmentHistoryAndProducts.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.consignmentStatuses = payload.statuses && payload.statuses.length ? payload.statuses : [];\n state.productsList = payload.products && payload.products.length ? payload.products : [];\n })\n .addCase(fetchConsignmentHistoryAndProducts.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchVTStatuses.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchVTStatuses.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vtStatuses = transformSelectValues(payload.statuses && payload.statuses.length ? payload.statuses : []);\n })\n .addCase(fetchVTStatuses.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(getCratesInfo.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(getCratesInfo.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.cratesFromAlecto = payload;\n state.productsListFromAlecto = payload && payload.crateAvailableOrders && payload.crateAvailableOrders.length > 0 && payload.crateAvailableOrders[0].products && payload.crateAvailableOrders[0].products.length > 0 ? payload.crateAvailableOrders[0].products : null;\n })\n .addCase(getCratesInfo.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchVTSlotDropdownValues.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchVTSlotDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n let deliverySlotListVT: any = {};\n if (payload.deliverySlot) {\n Object.keys(payload.deliverySlot).filter((country: any) => {\n deliverySlotListVT[country] = transformSelectValues(payload.deliverySlot[country]);\n return true;\n });\n }\n state.deliverySlotListVT = deliverySlotListVT;\n })\n .addCase(fetchVTSlotDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(closeDialog.fulfilled, (state, action) => {\n state.consignmentDataAfterReplanning = {};\n })\n .addCase(resetReplanningSuccess.fulfilled, (state, action) => {\n state.vtReplanningConsignmentSuccess = false\n })\n .addCase(updateAddressSuccess.fulfilled, (state, action) => {\n state.isUpdateAddress = false\n })\n .addCase(updateCustomerAddress.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateCustomerAddress.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.isUpdateAddress = true;\n state.updatedCustomerAddress = payload;\n })\n .addCase(updateCustomerAddress.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.vtReplanningConsignmentSuccess = false;\n })\n\n },\n});\n\nexport default valetTrolleySlice.reducer;","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.88206 18.1909C2.93264 18.1909 2.98304 18.184 3.03167 18.1706L8.18669 16.7492C8.28943 16.7208 8.38917 16.6831 8.48486 16.6368C8.62971 16.6102 8.75818 16.5273 8.84206 16.4059C8.88347 16.3715 8.92418 16.3356 8.96242 16.2975L15.4007 9.85945C15.6092 9.81134 15.772 9.64869 15.8199 9.44021L17.4323 7.82761C17.641 7.77968 17.8035 7.61685 17.8516 7.40838L18.9577 6.30223C20.1092 5.14833 20.1092 3.28038 18.9577 2.12648L18.4669 1.63553C17.3137 0.482331 15.4444 0.482331 14.2912 1.63553L4.28743 11.6391C4.24549 11.6814 4.20566 11.7258 4.1683 11.7722C4.15015 11.7863 4.13253 11.8016 4.11614 11.8178C4.04548 11.8885 3.99525 11.9766 3.97023 12.0731C3.9186 12.1725 3.87666 12.2767 3.84476 12.3838L2.34282 17.4691C2.2926 17.6391 2.32555 17.8231 2.43164 17.9651C2.53808 18.1072 2.70496 18.1909 2.88224 18.1909H2.88206ZM8.38141 15.2876L5.30564 12.2118L11.3414 6.17641L14.417 9.25219L8.38141 15.2876ZM13.3729 4.14457L16.4487 7.22035L15.2125 8.45654L12.1367 5.38077L13.3729 4.14457ZM15.0867 2.43099C15.8004 1.71729 16.9576 1.71729 17.6713 2.43099L18.1623 2.92177C18.8749 3.63617 18.8749 4.79254 18.1623 5.50659L17.2443 6.42471L14.1684 3.34893L15.0867 2.43099ZM4.75988 13.2572L7.3232 15.8201L3.70854 16.817L4.75988 13.2572Z\",\n fill: \"#0E5AA7\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.8766 22.1453H2.93738C2.6267 22.1453 2.37488 22.3971 2.37488 22.7078C2.37488 23.0184 2.6267 23.2703 2.93738 23.2703H20.8766C21.1873 23.2703 21.4391 23.0184 21.4391 22.7078C21.4391 22.3971 21.1873 22.1453 20.8766 22.1453Z\",\n fill: \"#0E5AA7\"\n});\n\nvar SvgEditIcon = function SvgEditIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgEditIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/editIcon.1c8bcaf3.svg\";\nexport { ForwardRef as ReactComponent };","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n '& .headingContainer': {\n flexDirection: \"column\",\n '& .titleHeading': {\n fontSize: 18,\n fontWeight: 500,\n '& .content': {\n fontWeight: 600\n }\n },\n '& .titleContent': {\n fontSize: 12,\n fontWeight: 600,\n '&.link': {\n cursor: \"pointer\"\n }\n }\n },\n '& .tagContainer': {\n marginLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.CREAM_CAN': {\n backgroundColor: COLORS.CREAM_CAN\n },\n '&.VISTA_BLUE': {\n backgroundColor: COLORS.VISTA_BLUE\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.SEA_GREEN\n },\n '&.GOLDEN_BELL': {\n backgroundColor: COLORS.GOLDEN_BELL\n },\n '&.SCAMPI': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.BLUE': {\n backgroundColor: COLORS.PRIMARY_MAIN\n },\n '&.SEA_GREEN2': {\n backgroundColor: COLORS.SEA_GREEN2\n },\n '&.LUCKY': {\n backgroundColor: COLORS.LUCKY\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n },\n '&.JUNGLE_GREEN': {\n backgroundColor: COLORS.JUNGLE_GREEN\n },\n '&.BLACK': {\n backgroundColor: COLORS.BLACK\n },\n }\n },\n '& .editIcon': {\n paddingLeft: theme.spacing(1.5),\n '& .icon': {\n cursor: \"pointer\",\n verticalAlign: \"middle\"\n }\n }\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .geocodedAddress': {\n paddingBottom: theme.spacing(2),\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .detailsHeader': {\n flexDirection: \"column\",\n backgroundColor: COLORS.TRANSPARENT_BLUE,\n padding: \"18px 16px\",\n borderRadius: theme.spacing(1),\n '& .detailsHeaderItem': {\n paddingBottom: theme.spacing(2),\n '& .title': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600\n },\n '& .editIcon': {\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n '& .subSection': {\n paddingTop: \"16px\",\n display: \"flex\"\n },\n '& .subSectionTitle': {\n fontSize: \"14px\",\n fontWeight: 600\n },\n '& .subSectionContent': {\n fontSize: \"14px\",\n fontWeight: 500,\n paddingLeft: \"8px\"\n },\n '&:last-child': {\n paddingBottom: 0\n },\n '& .editAddress': {\n height: \"18px\",\n width: \"18px\",\n cursor: \"pointer\"\n },\n '& .headerItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& .contactItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& p': {\n lineHeight: \"17px\",\n fontSize: 14\n },\n '& .name': {\n fontWeight: 600\n },\n '&.geocodedAddress': {\n paddingBottom: \"6px\",\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .contactMobile': {\n marginRight: theme.spacing(5)\n },\n '& .logo': {\n width: 24,\n height: 24\n },\n '& .contact': {\n '& a': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary\n },\n paddingLeft: theme.spacing(1),\n '&.mobile': {\n paddingLeft: theme.spacing(0.25)\n }\n }\n }\n },\n '& .contentHubAddress': {\n display: \"flex\",\n flexDirection: \"column\",\n '& .main': {\n display: \"flex\",\n flexDirection: \"column\"\n },\n '& .title': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600\n },\n '& .content': {\n paddingTop: \"16px\",\n fontWeight: 500,\n fontSize: \"14px\",\n lineHeight: \"20px\"\n },\n '& .subSection': {\n paddingTop: \"16px\",\n display: \"flex\"\n },\n '& .subSectionTitle': {\n fontSize: \"14px\",\n fontWeight: 600\n },\n '& .subSectionContent': {\n fontSize: \"14px\",\n fontWeight: 500,\n paddingLeft: \"8px\"\n },\n '& .detailsHeaderItem': {\n paddingBottom: theme.spacing(2),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .editAddress': {\n height: \"18px\",\n width: \"18px\",\n cursor: \"pointer\"\n },\n '& .headerItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& .contactItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& p': {\n lineHeight: \"17px\",\n fontSize: 14\n },\n '& .name': {\n fontWeight: 600\n },\n '&.geocodedAddress': {\n paddingBottom: \"6px\",\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .contactMobile': {\n marginRight: theme.spacing(5)\n },\n '& .logo': {\n width: 24,\n height: 24\n },\n '& .contact': {\n '& a': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary\n },\n paddingLeft: theme.spacing(1),\n '&.mobile': {\n paddingLeft: theme.spacing(0.25)\n }\n }\n }\n },\n '& .detailsContent': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: theme.spacing(3, 0, 2, 0),\n '& .contentRow': {\n paddingBottom: theme.spacing(3),\n '&.hubDetails': {\n paddingBottom: theme.spacing(1)\n },\n '&:last-child': {\n paddingBottom: 0\n },\n '& .contentColumn': {\n flex: \"2 0 0\",\n '&:last-child': {\n flex: \"1 0 0\"\n },\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\"\n },\n '& .label': {\n paddingBottom: theme.spacing(1)\n },\n '& .content': {\n fontWeight: 600\n }\n },\n '& .columnDetails': {\n alignContent: \"flex-end\"\n },\n '& .endColumnDetails': {\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n }\n },\n '& .sellerDetails': {\n paddingTop: theme.spacing(1.75),\n '& .detailsHeader': {\n backgroundColor: theme.palette.secondary.main\n }\n },\n '& .deliveryProofSection': {\n paddingBottom: theme.spacing(1),\n '& .content': {\n width: \"100%\",\n '& .deliveryProofContainer': {\n flexDirection: \"column\",\n '& .deliveryProofItem': {\n paddingBottom: theme.spacing(1.5),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .imagesContainer': {\n flexWrap: \"nowrap\",\n '& .imagesItem': {\n marginRight: theme.spacing(1.5),\n width: \"50%\",\n height: 145,\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(2),\n '&:last-child': {\n marginRight: 0\n },\n '& .imageItemContainer': {\n flexDirection: \"column\",\n '& .imageItem': {\n paddingBottom: theme.spacing(2),\n '& .heading': {\n fontSize: 14,\n fontWeight: 500\n },\n '& .allImagesContainer': {\n flexWrap: \"nowrap\",\n overflow: \"auto\",\n '& .viewerContainer': {\n display: \"flex\"\n },\n '&.sign': {\n justifyContent: \"space-around\",\n },\n '& img': {\n width: \"auto\",\n height: 64,\n cursor: \"pointer\",\n marginRight: theme.spacing(1.5),\n \"&:last-child\": {\n marginRight: 0\n }\n }\n }\n }\n }\n }\n },\n '& .commentsContainer': {\n flexDirection: \"column\",\n padding: theme.spacing(1),\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n '& .commentsItem': {\n paddingBottom: theme.spacing(0.75),\n '& p': {\n fontWeight: 500,\n fontSize: 12\n },\n '& .heading': {\n fontSize: 14\n }\n }\n }\n }\n }\n }\n },\n '& .consignmentHistory': {\n paddingBottom: theme.spacing(1)\n },\n '& .tabularSection': {\n paddingBottom: theme.spacing(1),\n '&:last-child': {\n paddingBottom: 0\n },\n '&.crates': {\n '& .itemsContainer .item .itemContainer .itemColumn.item1 p': {\n fontWeight: 600,\n },\n '& .itemsContainer .item .itemContainer .itemColumn.item1 .header p': {\n fontWeight: 500,\n },\n '& .crateBarcode': {\n width: 40,\n height: 15,\n marginLeft: theme.spacing(3)\n },\n '& .crateStageLocationIcon': {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1)\n }\n },\n '& .itemDiv': {\n padding: theme.spacing(0),\n '& .content': {\n width: \"100%\",\n '& .itemsContainer': {\n flexWrap: \"nowrap\",\n '& .item': {\n padding: theme.spacing(2, 0),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n \"&:first-child\": {\n padding: 0,\n },\n '&:last-child': {\n borderBottom: \"none\"\n },\n '& .itemContainer': {\n padding: theme.spacing(0, 2),\n '&.items': {\n backgroundColor: COLORS.SECONDARY_MAIN,\n padding: theme.spacing(2),\n },\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600\n },\n '&.header p': {\n color: COLORS.DOVE_GRAY,\n fontWeight: 500,\n },\n '& .itemColumn': {\n padding: theme.spacing(0),\n '&.item1': {\n \"& p\": {\n fontWeight: 400,\n textTransform: \"capitalize\"\n },\n '& .rejectedReason': {\n fontSize: 10,\n color: COLORS.ALIZARIN_CRIMSON\n },\n '& .viewOriginalLink': {\n fontSize: 9,\n color: COLORS.COPY,\n cursor: \"pointer\",\n paddingRight: 6\n },\n '& .originalName': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 400,\n }\n },\n '&.item2': {\n '& p': {\n textAlign: \"center\",\n '& .green': {\n color: COLORS.PERSIAN_GREEN\n }\n }\n },\n '&.item3': {\n '& p': {\n textAlign: \"right\"\n }\n }\n }\n }\n }\n },\n '& .paymentContainer': {\n padding: 16,\n paddingTop: 13,\n '& .totalDivider': {\n margin: \"11px 0px\"\n },\n '& .paymentItem': {\n '&:last-child p': {\n fontWeight: 600\n },\n padding: \"5px 0\",\n '& .paymentItemColumn': {\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\"\n },\n '& .vat': {\n fontWeight: 400,\n paddingLeft: theme.spacing(0.25)\n },\n '&.right': {\n marginLeft: \"auto\"\n }\n }\n }\n }\n }\n }\n }\n },\n accordionSummary: {\n '& .header': {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: theme.spacing(0.5),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .smallHeading': {\n fontSize: 12\n }\n },\n '& .content': {\n flexGrow: 1\n }\n },\n timeline: {\n padding: \"0 !important\",\n margin: 0,\n '& .timelineItem': {\n minHeight: 50,\n '&:last-child': {\n minHeight: \"auto\"\n },\n '&:before': {\n content: \"none\"\n },\n '& .timelineDot': {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n '& .dotIcon': {\n width: 18,\n height: 18,\n padding: 5,\n '&.active': {\n padding: 0\n }\n },\n },\n '& .primaryConnector': {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`\n },\n '& .timelineContent': {\n padding: 0,\n paddingLeft: theme.spacing(1),\n '& .heading': {\n paddingTop: 1,\n fontSize: 14,\n lineHeight: \"14px\",\n fontWeight: 600,\n color: theme.palette.primary.main,\n '&.error': {\n color: COLORS.DARK_RED,\n '&.active': {\n paddingBottom: 17\n }\n },\n '&.active': {\n // paddingBottom: 17\n },\n '& .dateTime': {\n fontSize: 12,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.DOVE_GRAY,\n paddingLeft: theme.spacing(0.5),\n verticalAlign: \"bottom\",\n }\n },\n '& .metadataContainer': {\n paddingBottom: theme.spacing(1.5),\n '& .title': {\n fontSize: 12,\n lineHeight: \"10px\",\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n fontWeight: 500,\n color: COLORS.COPY\n },\n '& .description': {\n fontSize: 10,\n lineHeight: \"10px\",\n color: COLORS.DOVE_GRAY_LIGHT\n }\n }\n }\n }\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 600\n },\n verticalDiv: {\n color: \"#0E5AA7\",\n height: \"16px\",\n background: \"#0E5AA7\",\n width: \"2px\",\n margin: \"2px 16px 0px 16px\"\n },\n horizontalDiv: {\n borderBottom: \"1px solid #E6E6E6\",\n marginBottom: \"16px\"\n },\n pdfDocStyle: {\n overflow: \"scroll\",\n height: \"890px\"\n },\n pdfHeader: {\n position: \"absolute\",\n backgroundColor: \"#393939\",\n height: \"56px\",\n width: \"100%\",\n zIndex: 1,\n },\n pdfRoot: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n zoomOutStyle: {\n marginRight: \"10px\",\n cursor: \"pointer\",\n marginTop: \"20px\"\n },\n zoomInStyle: {\n cursor: \"pointer\",\n marginTop: \"12px\",\n marginLeft: \"16px\"\n },\n pdfName: {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.WHITE,\n lineHeight: \"17px\",\n display: \"flex\",\n alignContent: \"center\",\n alignItems: \"center\"\n },\n pdfScaleNo: {\n backgroundColor: \"#000408\",\n width: \"44px\",\n height: \"24px\",\n padding: \"6px\",\n color: \"white\"\n },\n invoiceModalBody: {\n borderRadius: \"8px\",\n '& .react-pdf__Page': {\n marginTop: \"56px\",\n '& .react-pdf__Page__canvas': {\n margin: \"0 auto\",\n height: \"100% !important\",\n overflow: \"auto\",\n minWidth: \"1064px\"\n },\n },\n '& .react-pdf__Page__annotations.annotationLayer': {\n padding: \"8px\",\n },\n },\n countSection: {\n margin: 'auto',\n width: 100,\n height: 40,\n borderRadius: 100,\n backgroundColor: COLORS.FOOTER_COUNT_BACKGROUND,\n color: COLORS.WHITE,\n left: \"calc(50% - 40px)\",\n bottom: \"38px\",\n position: \"fixed\",\n zIndex: 100,\n '& .countContainer': {\n height: \"100%\",\n '& .countItem': {\n margin: \"auto\",\n '& p': {\n fontSize: 16,\n fontWeight: 400\n },\n '& .current': {\n fontWeight: 500\n },\n '& .separator': {\n padding: \"0 2px\"\n }\n }\n }\n },\n closeModalIcon: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n paddingRight: \"48px\"\n },\n modalTitle: {\n fontSize: \"24px\",\n fontWeight: 600,\n padding: \"24px\",\n },\n applyModalBodyTitle: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n fontWeight: 600,\n fontSize: \"16px\",\n lineHeight: \"20px\",\n paddingTop: \"16px\",\n },\n noPdfModal: {\n border: \"none\",\n minWidth: \"800px\",\n minHeight: \"500px\",\n maxHeight: \"890px\",\n backgroundColor: COLORS.SECONDARY_LIGHT,\n position: \"absolute\",\n top: \"40%\",\n left: \"50%\",\n transform: \"translate(-40%, -50%)\",\n padding: \"24px\",\n textAlign: \"center\",\n borderRadius: \"8px\",\n },\n closeNoPdfModalIcon: {\n position: 'absolute',\n right: \"-20px\",\n top: \"-21px\",\n width: \"40px\",\n height: \"40px\",\n zIndex: 1,\n cursor: \"pointer\",\n },\n noInvoiceMsg: {\n fontSize: \"18px\",\n fontWeight: 500\n },\n openX: {\n transform: \"scaleX(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n closeX: {\n transform: \"scaleX(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n openY: {\n transform: \"scaleY(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n closeY: {\n transform: \"scaleY(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n }\n }),\n);","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n '& .headingContainer': {\n flexDirection: \"column\",\n '& .titleHeading': {\n fontSize: 18,\n fontWeight: 500,\n '& .content': {\n fontWeight: 600\n }\n },\n '& .titleContent': {\n fontSize: 12,\n fontWeight: 600,\n '&.link': {\n cursor: \"pointer\"\n }\n }\n },\n '& .tagContainer': {\n marginLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.MINSK': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.AMBER': {\n backgroundColor: COLORS.AMBER\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.PERSIAN_GREEN_DARK\n },\n '&.RED': {\n backgroundColor: COLORS.PALE_RED\n },\n '&.MADISON_BLUE': {\n backgroundColor: COLORS.GREEN_BLUE\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n }\n }\n },\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: \"8px\",\n '& .selectionArea': {\n paddingBottom: theme.spacing(3),\n '& .selectionFormControlContainer': {\n '& .formHeading': {\n fontSize: 14,\n fontWeight: 400,\n color: theme.palette.text.primary,\n paddingBottom: theme.spacing(2)\n },\n '& .radioGroup': {\n flexDirection: 'row',\n '& .radioItem': {\n marginRight: theme.spacing(3)\n },\n '& .MuiFormControlLabel-label': {\n fontSize: 14,\n fontWeight: 500,\n color: theme.palette.text.primary,\n }\n }\n }\n },\n '& .selectedContentArea': {\n '& .contentAreaContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '&.reschedule .MuiOutlinedInput-root': {\n height: 40\n },\n '& .contentAreaItem': {\n paddingBottom: theme.spacing(3),\n flexGrow: 1,\n '& .itemContainer': {\n flexDirection: \"column\",\n '& .itemLabel': {\n paddingBottom: theme.spacing(1),\n alignSelf: \"flex-start\",\n '& p': {\n fontSize: 14,\n fontWeight: 400\n }\n },\n '& .itemInput': {\n '& .MuiOutlinedInput-input': {\n fontSize: 14,\n fontWeight: 400\n }\n }\n },\n }\n }\n }\n },\n buttons: {\n width: \"100%\",\n '& .userBtn': {\n '&.secondary': {\n marginRight: theme.spacing(2)\n },\n flexGrow: 1\n }\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 580\n },\n '& .react-pdf__Page': {\n marginTop: \"10px\",\n },\n '& .react - pdf__Page__textContent': {\n border: \"1px solid darkgrey\",\n boxShadow: \"5px 5px 5px 1px #ccc\",\n borderRadius: \"5px\",\n },\n '& .react - pdf__Page__annotations.annotationLayer': {\n padding: \"20px\",\n },\n '& .react - pdf__Page__canvas': {\n margin: \"0 auto\",\n },\n })\n);","import React, { forwardRef, ReactElement, Ref, useCallback, useEffect } from 'react';\nimport * as yup from 'yup';\nimport { useFormik } from 'formik';\n\n//Common Components\nimport CustomDialog from '../common/Dialog';\nimport TextBox from '../common/TextBox';\n\n//Material UI Components\nimport { TransitionProps } from \"@material-ui/core/transitions\";\nimport Slide from \"@material-ui/core/Slide\";\nimport { Button, Grid, Typography } from '@material-ui/core';\n\n//Styles\nimport { useStyles } from './UpdateCustomerAddress.styles';\n\n//Constants\nimport AppConstants from '../constants';\n\ninterface UpdateCustomerAddressProps {\n open: boolean;\n custInfo: any;\n consignment: any;\n closePopup: () => void;\n handleDialogAction?: (params: any) => void;\n}\n\nconst Transition = forwardRef(function Transition(\n props: TransitionProps & { children?: ReactElement\n View Original \n handleOriginalName()} />\n
\n }\n \n {`Live Tracking (#${deliveryInformation && deliveryInformation.carrierTrackingId ? deliveryInformation.carrierTrackingId : consignment.orderReference ? consignment.orderReference : \"\"})`}\n
\n :\n \n Lat/Long : \n {getLatLong(custInfo && custInfo.address ? custInfo.address : \"\")} \n
\n \n Landmark : \n {Object.keys(updatedAddress.address).length !== 0 ? (\n {updatedAddress.address ? updatedAddress.address.landmark : \"\"} \n ) : (\n {custInfo && custInfo.address ? custInfo.address.landmark : \"\"} \n )}\n
\n \n Delivery Instructions : \n {deliveryInformation ? deliveryInformation.deliveryInstructions : \"\"} \n
\n \n {loading && 'All changes will be discarded. Are you sure you want to leave this page?'}\n />\n }\n \n \n \n {editMode ? `Edit ${draftRoute.route ? draftRoute.route.routeId : \"\"}` : viewMode ? location.state.route.routeId : 'Create Route'} \n {\n viewMode && location.state.route.displayRouteStatus !== AppConstants.PLANNING_CONSTANTS.ROUTES_DATA.UNEDITABLE_CHIP &&\n <>\n \n \n {location.state ? location.state.route.status : \"\"} \n {!(isLastMileViewer || isOnlyStdLastMileViewer) &&\n \n \n \n }\n \n \n \n \n \n \n \n \n \n \n \n \n {viewMode ? 'Consignments' : tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? `Consignments(${allConsignments.length})` : 'Routes'} \n {\n !viewMode && tabValue !== AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n \n \n {\n !viewMode &&\n \n {\n tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED &&\n \n \n \n }\n \n \n {\n !viewMode &&\n \n \n \n \n \n \n \n \n {\n !editMode &&\n \n \n }\n \n \n }\n \n \n \n {\n viewMode ?\n \n {getViewModeConsignments()}\n \n :\n \n \n \n \n \n \n {getAreawiseConsignments()}\n \n \n \n \n {getSlotwisePlannedRoutes()}\n \n \n \n \n \n Hub:{location.state.hubName || \"\"} \n \n \n {\n tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED &&\n \n \n \n All \n \n \n \n \n \n }\n \n }\n \n \n \n \n \n {\n viewMode ?\n \n \n {\n location.state.route ?\n \n {location.state.route && location.state.route.routeId} \n \n : null\n }\n {\n location.state.route ?\n \n \n \n \n \n \n \n Driver \n \n \n {location.state.route && location.state.route.assignee ? location.state.route.assignee.name : 'Not Assigned'} \n \n \n \n \n \n \n Helper \n \n \n {location.state.route && location.state.route.helper ? location.state.route.helper.name : 'Not Assigned'} \n \n \n \n \n \n \n Vehicle \n \n \n {location.state.route && location.state.route.assignedVehicle ? location.state.route.assignedVehicle.name : 'Not Assigned'} \n \n \n \n \n \n \n Hub \n \n \n {location.state.route && location.state.route.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n\n \n \n \n Consignments \n \n \n {location.state.route && `${location.state.route.totalConsignment}`.padStart(2, '0')} \n \n \n \n {/* \n \n \n Crates \n \n \n {location.state.route && `${location.state.route.totalCrates}`.padStart(2, '0')} \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Route Details will appear here \n \n }\n \n \n :\n tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n \n \n \n \n \n {draftRoute.route && draftRoute.route.routeId} \n \n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n : null\n }\n \n \n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n Consignments \n \n \n \n {`${getAllSelectedConsignments().length}`.padStart(2, '0')} \n {\n calculateCapacityBreach('consignments') &&\n \n \n }\n \n \n \n \n {/* \n \n \n Crates \n \n \n \n {`${getTotalCrates(getAllSelectedConsignments())}`.padStart(2, '0')} \n {\n calculateCapacityBreach('crates') &&\n \n \n }\n \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Selected Consignments will appear here \n \n }\n {\n getAllSelectedConsignments().length ?\n \n \n \n \n {(provided) => (\n \n \n {draftRoute.route && draftRoute.route.hubName}\n \n \n {getStepperTimelineItems()}\n {provided.placeholder}\n \n )}\n \n \n \n \n : null\n }\n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n You can also drag and reorder the consigments to change their sequence. \n \n \n \n : null\n }\n \n \n :\n \n \n {\n selectedRoute.code ?\n \n {selectedRoute && selectedRoute.value} \n \n : null\n }\n {\n selectedRoute.code ?\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Hub \n \n \n {selectedRoute.data && selectedRoute.data.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n\n \n \n \n Consignments \n \n \n {selectedRoute.data && `${selectedRoute.data.totalConsignment}`.padStart(2, '0')} \n \n \n \n {/* \n \n \n Crates \n \n \n {selectedRoute.data && `${selectedRoute.data.totalCrates}`.padStart(2, '0')} \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Selected Route Details will appear here \n \n }\n \n \n }\n \n {\n tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.PLANNED && !selectedRoute.code ? null : isListView ? getAllSelectedConsignments().length ?\n \n \n \n \n \n \n \n \n {viewMode ? location.state.route && location.state.route.hubName : draftRoute.route && draftRoute.route.hubName} \n \n \n {getListViewTimelineItems()}\n \n \n : null :\n \n toggleListView('map')} item>\n \n Map \n \n \n toggleListView('list')} item>\n \n List \n \n \n \n \n {\n !viewMode ?\n \n \n {\n !isListView &&\n <>\n \n \n \n }\n {\n tabValue === AppConstants.PLANNING_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n editMode ?\n <>\n \n \n \n :\n \n :\n \n }\n \n \n : null\n }\n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default CreateRoute;","import { createStyles, makeStyles, StepConnector, Theme, withStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const StepperTimelineConnector = withStyles({\n alternativeLabel: {\n top: 28,\n left: 'calc(-50% + 9px)',\n right: 'calc(50% + 9px)'\n },\n active: {\n '& $line': {\n borderColor: COLORS.SECONDARY_DARK,\n },\n },\n line: {\n borderColor: COLORS.SECONDARY_DARK,\n borderTopWidth: 4,\n borderRadius: 100,\n },\n})(StepConnector);\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n '& .padding-2': {\n padding: theme.spacing(2)\n }\n },\n statusHeaderContainer: {\n alignItems: \"center\",\n paddingLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"10px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 8,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.CREAM_CAN': {\n backgroundColor: COLORS.CREAM_CAN\n },\n '&.VISTA_BLUE': {\n backgroundColor: COLORS.VISTA_BLUE\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.SEA_GREEN\n },\n '&.GOLDEN_BELL': {\n backgroundColor: COLORS.GOLDEN_BELL\n },\n '&.SCAMPI': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.BLUE': {\n backgroundColor: COLORS.PRIMARY_MAIN\n },\n '&.SEA_GREEN2': {\n backgroundColor: COLORS.SEA_GREEN2\n },\n '&.LUCKY': {\n backgroundColor: COLORS.LUCKY\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n },\n '&.JUNGLE_GREEN': {\n backgroundColor: COLORS.JUNGLE_GREEN\n },\n '&.BLACK': {\n backgroundColor: COLORS.BLACK\n },\n '&.TROPICAL_BLUE': {\n backgroundColor: COLORS.TROPICAL_BLUE,\n color: COLORS.ASTRAL\n },\n '&.CATSKILL_WHITE': {\n backgroundColor: COLORS.CATSKILL_WHITE,\n color: COLORS.ASTRAL\n },\n '&.BLUE_HAZE': {\n backgroundColor: COLORS.BLUE_HAZE,\n color: COLORS.SCAMPI\n },\n '&.BARLEY_WHITE': {\n backgroundColor: COLORS.BARLEY_WHITE,\n color: COLORS.OLD_GOLD\n },\n '&.DOUBLE_PEARL_LUSTA': {\n backgroundColor: COLORS.DOUBLE_PEARL_LUSTA,\n color: COLORS.PIMPKIN_SKIN\n },\n '&.JAGGED_ICE': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.BLUE_STONE\n },\n '&.TARA': {\n backgroundColor: COLORS.TARA,\n color: COLORS.OCEAN_GREEN\n },\n '&.JAGGED_ICE_PREPARED': {\n backgroundColor: COLORS.JAGGED_ICE,\n color: COLORS.JUNGLE_GREEN\n },\n '&.ALTO': {\n backgroundColor: COLORS.ALTO,\n color: COLORS.DUSTY_GRAY_LIGHT\n },\n }\n },\n container: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n height: \"100%\",\n '& .createRtItem': {\n width: '100%',\n '&.heading': {\n paddingBottom: theme.spacing(3),\n '& .headingContainer': {\n alignItems: \"center\"\n },\n '& .editIcon': {\n width: 22,\n height: 22,\n marginLeft: theme.spacing(1),\n cursor: \"pointer\"\n },\n '& .headingTitle': {\n fontSize: 24,\n color: COLORS.BLACK,\n fontWeight: 600\n }\n },\n '&.content': {\n height: \"calc(100vh - 176px)\"\n }\n }\n },\n createRtContentContainer: {\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n boxShadow: `0px 1px 4px ${COLORS.LIGHT_BLACK_SHADOW}`,\n borderRadius: theme.spacing(1),\n height: \"100%\",\n '&.left': {\n width: 500,\n minWidth: 500,\n marginRight: theme.spacing(3),\n '& .consignmentsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentItem': {\n '& .headerSectionContainer': {\n flexDirection: \"column\",\n padding: theme.spacing(2, 2, 1, 2),\n '&.viewMode': {\n borderBottom: `1px solid ${theme.palette.secondary.dark}`\n },\n '& .searchTextBox': {\n '& .MuiOutlinedInput-root': {\n width: 210,\n }\n },\n '& .MuiOutlinedInput-root': {\n width: 145,\n minWidth: 145,\n height: 24,\n borderRadius: theme.spacing(.5)\n },\n '& .MuiOutlinedInput-input': {\n fontSize: 10,\n padding: 0,\n paddingLeft: theme.spacing(.5)\n },\n '& .MuiSelect-iconOutlined': {\n right: 0\n },\n '& .MuiSelect-root': {\n '& .MuiChip-root': {\n fontSize: 10,\n height: 15\n }\n },\n '& .headerContainer': {\n alignItems: \"center\",\n paddingBottom: theme.spacing(1.5),\n '& .headerItem': {\n '&.heading': {\n flexGrow: 1,\n '& .refreshIcon': {\n width: 16,\n height: 16,\n cursor: \"pointer\",\n marginLeft: theme.spacing(0.5)\n },\n '& p': {\n fontSize: 16,\n fontWeight: 600\n }\n },\n '&.icons': {\n display: \"flex\",\n alignItems: \"center\",\n '& .MuiOutlinedInput-adornedEnd': {\n paddingRight: 0,\n '& .MuiSvgIcon-root': {\n padding: theme.spacing(.25)\n }\n },\n '& .MuiInputAdornment-positionEnd': {\n marginLeft: 0\n },\n '& .MuiIconButton-sizeSmall': {\n padding: 0,\n '&.MuiIconButton-edgeEnd': {\n marginRight: 0\n }\n },\n '& .MuiSvgIcon-root': {\n width: 19,\n height: 19\n },\n '& .icon': {\n padding: theme.spacing(0.5)\n }\n }\n }\n },\n '& .filtersContainer': {\n '& .filterItem': {\n paddingRight: theme.spacing(1),\n '&:last-child': {\n paddingRight: 0\n },\n '&.slot': {\n flexGrow: 1\n }\n }\n }\n },\n '&.content': {\n height: \"calc(100% - 80px)\",\n '& .contentContainer': {\n position: \"relative\",\n height: \"100%\"\n },\n '& .hubLabel': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(8.5),\n '&.isRoute': {\n right: theme.spacing(2)\n },\n '& .hubLabelContainer': {\n alignItems: \"center\",\n height: 21,\n '& .hubLabelText': {\n fontSize: 12,\n fontWeight: 600,\n maxWidth: 200,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n '& .label': {\n fontWeight: 500,\n paddingRight: theme.spacing(0.5)\n }\n }\n }\n },\n '& .toggleAll': {\n position: \"absolute\",\n top: theme.spacing(1),\n right: theme.spacing(2.25),\n cursor: \"pointer\",\n userSelect: \"none\",\n '& .toggleAllContainer': {\n alignItems: \"center\",\n '& .toggleItem': {\n paddingLeft: theme.spacing(0.5),\n '&.iconItem': {\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.expanded': {\n transform: \"rotate(180deg)\"\n }\n },\n '& .toggleText': {\n fontSize: 14,\n fontWeight: 600\n },\n '& .toggleIcon': {\n width: 21,\n height: 21,\n verticalAlign: \"bottom\"\n }\n }\n }\n },\n '& .slotContentContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '&.viewMode': {\n overflow: \"auto\",\n paddingBottom: theme.spacing(2),\n '& .slotItemContainer': {\n paddingLeft: theme.spacing(2)\n }\n },\n '& .slotItemContainer': {\n height: 80,\n alignItems: \"flex-start\",\n padding: theme.spacing(1, 2, 1, 6),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n flexWrap: \"nowrap\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n borderLeft: `3px solid ${theme.palette.primary.main}`\n },\n '&.drafted': {\n color: COLORS.GRAY_DARK,\n paddingLeft: theme.spacing(3.5)\n },\n '&.terminal': {\n color: COLORS.GRAY_DARK,\n borderColor: COLORS.GRAY_DARK\n },\n '& .slotContentItem': {\n '&.checkbox': {\n '& .checkboxContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .lockIcon': {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1)\n }\n },\n paddingRight: theme.spacing(1.5)\n },\n '&.consignmentDetails': {\n flexGrow: 1,\n height: \"100%\",\n '& .consignmentDetailsContainer': {\n justifyContent: \"space-between\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailsItem': {\n '& .consignmentHeader': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n overflow: \"hidden\",\n '& .consignmentHeaderItem': {\n '&.details': {\n flexGrow: 1,\n paddingTop: theme.spacing(0.5)\n },\n '& .headerDetailsContainer': {\n flexWrap: \"nowrap\",\n '& .itemContainer': {\n flexWrap: \"nowrap\"\n }\n }\n }\n },\n '& .headingContainer': {\n alignItems: \"center\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .heading': {\n fontSize: 12,\n fontWeight: 600,\n cursor: \"pointer\"\n },\n },\n '& .seqNoContainer': {\n backgroundColor: COLORS.ALERT_ORANGE,\n borderRadius: 2,\n '& .seqNo': {\n fontSize: 10,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n lineHeight: '16px',\n padding: theme.spacing(0, 1)\n }\n },\n '& .count': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n padding: theme.spacing(0, 0.75)\n },\n '& .icon': {\n width: 16,\n height: 16\n },\n '&.desc': {\n paddingTop: theme.spacing(1)\n },\n '& .descContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .location': {\n width: 356\n },\n '& .itemContainer': {\n alignItems: \"center\",\n paddingRight: theme.spacing(2.5),\n flexWrap: \"nowrap\",\n '& .locDesc': {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\"\n }\n }\n }\n }\n },\n }\n }\n }\n },\n '& .MuiTabs-root': {\n padding: theme.spacing(0, 2),\n minHeight: 42,\n borderBottom: `1px solid ${theme.palette.secondary.main}`\n },\n '& .tabPanel': {\n padding: 0,\n height: 'calc(100% - 42px)',\n overflow: \"auto\",\n '& .tabPanelContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .delSlotContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n },\n '& .highlightText': {\n backgroundColor: COLORS.SUCCESS_GREEN\n },\n '& .accordionRoot': {\n boxShadow: \"none\",\n margin: 0,\n '&::before': {\n opacity: 0\n }\n },\n '& .accordianSummary': {\n border: \"none\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '&.delArea': {\n minHeight: 46,\n height: 46,\n '& .areaHeaderContainer': {\n alignItems: \"center\",\n '& .areaHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT\n }\n }\n }\n }\n },\n '&.delSlot': {\n minHeight: 32,\n height: 32,\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n '& .slotHeaderContainer': {\n alignItems: \"center\",\n '& .slotHeaderItem': {\n paddingRight: theme.spacing(1),\n '& .itemContainer': {\n alignItems: \"center\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\"\n },\n '& .heading': {\n fontSize: 12,\n fontWeight: 500,\n paddingLeft: theme.spacing(1.5)\n }\n }\n }\n }\n }\n },\n '& .accordianDetails': {\n padding: 0,\n '&.routes': {\n '& .slotItemContainer': {\n height: 56\n }\n }\n },\n '&.planned': {\n paddingTop: theme.spacing(1.5),\n '& .heading': {\n paddingLeft: '0px !important'\n },\n '& .accordianDetails': {\n '& .slotItemContainer': {\n padding: '10px 8px 10px 16px !important',\n cursor: 'pointer'\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.right': {\n flexGrow: 1\n },\n '& .detailsContainer': {\n flexDirection: \"column\",\n height: \"100%\",\n flexWrap: \"nowrap\",\n '& .detailItem': {\n '&.routeDetails': {\n backgroundColor: COLORS.MINE_SHAFT_LIGHT,\n padding: theme.spacing(2),\n '&.viewMode': {\n '& .routeDetailsContainer .routeDetailsItem.basicDesc': {\n paddingBottom: 0\n }\n },\n '& .routeDetailsContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .routeDetailsItem': {\n '&.header': {\n '& .routeIdHeaderContainer': {\n alignItems: \"center\",\n justifyContent: \"space-between\",\n '& .ddnsItem': {\n '& .MuiFormControl-root': {\n paddingRight: theme.spacing(1.5),\n '&:last-child': {\n paddingRight: 0\n }\n },\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n }\n }\n },\n paddingBottom: theme.spacing(2)\n },\n '& .heading': {\n fontSize: 16,\n fontWeight: 600,\n color: COLORS.BLACK\n },\n '&.basicDesc': {\n paddingBottom: theme.spacing(3.75)\n },\n '&.noSelectedArea': {\n padding: theme.spacing(3),\n backgroundColor: COLORS.WHITE,\n border: `1px dashed ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n '& p': {\n textAlign: \"center\",\n fontSize: 14,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '&.timeline': {\n alignSelf: \"flex-start\",\n height: 55\n },\n '&.timelineWarning': {\n paddingTop: theme.spacing(1.5),\n '& .warningContainer': {\n alignItems: \"center\",\n '& .warningItem': {\n paddingRight: theme.spacing(1),\n '& p': {\n fontSize: 11,\n fontWeight: 500,\n color: COLORS.DOVE_GRAY\n }\n },\n '& .warningIcon': {\n width: 20,\n height: 20,\n verticalAlign: \"middle\",\n\n }\n },\n\n },\n '& .basicDescContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .basicItem': {\n paddingBottom: theme.spacing(2),\n '&:last-child': {\n paddingBottom: 0\n },\n '&.driver': {\n paddingRight: theme.spacing(2)\n },\n '&.descriptions': {\n flexGrow: 1\n },\n '& .descCommonContainer': {\n '& .commonItem': {\n flex: \"1 0 0\",\n '& .MuiOutlinedInput-root': {\n backgroundColor: COLORS.WHITE\n },\n '&:last-child': {\n flex: \"0.5 0 0\"\n },\n '& .descContainer': {\n flexDirection: \"column\",\n '& .capacityBreachContainer': {\n alignItems: \"center\",\n '& .infoErrorIcon': {\n width: 16,\n height: 16,\n marginLeft: theme.spacing(1)\n }\n },\n '& p': {\n fontSize: 12,\n fontWeight: 500,\n lineHeight: \"18px\"\n },\n '& .value': {\n alignSelf: \"flex-start\",\n '& p': {\n fontWeight: 600\n }\n }\n }\n }\n }\n }\n }\n }\n }\n },\n '&.mapZone': {\n flexGrow: 1,\n backgroundColor: theme.palette.secondary.dark,\n position: \"relative\",\n overflow: \"auto\",\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n '& .listViewTimelineContent': {\n backgroundColor: COLORS.WHITE,\n padding: theme.spacing(2, 3),\n height: \"100%\",\n overflow: \"auto\"\n },\n '& .mapSwitchBtnContainer': {\n position: \"absolute\",\n alignItems: \"center\",\n width: 110,\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n backgroundColor: COLORS.WHITE,\n top: theme.spacing(1),\n right: theme.spacing(6.5),\n flexWrap: \"nowrap\",\n '& .switchBtnItem': {\n cursor: \"pointer\",\n '&.selected': {\n backgroundColor: COLORS.MADISON_LIGHT,\n '&.mapView': {\n borderTopLeftRadius: theme.spacing(1),\n borderBottomLeftRadius: theme.spacing(1),\n '& path': {\n stroke: theme.palette.primary.main\n }\n },\n '&.listView': {\n borderTopRightRadius: theme.spacing(1),\n borderBottomRightRadius: theme.spacing(1),\n '& path': {\n fill: theme.palette.primary.main\n }\n },\n '& .title': {\n color: theme.palette.primary.main,\n fontWeight: 600\n }\n },\n '& .switchBtnItemContainer': {\n flexDirection: \"column\",\n alignItems: \"center\",\n '& .title': {\n fontSize: 12,\n fontWeight: 500,\n paddingBottom: theme.spacing(0.5)\n }\n },\n '& .switchBtnIcon': {\n width: 54,\n height: 40,\n verticalAlign: \"middle\",\n padding: theme.spacing(0, 2),\n backgroundColor: \"transparent\"\n },\n }\n\n }\n },\n '&.buttons': {\n '& .buttonsContainer': {\n padding: theme.spacing(2),\n justifyContent: \"flex-end\",\n '& .btn': {\n marginRight: theme.spacing(1.5),\n '&:last-child': {\n marginRight: 0\n }\n },\n '& .refreshMapBtn': {\n marginRight: \"auto\"\n },\n '& .saveBtn': {\n padding: theme.spacing(1, 5.5)\n }\n }\n },\n '&.planned': {\n '& .routeDetailsItem': {\n '&.basicDesc': {\n paddingBottom: '0 !important'\n }\n }\n },\n }\n }\n }\n },\n timelineStepper: {\n padding: 0,\n alignItems: \"center\",\n backgroundColor: 'transparent',\n '& .timelineStep': {\n paddingLeft: 16,\n paddingRight: 16,\n '&.isDragging': {\n '& .MuiStepConnector-alternativeLabel': {\n display: \"none\"\n }\n },\n '&.first': {\n paddingLeft: 0\n }\n },\n '& .MuiStepLabel-root': {\n flexDirection: 'column-reverse',\n '& .MuiStepLabel-labelContainer': {\n '& .MuiStepLabel-alternativeLabel': {\n whiteSpace: \"nowrap\",\n width: 32,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\"\n }\n },\n '&.MuiStepLabel-alternativeLabel': {\n flexDirection: 'column-reverse'\n }\n },\n '& .MuiStepLabel-iconContainer': {\n paddingRight: 0\n },\n '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {\n marginTop: 0\n },\n '& .MuiStepLabel-label': {\n fontSize: 10,\n color: '#252525',\n paddingBottom: 6,\n textAlign: \"center\"\n }\n },\n listViewTimeline: {\n padding: \"0 !important\",\n margin: 0,\n '& .timelineItem': {\n minHeight: 64,\n '&.first': {\n minHeight: 62,\n '& .MuiTimelineSeparator-root': {\n padding: 0\n }\n },\n '& .MuiTimelineSeparator-root': {\n paddingLeft: 3\n },\n '&:last-child': {\n minHeight: \"auto\",\n '& .primaryConnector': {\n display: \"none\"\n },\n },\n '&:before': {\n content: \"none\"\n },\n '& .timelineDot': {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n '&.listItem': {\n paddingTop: 9\n },\n '& .timelineIcon': {\n padding: 0,\n },\n '& .countIcon': {\n width: 24,\n height: 24,\n borderRadius: \"50%\",\n backgroundColor: COLORS.MAROON,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n '& .count': {\n fontSize: 10,\n fontWeight: 600,\n lineHeight: \"12px\",\n color: COLORS.WHITE\n }\n },\n '& .areaIcon': {\n width: 32,\n height: 32\n }\n },\n '& .primaryConnector': {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`\n },\n '& .timelineContent': {\n padding: 0,\n paddingLeft: theme.spacing(1.5),\n '& .contentContainer': {\n alignItems: \"center\",\n border: `1px solid ${theme.palette.secondary.dark}`,\n borderRadius: theme.spacing(1),\n flexWrap: \"nowrap\",\n marginBottom: theme.spacing(2),\n '& .listViewContentItem': {\n '&.itemHeading': {\n padding: theme.spacing(0, 2),\n cursor: \"pointer\"\n },\n '& .id': {\n fontSize: 12,\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n whiteSpace: \"nowrap\"\n },\n '&.itemDetails': {\n flexGrow: 1,\n padding: theme.spacing(1, 1.5, 1)\n },\n '& .itemDetailsContainer': {\n flexWrap: \"nowrap\",\n alignItems: \"center\",\n '& .detailsItem': {\n paddingRight: theme.spacing(1.5)\n },\n '& .itemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\",\n '& .icon': {\n padding: theme.spacing(0.5)\n },\n '& .count': {\n fontSize: 10,\n fontWeight: 500,\n lineHeight: \"15px\",\n whiteSpace: \"nowrap\",\n '&.address': {\n whiteSpace: \"normal\",\n }\n }\n }\n }\n }\n },\n '& .titleHeading': {\n fontSize: 10,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.BLACK,\n paddingTop: theme.spacing(1)\n }\n }\n }\n },\n confirmDialogButtonsContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(8.25),\n '& .dialogBtn': {\n '&.secondary': {\n paddingLeft: theme.spacing(8),\n paddingRight: theme.spacing(8),\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n paddingLeft: theme.spacing(7.25),\n paddingRight: theme.spacing(7.25),\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '& p': {\n textAlign: \"center\",\n lineHeight: 1.2,\n '&.alignLeft': {\n textAlign: \"left\",\n }\n },\n '&.heading': {\n padding: theme.spacing(0, 15.75, 5),\n '& p': {\n fontSize: 24,\n fontWeight: 600\n }\n },\n '&.desc': {\n padding: theme.spacing(0, 2.5),\n '& p': {\n fontSize: 18,\n fontWeight: 400,\n '& .count': {\n fontWeight: 600\n }\n }\n }\n }\n },\n capacityBreachDialogTitle: {\n fontSize: 20,\n fontWeight: 600,\n paddingLeft: theme.spacing(2.5)\n },\n capacityBreachDialogButtonsContainer: {\n justifyContent: \"flex-end\",\n paddingBottom: theme.spacing(3.75),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n confirmWithTitleDialogPaperPropsRoot: {\n width: 600,\n height: 240,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n confirmDialogPaperPropsRoot: {\n width: 600,\n height: 350,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n selectMenuPropsList: {\n '& .MuiListItem-root': {\n paddingLeft: theme.spacing(1.5),\n paddingRight: theme.spacing(1.5),\n whiteSpace: \"normal\",\n '& .MuiListItemText-primary': {\n fontSize: 10\n }\n },\n '& .MuiCheckbox-root': {\n backgroundSize: \"16px 16px\",\n marginRight: theme.spacing(0.75)\n }\n },\n selectMenuPaperProps: {\n maxHeight: 200,\n width: 145,\n border: `1px solid ${COLORS.BLACK_INPUT_BORDER}`,\n borderRadius: theme.spacing(1),\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n overflow: \"auto\",\n boxShadow: \"none\"\n }\n })\n);\n","import moment from \"moment\";\nimport { RowData } from \"../../common/GridWrapper/DataTable\";\nimport AppConstants from \"../../constants\";\nimport { enumerateDaysBetweenDates, fixDecimals, getUniqueValues, getValueFromArray, localTimeString } from \"../../utils/helpers.utils\";\nimport { isNumeric, transformIntoObj, transformIntoObjArrays } from \"../../utils/helpers.utils\";\n\nexport interface MetaData {\n paymentType: string;\n totalAmount: string;\n transactionDate: Date;\n amountToCollect: string;\n collectedAmount: string;\n currency: string;\n category: string;\n deliveryType: string;\n modeOfCollection: string;\n invoiceNumber: string;\n internalExternal: string;\n origin: string;\n status: string;\n deliveryStatus: string;\n routeId: string;\n routeName: string;\n routeStatus: string;\n numberOfItems: number;\n lastStatusUpdatedTime: string;\n}\n\nexport interface Name {\n ar: string;\n en: string;\n}\n\nexport interface Product {\n sku: string;\n entryNumber: string;\n hasRejectedProducts: boolean;\n name: Name;\n quantity: string;\n acceptedQty: string\n unitPrice: string;\n imgUrl: string;\n vatPercentage: string;\n uom: string;\n orderedBarcode: string;\n associatedBarcodes: string[];\n substitution: boolean;\n}\n\nexport interface Address {\n area: string;\n landmark: string;\n building: string;\n apartment: string;\n zoneNumber: string;\n makani: string;\n streetNumber: string;\n streetName: string;\n city: string;\n postalCode: string;\n countryName: string;\n countryIsoCode: string;\n longitude: string;\n latitude: string;\n}\n\nexport interface ContactInfo {\n name: string;\n phone: string;\n altphone: string;\n email: string;\n address: Address;\n}\n\nexport interface PosInformation {\n store: string;\n storeName: string;\n contactInfo: ContactInfo;\n}\n\nexport interface DeliverySlot {\n startTime: Date;\n endTime: Date;\n}\n\nexport interface CustomerContactInfo {\n name: string;\n phone: string;\n email: string;\n address: Address;\n}\n\nexport interface DeliveryInformation {\n deliveryInstructions: string;\n deliveryCost: string;\n carrier: string;\n carrierTrackingId: string;\n shipmentSize: string;\n totalCratesCount: number;\n deliverySlot: DeliverySlot;\n customerContactInfo: CustomerContactInfo;\n driver: Driver;\n helper: Driver;\n vehicle: Vehicle;\n transitTime: string;\n actualTransitTime: string;\n dynamicTransitTime: string;\n estimatedTransitTime: string;\n}\n\nexport interface PickUpContactInfo {\n companyName: string;\n name: string;\n phone: string;\n email: string;\n address: Address;\n}\n\nexport interface PickupSlot {\n startTime: Date;\n endTime: Date;\n}\n\nexport interface PickUpInformation {\n pickUpContactInfo: PickUpContactInfo;\n pickupSlot: PickupSlot;\n}\n\nexport interface Reason {\n deliveryStatus: string;\n reasonCode: string;\n reasonDescription: string;\n}\n\nexport interface Order {\n id: string;\n orderCode: string,\n consignmentCode: string,\n hasRejectedProducts: boolean,\n retryCount: number,\n metadata: MetaData;\n products: Product[];\n reason: Reason;\n posInformation: PosInformation;\n deliveryInformation: DeliveryInformation;\n pickUpInformation: PickUpInformation;\n statuses: Statuses[];\n}\n\nexport interface CountryDetails {\n countryCode: string;\n countryName: string;\n}\n\nexport interface AssignedStatus {\n vehicleAssigned: boolean;\n helperAssigned: boolean;\n driverAssigned: boolean;\n consignmentsAvailable: boolean;\n}\n\nexport interface Vehicle {\n brand: string;\n country: string;\n crateCapacity: number;\n fleetId: string;\n id: string;\n orderCapacity: number;\n type: string;\n name: string;\n}\n\nexport interface Driver {\n countryIsoCode: string;\n countryName: string;\n licenseNumber: number;\n id: string;\n name: string;\n type: string;\n}\n\nexport interface Route {\n id: string;\n routeId: string;\n creationTime: string;\n plannedDate: string;\n createdBy: string;\n carrier: string;\n deliveryProposition: string;\n deliveryArea: string[];\n deliverySlot: string[];\n countryDetails: CountryDetails;\n totalConsignment: number;\n totalCrates: number;\n transitTime: number;\n displayRouteStatus: string;\n hubCode: string;\n hubName: string;\n status: string;\n assignedStatus: AssignedStatus;\n assignedVehicle: Vehicle;\n assignee: Driver;\n helper: Driver;\n actualTransitTime: string;\n}\n\nexport interface Sort {\n sorted: boolean;\n unsorted: boolean;\n empty: boolean;\n}\n\nexport interface Pageable {\n sort: Sort;\n offset: number;\n requestContinuation: string;\n pageNumber: number;\n pageSize: number;\n paged: boolean;\n unpaged: boolean;\n}\n\nexport interface Sort2 {\n sorted: boolean;\n unsorted: boolean;\n empty: boolean;\n}\n\nexport interface CarrefourDeliveryOrdersDataResponse {\n pageNumber: number;\n totalElements: number;\n totalPages: number;\n continuationToken?: string;\n elements: Order[];\n}\n\nexport interface CarrefourDeliveryRoutesDataResponse {\n pageNumber: number;\n totalElements: number;\n totalPages: number;\n continuationToken?: string;\n elements: Route[];\n}\nexport interface Statuses {\n statusCode: string;\n statusName: string;\n statusDate: string;\n reason: Reason;\n}\n\nexport interface SubsProducts {\n sku: string;\n name: Name;\n quantity: string;\n shippedQty: string;\n rejectedQty: string\n unitPrice: string;\n vatPercentage: string;\n uom: string;\n reason: Reason;\n}\nexport interface ProductsDataTransform {\n sku: string;\n name: Name;\n quantity: string;\n shippedQty: string;\n rejectedQty: string;\n unitPrice: string;\n vatPercentage: string;\n uom: string;\n reason: Reason;\n substitution: boolean;\n substitutedProducts: SubsProducts[];\n}\n\nexport interface CarrefourProducts {\n consignmentCode: string;\n products: ProductsDataTransform[]\n}\n\n\nexport const CarrefourDeliveryOrdersDataTransform = (response: CarrefourDeliveryOrdersDataResponse): any[] => {\n const transformedArray: any[] = [];\n response.elements.forEach((order: Order) => {\n const {\n id,\n metadata,\n posInformation: { store, storeName },\n deliveryInformation,\n orderCode,\n products,\n reason,\n consignmentCode,\n statuses,\n } = order;\n // TODO: map/add actual objects too for drilling down content or store in state\n const deliveryDate = moment(deliveryInformation.deliverySlot.startTime, AppConstants.DATE_FORMAT_BACKEND);\n const startTime = new Date(deliveryInformation.deliverySlot.startTime);\n const endTime = new Date(deliveryInformation.deliverySlot.endTime);\n const customerContactInfo = deliveryInformation.customerContactInfo || {\n address: {}\n };\n const transactionDate = moment(metadata.transactionDate, AppConstants.DATE_FORMAT_BACKEND);\n const statusDate = metadata.lastStatusUpdatedTime ? moment(metadata.lastStatusUpdatedTime, AppConstants.DATE_FORMAT_BACKEND).format(AppConstants.TIMESTAMP) : statuses && statuses.length ? moment(statuses[0].statusDate, AppConstants.DATE_FORMAT_BACKEND).format(AppConstants.TIMESTAMP) : \"\";\n\n transformedArray.push({\n id: id,\n hubCode: store,\n hubName: storeName,\n deliveryArea: customerContactInfo.address ? customerContactInfo.address.area : \"\",\n consignmentId: consignmentCode,\n type: metadata.category,\n deliveryDate: deliveryDate.format(AppConstants.DATE_FORMAT),\n startEndTime: `${localTimeString(startTime)} - ${localTimeString(endTime)}`,\n deliveryStatus: metadata.deliveryStatus,\n statusDate: statusDate,\n products: products && products.length ? products.length : 0,\n numberOfItems: metadata.numberOfItems && metadata.numberOfItems > 0 ? metadata.numberOfItems : products && products.length ? products.length : 0,\n crates: deliveryInformation.totalCratesCount,\n orderId: orderCode,\n transactionDate: transactionDate.format(AppConstants.DATE_FORMAT),\n customerName: customerContactInfo.name,\n customerEmail: customerContactInfo.email,\n customerMobileNumber: customerContactInfo.phone,\n deliveryStreetAddress: getAddressInfo(customerContactInfo.address),\n landmark: customerContactInfo.address.landmark,\n paymentType: metadata.paymentType,\n totalAmount: fixDecimals(2, metadata.totalAmount ? metadata.totalAmount.toString() : \"\"),\n codAmount: fixDecimals(2, metadata.amountToCollect ? metadata.amountToCollect.toString() : \"\"),\n collectedAmount: metadata.collectedAmount ? parseFloat(metadata.collectedAmount.toString()).toFixed(2) : \"0.00\",\n carrier: deliveryInformation.carrier,\n deliveryProposition: metadata.deliveryType,\n routeId: metadata.routeName,\n routeStatus: metadata.routeStatus,\n driver: deliveryInformation.driver ? deliveryInformation.driver.name : \"\",\n helper: deliveryInformation.helper ? deliveryInformation.helper.name : \"\",\n vehicle: deliveryInformation.vehicle ? deliveryInformation.vehicle.name : \"\",\n plannedDuration: deliveryInformation.dynamicTransitTime ? deliveryInformation.dynamicTransitTime : deliveryInformation.estimatedTransitTime,\n actualDuration: deliveryInformation.actualTransitTime ? deliveryInformation.actualTransitTime : \"\",\n deliveryFailedReason: reason ? reason.reasonDescription : statuses && statuses.length && statuses[0].reason ? statuses[0].reason.reasonDescription : \"\",\n });\n });\n return [...transformedArray];\n};\n\nexport const CarrefourDeliveryRoutesDataTransform = (response: CarrefourDeliveryRoutesDataResponse): any[] => {\n const transformedArray: any[] = [];\n response.elements.forEach((order: Route) => {\n const {\n id,\n routeId,\n hubCode,\n hubName,\n carrier,\n deliveryProposition,\n transitTime,\n deliveryArea,\n deliverySlot,\n plannedDate,\n status,\n totalConsignment,\n assignedVehicle,\n assignee,\n helper,\n createdBy,\n totalCrates,\n actualTransitTime\n } = order;\n // TODO: map/add actual objects too for drilling down content or store in state\n const deliveryDate = moment(plannedDate, AppConstants.DATE_FORMAT_BACKEND);\n transformedArray.push({\n id: id,\n hubCode: hubCode,\n hubName: hubName,\n deliveryArea: deliveryArea && deliveryArea.length ? deliveryArea : [],\n deliveryDate: deliveryDate.format(AppConstants.DATE_FORMAT),\n deliverySlot: deliverySlot && deliverySlot.length ? deliverySlot : [],\n consignments: totalConsignment,\n crates: totalCrates,\n carrier: carrier,\n deliveryProposition: deliveryProposition,\n routeId: routeId,\n routeStatus: status,\n driver: assignee ? assignee.name : \"\",\n vehicle: assignedVehicle ? assignedVehicle.name : \"\",\n helper: helper ? helper.name : \"\",\n createdBy: createdBy,\n plannedDuration: transitTime,\n actualDuration: actualTransitTime,\n actions: order\n });\n });\n return [...transformedArray];\n};\n\nexport const rejectionDataTransform = (response: CarrefourProducts): any[] => {\n const transformedArray: any[] = [];\n response && response.products && response.products.forEach((product: ProductsDataTransform) => {\n const {\n sku,\n shippedQty,\n rejectedQty,\n name,\n unitPrice,\n } = product;\n let qty = isNumeric(product.shippedQty) ? product.shippedQty : product.quantity;\n let isSubstitution = product.hasOwnProperty('substitutedProducts');\n let isScalable = product.uom?.toLowerCase() === 'grams';\n let totalQty = isScalable ? 1 : isSubstitution ? product.substitutedProducts[0].shippedQty : +qty;\n const rejectedItems = isSubstitution\n ? +product.substitutedProducts[0].rejectedQty || 0\n : +product.rejectedQty || 0;\n const initialQty = isScalable ? rejectedItems > 0 ? 1 : 0 : rejectedItems;\n\n let newObj: any = [];\n let selectRejected = [];\n for (let i = 0; i <= totalQty; i++) {\n newObj = transformIntoObjArrays(i, totalQty);\n }\n if (initialQty === 0) {\n selectRejected = transformIntoObj(initialQty);\n } else {\n selectRejected = transformIntoObj(initialQty);\n }\n let deliveryReason = [];\n if (product.reason) {\n deliveryReason.push({\n name: product.reason.reasonDescription,\n value: product.reason.reasonCode\n });\n } else {\n if (product.substitutedProducts) {\n product.substitutedProducts.forEach((subProd: any) => {\n if (subProd.reason) {\n deliveryReason.push({\n name: subProd.reason.reasonDescription,\n value: subProd.reason.reasonCode\n });\n }\n });\n }\n }\n\n transformedArray.push({\n id: sku,\n name: name,\n shippedQty: shippedQty || 0,\n rejectedQty: rejectedQty || 0,\n unitPrice: unitPrice,\n totalQty: totalQty,\n rejectedQtyList: newObj,\n selectedRejectedQty: selectRejected,\n itemDeliveryReason: deliveryReason,\n substitutedProducts: product.substitutedProducts\n });\n });\n return [...transformedArray];\n};\n\nexport const getConsignmentStatusField = (fieldName: string, statusCode: string) => {\n const statuses: any = AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CONSIGNMENTS_DATA.STATUSES;\n return statusCode && statuses[statusCode] ? statuses[statusCode][fieldName] : \"\";\n}\n\nexport const getRouteStatusField = (fieldName: string, statusCode: string) => {\n const statuses: any = AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.ROUTES_DATA.STATUSES;\n return statusCode && statuses[statusCode] ? statuses[statusCode][fieldName] : \"\";\n}\n\nexport const sortedCountryData = (\n columnName: string,\n isDescending: boolean\n) => (a: any, b: any) => {\n const aVal = isDescending ? a : b;\n const bVal = isDescending ? b : a;\n if (\n aVal[columnName].match(/^[0-9]+$/) &&\n bVal[columnName].match(/^[0-9]+$/)\n ) {\n return parseFloat(aVal[columnName]) - parseFloat(bVal[columnName]);\n } else {\n if (aVal[columnName] < bVal[columnName]) {\n return -1;\n } else if (aVal[columnName] > bVal[columnName]) {\n return 1;\n } else {\n return 0;\n }\n }\n};\n\nconst getFilterAttributeValue = (attrValue: any, noKey?: boolean) => {\n let currentValue = noKey ? attrValue : attrValue.map((item: any) => item.value);\n const selectAllIdx = currentValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = currentValue.indexOf(AppConstants.SELECT_NONE.value);\n if (selectAllIdx > -1) {\n currentValue = [];\n }\n if (selectNoneIdx > -1) {\n currentValue = [];\n }\n return currentValue;\n}\n\nexport const createFilterPayload = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n payload.attributes = [];\n if (payload.hub) {\n if (payload.hub.value) {\n let hubValue = payload.hub.value.map((item: any) => item.value);\n let hubNameValue = [];\n if (payload.hubName && payload.hubName.value.length) {\n hubNameValue = payload.hubName.value.map((item: any) => item.value);\n }\n hubValue = hubValue.concat(hubNameValue);\n const selectAllIdx = hubValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = hubValue.indexOf(AppConstants.SELECT_NONE.value);\n if (selectAllIdx > -1) {\n hubValue = [];\n }\n if (selectNoneIdx > -1) {\n hubValue = [];\n }\n payload.attributes.push({\n key: payload.hub.fieldName,\n value: getUniqueValues(hubValue)\n })\n delete payload.hub;\n delete payload.hubName;\n } else {\n payload.attributes.push({\n key: payload.hub.fieldName,\n value: []\n });\n delete payload.hub;\n delete payload.hubName;\n }\n }\n if (payload.deliveryArea) {\n let attrValue = [];\n if (payload.deliveryArea.value) {\n attrValue = getFilterAttributeValue(payload.deliveryArea.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryArea.fieldName,\n value: attrValue\n })\n delete payload.deliveryArea;\n }\n if (payload.orderType) {\n let attrValue = [];\n if (payload.orderType.value) {\n attrValue = getFilterAttributeValue(payload.orderType.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.orderType.fieldName,\n value: attrValue\n })\n delete payload.orderType;\n }\n if (payload.deliveryStatus) {\n let attrValue = [];\n if (payload.deliveryStatus.value) {\n attrValue = getFilterAttributeValue(payload.deliveryStatus.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryStatus.fieldName,\n value: attrValue\n })\n delete payload.deliveryStatus;\n }\n if (payload.paymentType) {\n let attrValue = [];\n if (payload.paymentType.value) {\n attrValue = getFilterAttributeValue(payload.paymentType.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.paymentType.fieldName,\n value: attrValue\n })\n delete payload.paymentType;\n }\n if (payload.carrier) {\n let attrValue = [];\n if (payload.carrier.value) {\n attrValue = getFilterAttributeValue(payload.carrier.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.carrier.fieldName,\n value: attrValue\n })\n delete payload.carrier;\n }\n\n if (payload.deliveryProposition) {\n payload.attributes.push({\n key: payload.deliveryProposition.fieldName,\n value: [\"CHD\"]\n })\n delete payload.deliveryProposition;\n }\n\n if (payload.routeId) {\n let attrValue = [];\n if (payload.routeId.value) {\n attrValue = getFilterAttributeValue(payload.routeId.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.routeId.fieldName,\n value: attrValue\n })\n delete payload.routeId;\n }\n if (payload.routeStatus) {\n let attrValue = [];\n if (payload.routeStatus.value) {\n attrValue = getFilterAttributeValue(payload.routeStatus.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.routeStatus.fieldName,\n value: attrValue\n })\n delete payload.routeStatus;\n }\n if (payload.driver) {\n let attrValue = [];\n if (payload.driver.value) {\n attrValue = getFilterAttributeValue(payload.driver.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.driver.fieldName,\n value: attrValue\n })\n delete payload.driver;\n }\n if (payload.vehicle) {\n let attrValue = [];\n if (payload.vehicle.value) {\n attrValue = getFilterAttributeValue(payload.vehicle.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.vehicle.fieldName,\n value: attrValue\n })\n delete payload.vehicle;\n }\n if (payload.helper) {\n let attrValue = [];\n if (payload.helper.value) {\n attrValue = getFilterAttributeValue(payload.helper.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.helper.fieldName,\n value: attrValue\n })\n delete payload.helper;\n }\n if (payload.deliveryFailedReason) {\n let attrValue = [];\n if (payload.deliveryFailedReason.value) {\n attrValue = getFilterAttributeValue(payload.deliveryFailedReason.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.deliveryFailedReason.fieldName,\n value: attrValue\n })\n delete payload.deliveryFailedReason;\n }\n if (payload.createdBy) {\n let attrValue = [];\n if (payload.createdBy.value) {\n attrValue = getFilterAttributeValue(payload.createdBy.value);\n } else {\n attrValue = [];\n }\n payload.attributes.push({\n key: payload.createdBy.fieldName,\n value: attrValue\n })\n delete payload.createdBy;\n }\n if (payload.displayRouteStatus) {\n payload.attributes.push({\n key: payload.displayRouteStatus.fieldName,\n value: payload.displayRouteStatus.value || []\n })\n delete payload.displayRouteStatus;\n }\n if (payload.deliverySlot && payload.deliverySlot.value) {\n let delSlotValue = payload.deliverySlot.value.map((item: any) => item.value);\n let dateRange = [];\n const selectAllIdx = delSlotValue.indexOf(AppConstants.SELECT_ALL.value);\n if (payload.dateRange && payload.dateRange.value) {\n const allDates = enumerateDaysBetweenDates(payload.dateRange.value.startDate, payload.dateRange.value.endDate);\n if (selectAllIdx > -1 || !delSlotValue.length) {\n payload.isDateRange = true;\n dateRange.push({\n startTime: moment(payload.dateRange.value.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.dateRange.value.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n } else {\n payload.isDateRange = false;\n delSlotValue.forEach((slot: any) => {\n const splitSlot = slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n if (allDates.length) {\n allDates.forEach((date: string) => {\n dateRange.push({\n startTime: moment(date, AppConstants.DATE_FORMAT).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(date, AppConstants.DATE_FORMAT).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n })\n })\n }\n })\n }\n if (payload.reset) {\n delete payload.isDateRange;\n }\n }\n payload.dateRange = dateRange;\n delete payload.displayRouteStatus;\n delete payload.deliverySlot;\n delete payload.reset;\n }\n if (isLoadMore && data) {\n payload.pageNumber = data.pageNumber + 1 < data.totalPages ? data.pageNumber + 1 : payload.pageNumber;\n }\n if (data.continuationToken && payload.pageNumber) {\n payload.requestContinuationToken = data.continuationToken\n }\n payload.isCHD = true;\n return payload;\n};\n\nexport const createPayloadForExcelExport = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n let newPayload = createFilterPayload(payload, data, isLoadMore, isRoute);\n var orderFilterRequestDto = { orderFilterRequestDto: newPayload };\n return orderFilterRequestDto;\n};\n\nexport const createRoutesPayloadForExcelExport = (payload: any, data?: any, isLoadMore?: boolean, isRoute?: boolean) => {\n let newPayload = createFilterPayload(payload, data, isLoadMore, isRoute);\n var routeFilterRequestDto = { routeFilterRequestDto: newPayload };\n return routeFilterRequestDto;\n};\n\nexport const createCratesInfoPayload = (payload: any) => {\n if (payload) {\n let consignmentCode;\n let storeCode;\n if (payload.consignmentCode) {\n consignmentCode = payload.consignmentCode;\n }\n if (payload.posInformation) {\n storeCode = payload.posInformation.store\n };\n var consignmentCodePosCodeMap = {\n consignmentCodePosCodeMap: {\n [consignmentCode]: storeCode\n }\n }\n return consignmentCodePosCodeMap;\n }\n}\n\nexport const createDraftRoutePayload = (payload: any,) => {\n const routeId = sessionStorage.getItem('routeId');\n const consignments = JSON.parse(sessionStorage.getItem('extraConsignments') || '[]');\n let responsePayload: any;\n\n responsePayload = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n hubCode: payload.hubCode,\n hubName: payload.hubName,\n isCHD: true\n }\n\n if (payload.slotValue) {\n let dateRange = [];\n const selectAllIdx = payload.slotValue.indexOf(AppConstants.SELECT_ALL.value);\n const selectNoneIdx = payload.slotValue.indexOf(AppConstants.SELECT_NONE.value);\n if (payload.date) {\n const allDates = enumerateDaysBetweenDates(payload.date.startDate, payload.date.endDate);\n if (selectAllIdx > -1 || selectNoneIdx > -1 || !payload.slotValue.length) {\n responsePayload.isDateRange = true;\n dateRange.push({\n startTime: moment(payload.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n } else {\n responsePayload.isDateRange = false;\n payload.slotValue.forEach((slot: any) => {\n const splitSlot = slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n if (allDates.length) {\n allDates.forEach((date: string) => {\n dateRange.push({\n startTime: moment(date, AppConstants.DATE_FORMAT).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(date, AppConstants.DATE_FORMAT).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n })\n })\n }\n })\n }\n }\n responsePayload.timeSlot = dateRange;\n }\n if (payload.editMode) {\n responsePayload.editMode = true;\n }\n if (payload.statusValue) {\n responsePayload.deliveryStatuses = getFilterAttributeValue(payload.statusValue, true);\n }\n if (routeId) {\n if (!payload.editMode) {\n if (consignments.length) {\n responsePayload.route = {\n id: routeId\n }\n }\n } else {\n responsePayload.route = {\n id: routeId\n }\n }\n if (consignments.length) {\n responsePayload.consignmentIds = consignments;\n }\n }\n return responsePayload;\n}\n\nexport const getDiscardRoutePayload = (params: any) => {\n const routeId = sessionStorage.getItem('routeId');\n const consignments = JSON.parse(sessionStorage.getItem('extraConsignments') || '[]');\n const previousConsignments = params.previousCons;\n let responsePayload: any = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n routeId: routeId || \"\",\n previousConsignments: previousConsignments\n }\n if (consignments.length) {\n responsePayload.consignmentsAdded = consignments\n }\n return responsePayload;\n}\n\nexport const createPublishRoutesPayload = (routes: RowData[]) => {\n return routes.length ? {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n ids: routes.map((route: RowData) => route.id)\n } : null;\n}\n\nexport const createConsignmentReplanningPayload = (params: any) => {\n let payload: any = {\n consignmentId: params.id\n };\n if (params.selection === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CONSIGNMENTS_DATA.DEFAULT_REPLANNING_SELECTION) {\n payload.reScheduled = true;\n const splitSlot = params.slot.split('-');\n const startSlot = splitSlot[0].split(':');\n const endSlot = splitSlot[1].split(':');\n payload.timeSlot = {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT_UI).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT_UI).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n }\n } else {\n payload.reScheduled = false;\n payload.comments = params.commentsValue;\n payload.reason = params.reason ? {\n reasonCode: params.reason.reasonCode,\n reasonDescription: params.reason.reasonDescription,\n deliveryStatus: params.reason.deliveryStatus\n } : {}\n }\n return payload;\n}\n\nexport const createDeleteRoutePayload = (id: string) => {\n return id ? {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n id: id\n } : null;\n}\n\nexport const createRouteCreationPayload = (payload: any) => {\n let transitTime: any = calculateTransitTimeForConsignments(payload.mapRouteDirections, payload.consignments);\n let routePayload: any = {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n route: {\n id: payload.route.id,\n creationTime: payload.route.creationTime,\n createdBy: payload.route.createdBy,\n countryDetails: payload.route.countryDetails,\n hubCode: payload.route.hubCode,\n hubName: payload.route.hubName,\n deliveryArea: getUniqueValues(payload.consignments, 'area'),\n deliverySlot: getUniqueValues(payload.consignments, 'slot'),\n totalConsignment: payload.consignments.length,\n totalCrates: getTotalCrates(payload.consignments),\n deliveryDate: moment(payload.date, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n plannedDate: payload.route.plannedDate,\n transitTime: payload.transitTime,\n consignmentsIds: payload.consignments.map((item: any) => item.code)\n },\n consignmentTransitTime: transitTime\n }\n if (payload.selectedDriver !== AppConstants.SELECT_NONE.value) {\n routePayload.route.assignee = {\n id: payload.selectedDriver\n }\n }\n if (payload.selectedHelper !== AppConstants.SELECT_NONE.value) {\n routePayload.route.helper = {\n id: payload.selectedHelper\n }\n }\n if (payload.selectedVehicle !== AppConstants.SELECT_NONE.value) {\n routePayload.route.assignedVehicle = {\n id: payload.selectedVehicle\n }\n }\n return routePayload;\n}\n\nexport const createGetAllDropdownsPayload = (params: any) => {\n return {\n timeSlot: {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n },\n hubCode: params.hubCode,\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE)\n }\n}\n\nexport const createGetAllPlannedRoutesPayload = (params: any) => {\n\n return {\n timeSlot: {\n startTime: moment(params.date.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(params.date.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n },\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n hubCode: params.hubCode,\n isCHD: true\n }\n}\n\nexport const createUpdateOrderStatusPayload = (params: any) => {\n return {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n consignmentIds: params.consignments,\n displayRouteStatus: params.status,\n routeId: params.routeId\n }\n}\n\nexport const createPayloadForUpdatingCustAddress = (params: any, consignmentId: any) => {\n return {\n consignmentCode: consignmentId,\n address: params\n }\n}\n\nexport const getPlannedRoutesData = (routeData: any) => {\n let plannedSlots = [];\n if (routeData.PLANNED) {\n const plannedValue: any = routeData.PLANNED;\n for (let slotKey in plannedValue) {\n const slotValue: any = plannedValue[slotKey];\n let slot: any = {\n code: slotKey,\n value: slotValue.slotValue,\n data: []\n };\n let totalConsignments = 0;\n let totalCrates = 0;\n const elements: any = slotValue.elements.map((route: any) => {\n totalConsignments += route.totalConsignment;\n totalCrates += route.totalCrates;\n return {\n code: route.id,\n value: route.routeId,\n data: route,\n slot: slotKey,\n slotValue: slotValue.slotValue\n };\n });\n slot.data = elements;\n slot.totalConsignments = totalConsignments;\n slot.totalCrates = totalCrates;\n plannedSlots.push(slot);\n }\n }\n return plannedSlots;\n}\n\nexport const getConsignmentData = async (draftRouteData: any) => {\n let areas: any[] = [];\n let consignments: any[] = [];\n let slots: any = {};\n if (draftRouteData) {\n Object.keys(draftRouteData).forEach((statusKey: string) => {\n const statusValue: any = draftRouteData[statusKey]\n Object.keys(statusValue).forEach((areaKey: string) => {\n const areaIndex: number = areas.findIndex((area: any) => area.code === areaKey);\n let area: any = areaIndex === -1 ? {\n code: areaKey,\n value: areaKey,\n data: []\n } : { ...areas[areaIndex] };\n const areaValue: any = statusValue[areaKey];\n Object.keys(areaValue).forEach((slotKey: string) => {\n const slotValue: any = areaValue[slotKey];\n const slotIndex: number = areaIndex !== -1 ? area.data.findIndex((slot: any) => slot.code === slotKey) : -1;\n let slot: any = slotIndex === -1 ? {\n code: slotKey,\n value: slotValue.slotValue,\n area: areaKey,\n data: []\n } : { ...area.data[slotIndex] };\n const elements: any = slotValue.elements.map((consignment: any) => {\n return {\n code: consignment.id,\n value: consignment.id,\n data: consignment,\n slot: slotKey,\n slotValue: slotValue.slotValue,\n area: areaKey,\n status: statusKey\n };\n });\n if (slotIndex !== -1) {\n slot.data = [...slot.data, ...elements];\n area.data[slotIndex] = slot;\n } else {\n slot.data = elements;\n area.data.push(slot);\n }\n if (slots[area.code]) {\n slots[area.code][slot.code] = slot.data;\n } else {\n slots[area.code] = {\n [slot.code]: slot.data\n }\n }\n consignments = [...consignments, ...elements];\n })\n if (areaIndex !== -1) {\n areas[areaIndex] = area;\n } else {\n areas.push(area);\n }\n })\n })\n }\n return {\n areaWiseConsignments: areas,\n allConsignments: consignments,\n slotwiseConsignments: slots\n };\n}\n\nexport const transformRouteConsignments = (consignments: any[]) => {\n let routeConsignments: any = {};\n let seqConsignments: any = [];\n consignments.forEach((consignment: any) => {\n let newConsignment: any = {\n code: consignment.id,\n value: consignment.id,\n data: consignment,\n area: consignment.deliveryInformation && consignment.deliveryInformation.customerContactInfo && consignment.deliveryInformation.customerContactInfo.address.area,\n slot: consignment.deliveryInformation && consignment.deliveryInformation.deliverySlot.deliverySlotTime\n };\n seqConsignments.push(consignment.id);\n if (routeConsignments[newConsignment.area]) {\n if (routeConsignments[newConsignment.area][newConsignment.slot]) {\n routeConsignments[newConsignment.area][newConsignment.slot].push(newConsignment);\n } else {\n routeConsignments[newConsignment.area][newConsignment.slot] = [newConsignment];\n }\n } else {\n routeConsignments[newConsignment.area] = {\n [newConsignment.slot]: [newConsignment]\n };\n }\n });\n return {\n routeConsignments: routeConsignments,\n seqConsignments: seqConsignments\n };\n}\n\nexport const getAllAreasAndSlots = (areas: any[]) => {\n let allAreas: string[] = [];\n areas.forEach((area: any) => {\n const slots = area.data;\n slots.forEach((slot: any) => {\n allAreas.push(`${area.code}-${slot.code}`);\n });\n allAreas.push(area.code);\n });\n return allAreas;\n}\n\nexport const getDropdownsData = (payload: any, codeKey?: string, valueKey?: string) => {\n return payload.length ? payload.map((item: any) => {\n return {\n code: codeKey ? item[codeKey] : item.id,\n value: valueKey ? item[valueKey] : item.name\n }\n }) : [];\n}\n\nexport const getTotalCrates = (consignments: any[]) => {\n let totalCrates = 0;\n if (consignments.length) {\n consignments.forEach((item: any) => {\n if (item.data && item.data.deliveryInformation) {\n totalCrates += parseInt(item.data.deliveryInformation.totalCratesCount);\n }\n });\n }\n return totalCrates;\n}\n\nexport const calculateTransitTime = (directions: any) => {\n let transitTime = 0;\n if (directions.legs && directions.legs.length) {\n directions.legs.forEach((leg: any) => {\n transitTime += leg.duration ? leg.duration.value : 0;\n });\n transitTime += (AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.DRIVER_SERVICE_TIME * directions.legs.length);\n }\n return transitTime;\n}\n\nexport const calculateTransitTimeForConsignments = (directions: any, consignments: any) => {\n let consignmentIdsTransitTime: any = {};\n if (directions.legs && directions.legs.length) {\n for (var i = 0; i < consignments.length; i++) {\n if (directions.legs[i]) {\n consignmentIdsTransitTime[consignments[i].code] = directions.legs[i].duration.value\n }\n else {\n consignmentIdsTransitTime[consignments[i].code] = 0\n }\n }\n }\n return consignmentIdsTransitTime;\n}\n\nexport const getAddressInfo = (addressObj: Address) => {\n return addressObj ? `${addressObj.building ? addressObj.building + ', ' : \"\"}${addressObj.apartment ? addressObj.apartment + ', ' : \"\"}${addressObj.zoneNumber ? addressObj.zoneNumber + ', ' : \"\"}${addressObj.makani ? addressObj.makani + ', ' : \"\"}${addressObj.streetNumber ? addressObj.streetNumber + ', ' : \"\"}${addressObj.streetName ? addressObj.streetName + ', ' : \"\"}${addressObj.area ? addressObj.area + ', ' : \"\"}${addressObj.zoneNumber ? addressObj.zoneNumber : \"\"}\n ${addressObj.city ? addressObj.city + ', ' : \"\"}${addressObj.postalCode ? addressObj.postalCode + ', ' : \"\"}${addressObj.countryIsoCode ? addressObj.countryIsoCode : \"\"}` : \"\";\n}\n\nexport const getCratesFromProducts = (items: any) => {\n let crates: any = [];\n items && items.filter(({ shippedQty }: any) => { return +shippedQty > 0 }).forEach((item: any) => {\n if (item.substitutedProducts && item.substitutedProducts.length) {\n item.substitutedProducts && item.substitutedProducts.forEach((element: any) => {\n if (element.associatedCrates) {\n let productCrates = element.associatedCrates;\n productCrates.forEach((crate: any) => {\n const crateValue = getValueFromArray(crates, \"crateId\", crate, \"crateId\");\n if (crateValue.length) {\n const crateIndex = crates.findIndex((value: any) => value.crateId === crate.crateId);\n const newCrate = { ...crate, quantity: parseInt(crates[crateIndex].quantity) + 1 };\n crates.splice(crateIndex, 1, newCrate);\n } else {\n const newCrate = { ...crate, quantity: 1 };\n crates.push(newCrate);\n }\n })\n }\n });\n } else {\n if (item.associatedCrates) {\n let productCrates = item.associatedCrates;\n productCrates.forEach((crate: any) => {\n const crateValue = getValueFromArray(crates, \"crateId\", crate, \"crateId\");\n if (crateValue.length) {\n const crateIndex = crates.findIndex((value: any) => value.crateId === crate.crateId);\n const newCrate = { ...crate, quantity: parseInt(crates[crateIndex].quantity) + 1 };\n crates.splice(crateIndex, 1, newCrate);\n } else {\n const newCrate = { ...crate, quantity: 1 };\n crates.push(newCrate);\n }\n })\n }\n }\n });\n return crates;\n}\n\nexport const checkTerminalStatus = (deliveryStatus: string) => {\n return AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CONSIGNMENTS_DATA.TERMINAL_STATUSES.indexOf(deliveryStatus) > -1;\n}\n\nexport const getLatLong = (addressObj: Address) => {\n return addressObj ? `${addressObj.latitude ? parseFloat(addressObj.latitude).toFixed(5) + ', ' : \"\"}${addressObj.longitude ? parseFloat(addressObj.longitude).toFixed(5) : \"\"}` : \"\";\n}\n","import { createSlice, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport moment from \"moment\";\nimport networkHandler from \"../../network/networkHandler\";\nimport { EApiMiddlewareMethods } from \"../../network/networkHandler.types\";\nimport { CarrefourDeliveryState } from \"./carrefourDeliverySlice.types\";\nimport AppConstants from \"../../constants\";\nimport { transformSelectValues, saveFile, transformProductsResponse } from \"../../utils/helpers.utils\";\nimport { getDropdownsData, getPlannedRoutesData } from \"../../mocks/carrefourHomeDelivery/response.transforms\";\n\nexport const fetchPlanningList = createAsyncThunk(\n \"CarrefourDelivery/FetchByCountry\",\n async (\n {\n requestContinuationToken,\n searchBy,\n searchValue,\n }: {\n requestContinuationToken?: string;\n searchBy: string;\n searchValue: string;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/${searchBy}/${searchValue}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n\n if (requestContinuationToken) {\n request.headers = {\n \"x-requestcontinuation-token\": requestContinuationToken,\n };\n }\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDynamicFiltersOrdersDropdownValues = createAsyncThunk(\n \"CarrefourDelivery/FetchDynamicFiltersOrdersDropdownValues\",\n async ({\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/dynamic-filter-count',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDynamicFiltersRoutesDropdownValues = createAsyncThunk(\n \"CarrefourDelivery/FetchDynamicFiltersRoutesDropdownValues\",\n async ({\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/dynamic-filter-count',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchDeliveryReasons = createAsyncThunk(\n \"CarrefourDelivery/FetchDeliveryReasons\",\n async (params, { rejectWithValue }) => {\n try {\n const request = {\n url: `order/get-delivery-reasons/Default`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchPlanningOrderListByFilter = createAsyncThunk(\n \"CarrefourDelivery/FetchOrdersByFilter\",\n async (\n {\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/filter',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchPlanningRouteListByFilter = createAsyncThunk(\n \"CarrefourDelivery/FetchRoutesByFilter\",\n async (\n {\n filters\n }: {\n filters: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/filter',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllDrivers = createAsyncThunk(\n \"CarrefourDelivery/FetchAllDrivers\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'assignee/drivers',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllHelpers = createAsyncThunk(\n \"CarrefourDelivery/FetchAllHelpers\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'assignee/helpers',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllVehicles = createAsyncThunk(\n \"CarrefourDelivery/FetchAllVehicles\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'vehicle/load',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createDraftRoute = createAsyncThunk(\n \"CarrefourDelivery/CreateDraftRoute\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/draft/create',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const loadAllSlots = createAsyncThunk(\n \"CarrefourDelivery/LoadAllSlots\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/draft/load/slots',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const consignmentReplanning = createAsyncThunk(\n \"CarrefourDelivery/ConsignmentReplanning\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/replanning',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAllPlannedRoutes = createAsyncThunk(\n \"CarrefourDelivery/FetchAllPlannedRoutes\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/view',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createAndEditRoute = createAsyncThunk(\n \"CarrefourDelivery/CreateAndEditRoute\",\n async (\n {\n payload,\n editMode\n }: {\n payload: any,\n editMode: boolean\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/edit',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const discardRouteChanges = createAsyncThunk(\n \"CarrefourDelivery/DiscardRouteChanges\",\n async (\n {\n params,\n redirect\n }: {\n params: any,\n redirect?: boolean\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/discard',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const publishRoutes = createAsyncThunk(\n \"CarrefourDelivery/PublishRoutes\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/publish',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const deleteRoute = createAsyncThunk(\n \"CarrefourDelivery/DeleteRoute\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/delete',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateConsignmentStatus = createAsyncThunk(\n \"CarrefourDelivery/UpdateOrderStatus\",\n async (\n {\n payload\n }: {\n payload: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/updateRouteStatus',\n method: EApiMiddlewareMethods.PUT,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchOrdersFilterChipsDisplayCount = createAsyncThunk(\n \"CarrefourDelivery/FetchOrdersFilterChipsDisplayCount\",\n async (\n {\n filters\n }: {\n filters: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/displayStatusCount',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRoutesFilterChipsDisplayCount = createAsyncThunk(\n \"CarrefourDelivery/FetchRoutesFilterChipsDisplayCount\",\n async (\n {\n filters\n }: {\n filters: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'route/displayStatusCount',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRouteConsignments = createAsyncThunk(\n \"CarrefourDelivery/FetchRouteConsignments\",\n async ({\n id\n }: {\n id: string\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `route/get-consignments-by-route/${id}`,\n method: EApiMiddlewareMethods.POST,\n data: {}\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportToExcel = createAsyncThunk(\n \"CarrefourDelivery/ExportOrderToExcel\",\n async (\n {\n payload,\n }: {\n payload: object;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'export/order',\n method: EApiMiddlewareMethods.POST,\n data: payload,\n responseType: \"blob\"\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportRoutesToExcel = createAsyncThunk(\n \"CarrefourDelivery/ExportRoutesToExcel\",\n async (\n {\n payload,\n }: {\n payload: object;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'export/route',\n method: EApiMiddlewareMethods.POST,\n data: payload,\n responseType: \"blob\"\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const exportInvoicePdf = createAsyncThunk(\n \"CarrefourDelivery/ExportInvoicePdf\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/view-invoice',\n method: EApiMiddlewareMethods.POST,\n data: params,\n responseType: \"bytes\"\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRejectionReasons = createAsyncThunk(\n \"CarrefourDelivery/FetchRejectionReasons\",\n async (\n {\n countryCode\n }: {\n countryCode: any;\n },\n { rejectWithValue }\n ) => {\n let params = countryCode ? countryCode : sessionStorage.getItem(AppConstants.COUNTRY_CODE);\n try {\n const request = {\n url: `order/get-lineitem-rejection-reasons/${params}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateCustomerAddress = createAsyncThunk(\n \"CarrefourDelivery/UpdateCustomerAddress\",\n async (\n {\n params\n }: {\n params: any\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'order/update-delivery-address',\n method: EApiMiddlewareMethods.POST,\n data: params\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateAllConsignmentsState = createAsyncThunk(\"CarrefourDelivery/UpdateAllConsignmentsState\", ({\n consignments\n}: {\n consignments: any\n}) => {\n return consignments;\n});\n\nexport const clearPublishedRoutesErrors = createAsyncThunk(\"CarrefourDelivery/ClearPublishedRoutesErrors\", () => {\n return [];\n});\n\nexport const clearPublishedRoutes = createAsyncThunk(\"CarrefourDelivery/ClearPublishedRoutes\", () => {\n return [];\n});\n\nexport const resetPlanningError = createAsyncThunk(\"CarrefourDelivery/ResetPlanningError\", () => {\n return \"\";\n});\n\nexport const clearUpdatedRoute = createAsyncThunk(\"CarrefourDelivery/ClearUpdatedRoute\", () => {\n return null;\n});\n\nexport const clearDeletedRoute = createAsyncThunk(\"CarrefourDelivery/ClearDeletedRoute\", () => {\n return null;\n});\n\nexport const resetCreateRouteSuccess = createAsyncThunk(\"CarrefourDelivery/ResetCreateRouteSuccess\", () => {\n return false;\n});\n\nexport const resetDraftRoute = createAsyncThunk(\"CarrefourDelivery/ResetDraftRoute\", () => {\n return {};\n});\n\nexport const resetConsignmentReplanningSuccess = createAsyncThunk(\"CarrefourDelivery/ResetConsignmentReplanningSuccess\", () => {\n return false;\n});\n\nexport const clearCurrentSlot = createAsyncThunk(\"CarrefourDelivery/ClearCurrentSlot\", () => {\n return null;\n});\n\nexport const fetchConsignmentHistoryAndProducts = createAsyncThunk(\n \"CarrefourDeliveryConsignmentDetails/FetchConsignmentHistoryAndProducts\",\n async (\n {\n params\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/statusHistoryProducts/${params} `,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const getCratesInfo = createAsyncThunk(\n \"CarrefourDeliveryConsignmentDetails/getCratesInfo\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order / updateCratesAlectoApi`,\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchCarrefourDeliveryStatuses = createAsyncThunk(\n \"CarrefourDelivery/fetchCarrefourDeliveryStatuses\",\n async (\n {\n params\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: `order/statuses/${params}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchCHDSlotDropdownValues = createAsyncThunk(\n \"CarrefourDelivery/FetchCHDSlotDropdownValues\",\n async (\n {\n countryCode\n }: {\n countryCode: any;\n },\n { rejectWithValue }\n ) => {\n let params = countryCode ? countryCode : sessionStorage.getItem(AppConstants.COUNTRY_CODE);\n try {\n const request = {\n url: `filter/all/${params}/CHD`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const closeDialog = createAsyncThunk(\"CarrefourDelivery/CloseDialog\", () => {\n return false;\n});\n\nexport const resetReplanningSuccess = createAsyncThunk(\"CarrefourDelivery/ResetReplanningSuccess\", () => {\n return false;\n});\n\nexport const updateAddressSuccess = createAsyncThunk(\"VTAddressUpdate/AddressUpdateSuccess\", () => {\n return false;\n});\n\nconst initialState: CarrefourDeliveryState = {\n loading: false,\n tableLoading: false,\n invoiceData: \"\",\n displayInvoice: false,\n invoiceMessage: \"\",\n invoiceConsignment: \"\",\n exportError: \"\",\n cratesFromAlecto: \"\",\n productsListFromAlecto: [],\n vtOrdersFilterChipsDisplayCount: {\n consignmentCount: {\n UNPLANNED: 0,\n PLANNED: 0,\n PUBLISHED: 0,\n PREPARING: 0,\n PREPARED: 0,\n OUT_FOR_DELIVERY: 0,\n COMPLETED: 0,\n }\n },\n routesFilterChipsDisplayCount: {\n routCount: {\n UNPLANNED: 0,\n PLANNED: 0,\n PUBLISHED: 0,\n PREPARING: 0,\n PREPARED: 0,\n OUT_FOR_DELIVERY: 0,\n COMPLETED: 0,\n }\n },\n ordersFiltersDropdowns: {\n hubCodeList: [],\n hubNameList: [],\n deliveryAreaList: [],\n typeList: [],\n deliverySlotList: [],\n statusList: [],\n paymentTypeList: [],\n carrierList: [],\n deliveryPropositionList: [],\n routeIdList: [],\n routeStatusList: [],\n driverList: [],\n helperList: [],\n vehicleList: [],\n undeliveredReasonList: []\n },\n routesFiltersDropdowns: {\n hubCodeList: [],\n hubNameList: [],\n routeIdList: [],\n deliveryAreaList: [],\n deliverySlotList: [],\n carrierList: [],\n deliveryPropositionList: [],\n routeStatusList: [],\n driverList: [],\n helperList: [],\n vehicleList: [],\n createdByList: []\n },\n reasonsDropdownList: [],\n deliveryReasons: {},\n ordersData: {\n elements: [],\n pageNumber: 0\n },\n routesData: {\n elements: [],\n pageNumber: 0\n },\n historyAndProducts: {},\n error: \"\",\n errorCode: \"\",\n draftRoute: {},\n plannedRoutes: {},\n slotwisePlannedRoutes: [],\n areawiseConsignments: [],\n slotwiseConsignments: {},\n allConsignments: [],\n routeConsignments: [],\n driversList: [],\n helpersList: [],\n vehiclesList: [],\n slotsList: [],\n consignmentStatusList: [],\n currentSlot: null,\n routeCreateSuccess: false,\n updatedRoute: null,\n routeDiscardSuccess: false,\n publishedRoutesErrors: [],\n publishedRoutes: [],\n chdReplanningConsignmentSuccess: false,\n deletedRoute: null,\n excelLoading: false,\n consignmentStatuses: [],\n productsList: [],\n consignmentDataAfterReplanning: {},\n carrefourDeliveryStatuses: [],\n isUpdateAddress: false,\n rejectionReasonList: [],\n rejectionReasons: {},\n deliverySlotListCHD: [],\n updatedCustomerAddress: {}\n};\n\nconst carrefourDeliverySlice = createSlice({\n name: \"CarrefourDelivery\",\n initialState,\n reducers: {},\n extraReducers: (builders) => {\n builders\n .addCase(fetchPlanningList.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningList.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.ordersData = payload;\n })\n .addCase(fetchPlanningList.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.chdReplanningConsignmentSuccess = false;\n state.ordersFiltersDropdowns = {\n hubCodeList: transformSelectValues(payload.hubCodes || []),\n hubNameList: transformSelectValues(payload.hubNames || []),\n deliveryAreaList: transformSelectValues(payload.areas || []),\n typeList: transformSelectValues(payload.types || []),\n deliverySlotList: transformSelectValues(payload.deliverySlots || []),\n statusList: transformSelectValues(payload.statuses || []),\n paymentTypeList: transformSelectValues(payload.paymentTypes || []),\n carrierList: transformSelectValues(payload.carriers || []),\n deliveryPropositionList: transformSelectValues(payload.deliveryPropositions || []),\n routeIdList: transformSelectValues(payload.routeIds || []),\n routeStatusList: transformSelectValues(payload.routeStatuses || []),\n driverList: transformSelectValues(payload.drivers || []),\n helperList: transformSelectValues(payload.helpers || []),\n vehicleList: transformSelectValues(payload.vehicles || []),\n undeliveredReasonList: transformSelectValues(payload.undeliveredReasons || [])\n };\n })\n .addCase(fetchDynamicFiltersOrdersDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesFiltersDropdowns = {\n hubCodeList: transformSelectValues(payload.hubCodes || []),\n hubNameList: transformSelectValues(payload.hubNames || []),\n routeIdList: transformSelectValues(payload.routeIds || []),\n deliveryAreaList: transformSelectValues(payload.areas || []),\n deliverySlotList: transformSelectValues(payload.deliverySlots || []),\n carrierList: transformSelectValues(payload.carriers || []),\n deliveryPropositionList: transformSelectValues(payload.deliveryPropositions || []),\n routeStatusList: transformSelectValues(payload.routeStatuses || []),\n driverList: transformSelectValues(payload.drivers || []),\n helperList: transformSelectValues(payload.helpers || []),\n vehicleList: transformSelectValues(payload.vehicles || []),\n createdByList: transformSelectValues(payload.createdBy || [])\n };\n })\n .addCase(fetchDynamicFiltersRoutesDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchDeliveryReasons.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchDeliveryReasons.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n let deliveryReasonsList: any = [];\n if (payload.reasons) {\n deliveryReasonsList = payload.reasons.map((reason: any) => {\n return {\n code: reason.reasonCode,\n value: reason.reasonDescription\n };\n });\n }\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.reasonsDropdownList = transformSelectValues(deliveryReasonsList);\n state.deliveryReasons = payload.reasons;\n })\n .addCase(fetchDeliveryReasons.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.chdReplanningConsignmentSuccess = false;\n state.vtOrdersFilterChipsDisplayCount = payload;\n })\n .addCase(fetchOrdersFilterChipsDisplayCount.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesFilterChipsDisplayCount = payload;\n })\n .addCase(fetchRoutesFilterChipsDisplayCount.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllDrivers.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllDrivers.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.driversData = payload;\n const drivers = getDropdownsData(payload);\n state.driversList = transformSelectValues(drivers);\n })\n .addCase(fetchAllDrivers.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllHelpers.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllHelpers.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.helpersData = payload;\n const helpers = getDropdownsData(payload);\n state.helpersList = transformSelectValues(helpers);\n })\n .addCase(fetchAllHelpers.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllVehicles.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllVehicles.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.vehiclesData = payload;\n const vehicles = getDropdownsData(payload);\n state.vehiclesList = transformSelectValues(vehicles);\n })\n .addCase(fetchAllVehicles.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(loadAllSlots.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(loadAllSlots.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.slotwisePlannedRoutes = [];\n state.slotsData = payload;\n state.currentSlot = payload.currentSlot && payload.currentSlot.length ? payload.currentSlot[0] : {};\n state.slotsList = transformSelectValues(payload.allSlots);\n })\n .addCase(loadAllSlots.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.currentSlot = null;\n state.slotsList = [];\n state.draftRoute = {};\n state.slotwisePlannedRoutes = [];\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchAllPlannedRoutes.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAllPlannedRoutes.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.plannedRoutes = payload;\n state.slotwisePlannedRoutes = getPlannedRoutesData(payload.allRoutes);\n })\n .addCase(fetchAllPlannedRoutes.rejected, (state, action) => {\n state.loading = false;\n state.plannedRoutes = {};\n state.slotwisePlannedRoutes = [];\n })\n .addCase(createDraftRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.draftRoute = {};\n })\n .addCase(createDraftRoute.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeCreateSuccess = false;\n state.updatedRoute = null;\n state.routeDiscardSuccess = false;\n state.currentSlot = null;\n state.slotwisePlannedRoutes = [];\n state.draftRoute = payload;\n state.consignmentStatusList = transformSelectValues(payload.deliveryStatuses || []);\n sessionStorage.setItem('routeId', payload.route && payload.route.id);\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(createDraftRoute.rejected, (state, action) => {\n const {\n payload,\n meta: {\n arg: { params }\n }\n } = action;\n const errorPayload: any = payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.routeCreateSuccess = false;\n state.updatedRoute = null;\n state.routeDiscardSuccess = false;\n state.currentSlot = null;\n state.draftRoute = {};\n state.slotwisePlannedRoutes = [];\n if (!params.editMode) {\n sessionStorage.setItem('routeId', '');\n sessionStorage.setItem('extraConsignments', '[]');\n }\n })\n .addCase(consignmentReplanning.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(consignmentReplanning.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.chdReplanningConsignmentSuccess = true;\n state.consignmentDataAfterReplanning = payload;\n })\n .addCase(consignmentReplanning.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.chdReplanningConsignmentSuccess = false;\n })\n .addCase(createAndEditRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(createAndEditRoute.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { editMode }\n }\n } = action;\n state.loading = false;\n if (editMode) {\n state.updatedRoute = payload;\n } else {\n state.routeCreateSuccess = true;\n }\n state.currentSlot = null;\n sessionStorage.setItem('routeId', '');\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(createAndEditRoute.rejected, (state, action) => {\n const {\n payload,\n meta: {\n arg: { editMode }\n }\n } = action;\n const errorPayload: any = payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n if (editMode) {\n state.updatedRoute = null;\n } else {\n state.routeCreateSuccess = false;\n }\n })\n .addCase(discardRouteChanges.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(discardRouteChanges.fulfilled, (state, action) => {\n const {\n meta: {\n arg: { redirect }\n }\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeDiscardSuccess = true;\n state.draftRoute = {};\n state.currentSlot = null;\n if (!redirect) {\n sessionStorage.setItem('routeId', '');\n }\n sessionStorage.setItem('extraConsignments', '[]');\n })\n .addCase(discardRouteChanges.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.routeDiscardSuccess = false;\n })\n .addCase(publishRoutes.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutesErrors = [];\n })\n .addCase(publishRoutes.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n if (payload.publishErrorDto && payload.publishErrorDto.length) {\n state.publishedRoutesErrors = payload.publishErrorDto;\n state.publishedRoutes = payload.publishedRoutes && payload.publishedRoutes.length ? payload.publishedRoutes : [];\n } else {\n state.publishedRoutes = payload.publishedRoutes && payload.publishedRoutes.length ? payload.publishedRoutes : [];\n }\n })\n .addCase(publishRoutes.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.publishedRoutes = [];\n state.publishedRoutesErrors = [];\n })\n .addCase(deleteRoute.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(deleteRoute.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.deletedRoute = payload;\n })\n .addCase(deleteRoute.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.deletedRoute = null;\n })\n .addCase(updateConsignmentStatus.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateConsignmentStatus.fulfilled, (state, action) => {\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateConsignmentStatus.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchPlanningOrderListByFilter.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningOrderListByFilter.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { filters }\n }\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.chdReplanningConsignmentSuccess = false;\n state.ordersData = {\n ...payload,\n elements:\n filters.pageNumber === 0\n ? [...payload.elements]\n : [...state.ordersData.elements, ...payload.elements],\n totalElements: payload.totalElements,\n totalPages: payload.totalPages\n };\n })\n .addCase(fetchPlanningOrderListByFilter.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchPlanningRouteListByFilter.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchPlanningRouteListByFilter.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { filters }\n }\n } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routesData = {\n ...payload,\n elements:\n filters.pageNumber === 0\n ? [...payload.elements]\n : [...state.routesData.elements, ...payload.elements],\n totalElements: payload.totalElements,\n totalPages: payload.totalPages\n };\n })\n .addCase(fetchPlanningRouteListByFilter.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRouteConsignments.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchRouteConsignments.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.routeConsignments = payload;\n })\n .addCase(fetchRouteConsignments.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(updateAllConsignmentsState.fulfilled, (state, action) => {\n const { payload } = action;\n state.areawiseConsignments = payload.areaWiseConsignments;\n state.slotwiseConsignments = payload.slotwiseConsignments;\n state.allConsignments = payload.allConsignments;\n state.loading = payload.loading;\n state.error = \"\";\n })\n .addCase(clearPublishedRoutesErrors.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutesErrors = payload;\n })\n .addCase(clearPublishedRoutes.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.publishedRoutes = payload;\n })\n .addCase(resetPlanningError.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = payload;\n state.error = payload;\n })\n .addCase(clearUpdatedRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.updatedRoute = payload;\n state.routeDiscardSuccess = false;\n })\n .addCase(clearDeletedRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.deletedRoute = payload;\n })\n .addCase(clearCurrentSlot.fulfilled, (state, action) => {\n const { payload } = action;\n state.currentSlot = payload;\n })\n .addCase(resetCreateRouteSuccess.fulfilled, (state, action) => {\n const { payload } = action;\n state.routeCreateSuccess = payload;\n })\n .addCase(resetDraftRoute.fulfilled, (state, action) => {\n const { payload } = action;\n state.draftRoute = payload;\n })\n .addCase(resetConsignmentReplanningSuccess.fulfilled, (state, action) => {\n const { payload } = action;\n state.chdReplanningConsignmentSuccess = payload;\n })\n .addCase(exportToExcel.pending, (state) => {\n state.excelLoading = true;\n state.error = \"\";\n })\n .addCase(exportToExcel.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.excelLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n if (payload) {\n const currentDate = moment().format(\"YYYY-MM-DD\");\n const currentTime = moment().format(\"HH-mm\");\n let filename = `Consignments_${currentDate} _${currentTime}.xlsx`;\n saveFile(payload, filename);\n }\n })\n .addCase(exportToExcel.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.excelLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(exportRoutesToExcel.pending, (state) => {\n state.excelLoading = true;\n state.error = \"\";\n })\n .addCase(exportRoutesToExcel.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.excelLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n if (payload) {\n const currentDate = moment().format(\"YYYY-MM-DD\");\n const currentTime = moment().format(\"HH-mm\");\n let filename = `Routes_${currentDate} _${currentTime}.xlsx`;\n saveFile(payload, filename);\n }\n })\n .addCase(exportRoutesToExcel.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.excelLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.exportError = errorPayload.status;\n })\n .addCase(exportInvoicePdf.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(exportInvoicePdf.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n const data = payload.Invoices && payload.Invoices.length ? payload.Invoices[0].FileDataBytes : [];\n state.invoiceConsignment = payload.Invoices && payload.Invoices.length ? payload.Invoices[0].ConsignmentNo : \"\";\n state.displayInvoice = payload.Invoices && payload.Invoices.length;\n const pdfData = `data: application / pdf; base64, ${data} `;\n state.invoiceData = payload.Invoices && payload.Invoices.length ? pdfData : [];\n state.invoiceMessage = payload.Message;\n })\n .addCase(exportInvoicePdf.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchConsignmentHistoryAndProducts.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchConsignmentHistoryAndProducts.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.updatedCustomerAddress = {};\n state.historyAndProducts = payload;\n state.consignmentStatuses = payload.statuses && payload.statuses.length ? payload.statuses : [];\n let prodRes: any = transformProductsResponse(payload.products && payload.products.length ? payload.products : []);\n state.productsList = prodRes || [];\n })\n .addCase(fetchConsignmentHistoryAndProducts.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(getCratesInfo.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(getCratesInfo.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.cratesFromAlecto = payload;\n state.productsListFromAlecto = payload && payload.crateAvailableOrders && payload.crateAvailableOrders.length > 0 && payload.crateAvailableOrders[0].products && payload.crateAvailableOrders[0].products.length > 0 ? payload.crateAvailableOrders[0].products : null;\n })\n .addCase(getCratesInfo.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(closeDialog.fulfilled, (state, action) => {\n state.consignmentDataAfterReplanning = {};\n state.updatedCustomerAddress = {};\n })\n .addCase(resetReplanningSuccess.fulfilled, (state, action) => {\n state.chdReplanningConsignmentSuccess = false\n })\n .addCase(fetchCarrefourDeliveryStatuses.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchCarrefourDeliveryStatuses.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.carrefourDeliveryStatuses = transformSelectValues(payload.statuses && payload.statuses.length ? payload.statuses : []);\n })\n .addCase(fetchCarrefourDeliveryStatuses.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(updateAddressSuccess.fulfilled, (state, action) => {\n state.isUpdateAddress = false\n })\n .addCase(fetchRejectionReasons.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchRejectionReasons.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n let rejectionReasonsList: any = [];\n if (payload.reasons) {\n rejectionReasonsList = payload.reasons.map((reason: any) => {\n return {\n code: reason.reasonCode,\n value: reason.reasonDescription\n };\n });\n }\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.rejectionReasonList = transformSelectValues(rejectionReasonsList);\n state.rejectionReasons = payload.reasons;\n })\n .addCase(fetchRejectionReasons.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchCHDSlotDropdownValues.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchCHDSlotDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n let deliverySlotListCHD: any = {};\n if (payload.deliverySlot) {\n Object.keys(payload.deliverySlot).filter((country: any) => {\n deliverySlotListCHD[country] = transformSelectValues(payload.deliverySlot[country]);\n return true;\n });\n }\n state.deliverySlotListCHD = deliverySlotListCHD;\n })\n .addCase(fetchCHDSlotDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(updateCustomerAddress.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(updateCustomerAddress.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.isUpdateAddress = true;\n state.updatedCustomerAddress = payload;\n })\n .addCase(updateCustomerAddress.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n state.chdReplanningConsignmentSuccess = false;\n })\n },\n});\n\nexport default carrefourDeliverySlice.reducer;","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n '& .headingContainer': {\n flexDirection: \"column\",\n '& .titleHeading': {\n fontSize: 18,\n fontWeight: 500,\n '& .content': {\n fontWeight: 600\n }\n },\n '& .titleContent': {\n fontSize: 12,\n fontWeight: 600,\n '&.link': {\n cursor: \"pointer\"\n }\n }\n },\n '& .tagContainer': {\n marginLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.CREAM_CAN': {\n backgroundColor: COLORS.CREAM_CAN\n },\n '&.VISTA_BLUE': {\n backgroundColor: COLORS.VISTA_BLUE\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.SEA_GREEN\n },\n '&.GOLDEN_BELL': {\n backgroundColor: COLORS.GOLDEN_BELL\n },\n '&.SCAMPI': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.BLUE': {\n backgroundColor: COLORS.PRIMARY_MAIN\n },\n '&.SEA_GREEN2': {\n backgroundColor: COLORS.SEA_GREEN2\n },\n '&.LUCKY': {\n backgroundColor: COLORS.LUCKY\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n },\n '&.JUNGLE_GREEN': {\n backgroundColor: COLORS.JUNGLE_GREEN\n },\n '&.BLACK': {\n backgroundColor: COLORS.BLACK\n },\n }\n },\n '& .editIcon': {\n paddingLeft: theme.spacing(1.5),\n '& .icon': {\n cursor: \"pointer\",\n verticalAlign: \"middle\"\n }\n }\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .geocodedAddress': {\n paddingBottom: theme.spacing(2),\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .detailsHeader': {\n flexDirection: \"column\",\n backgroundColor: COLORS.TRANSPARENT_BLUE,\n padding: \"18px 16px\",\n borderRadius: theme.spacing(1),\n '& .detailsHeaderItem': {\n paddingBottom: theme.spacing(2),\n '& .title': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600\n },\n '& .editIcon': {\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n '& .subSection': {\n paddingTop: \"16px\",\n display: \"flex\"\n },\n '& .subSectionTitle': {\n fontSize: \"14px\",\n fontWeight: 600\n },\n '& .subSectionContent': {\n fontSize: \"14px\",\n fontWeight: 500,\n paddingLeft: \"8px\"\n },\n '&:last-child': {\n paddingBottom: 0\n },\n '& .editAddress': {\n height: \"18px\",\n width: \"18px\",\n cursor: \"pointer\"\n },\n '& .headerItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& .contactItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& p': {\n lineHeight: \"17px\",\n fontSize: 14\n },\n '& .name': {\n fontWeight: 600\n },\n '&.geocodedAddress': {\n paddingBottom: \"6px\",\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .contactMobile': {\n marginRight: theme.spacing(5)\n },\n '& .logo': {\n width: 24,\n height: 24\n },\n '& .contact': {\n '& a': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary\n },\n paddingLeft: theme.spacing(1),\n '&.mobile': {\n paddingLeft: theme.spacing(0.25)\n }\n }\n }\n },\n '& .contentHubAddress': {\n display: \"flex\",\n flexDirection: \"column\",\n '& .main': {\n display: \"flex\",\n flexDirection: \"column\"\n },\n '& .title': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600\n },\n '& .content': {\n paddingTop: \"16px\",\n fontWeight: 500,\n fontSize: \"14px\",\n lineHeight: \"20px\"\n },\n '& .subSection': {\n paddingTop: \"16px\",\n display: \"flex\"\n },\n '& .subSectionTitle': {\n fontSize: \"14px\",\n fontWeight: 600\n },\n '& .subSectionContent': {\n fontSize: \"14px\",\n fontWeight: 500,\n paddingLeft: \"8px\"\n },\n '& .detailsHeaderItem': {\n paddingBottom: theme.spacing(2),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .editAddress': {\n height: \"18px\",\n width: \"18px\",\n cursor: \"pointer\"\n },\n '& .headerItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& .contactItemContainer': {\n alignItems: \"center\",\n flexWrap: \"nowrap\"\n },\n '& p': {\n lineHeight: \"17px\",\n fontSize: 14\n },\n '& .name': {\n fontWeight: 600\n },\n '&.geocodedAddress': {\n paddingBottom: \"6px\",\n '& .addressColItem': {\n alignSelf: \"flex-start\"\n },\n '& .geoLocAddressContainer': {\n cursor: \"pointer\",\n '& .address': {\n fontSize: 12,\n fontWeight: 600,\n color: theme.palette.primary.main,\n lineHeight: \"14px\",\n paddingRight: 3\n },\n '& .addressLogo': {\n width: 12,\n height: 12,\n transform: \"rotate(0deg)\",\n transition: \"transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n '&.open': {\n transform: \"rotate(180deg)\",\n }\n }\n },\n '& .addressMapContainer': {\n height: 243,\n border: `1px solid ${COLORS.SILVER}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(1),\n backgroundColor: COLORS.SILVER\n }\n },\n '& .contactMobile': {\n marginRight: theme.spacing(5)\n },\n '& .logo': {\n width: 24,\n height: 24\n },\n '& .contact': {\n '& a': {\n lineHeight: \"17px\",\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary\n },\n paddingLeft: theme.spacing(1),\n '&.mobile': {\n paddingLeft: theme.spacing(0.25)\n }\n }\n }\n },\n '& .detailsContent': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: theme.spacing(3, 0, 2, 0),\n '& .contentRow': {\n paddingBottom: theme.spacing(3),\n '&.hubDetails': {\n paddingBottom: theme.spacing(1)\n },\n '&:last-child': {\n paddingBottom: 0\n },\n '& .contentColumn': {\n flex: \"2 0 0\",\n '&:last-child': {\n flex: \"1 0 0\"\n },\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\"\n },\n '& .label': {\n paddingBottom: theme.spacing(1)\n },\n '& .content': {\n fontWeight: 600\n }\n }\n }\n },\n '& .sellerDetails': {\n paddingTop: theme.spacing(1.75),\n '& .detailsHeader': {\n backgroundColor: theme.palette.secondary.main\n }\n },\n '& .deliveryProofSection': {\n paddingBottom: theme.spacing(1),\n '& .content': {\n width: \"100%\",\n '& .deliveryProofContainer': {\n flexDirection: \"column\",\n '& .deliveryProofItem': {\n paddingBottom: theme.spacing(1.5),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .imagesContainer': {\n flexWrap: \"nowrap\",\n '& .imagesItem': {\n marginRight: theme.spacing(1.5),\n width: \"50%\",\n height: 145,\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(2),\n '&:last-child': {\n marginRight: 0\n },\n '& .imageItemContainer': {\n flexDirection: \"column\",\n '& .imageItem': {\n paddingBottom: theme.spacing(2),\n '& .heading': {\n fontSize: 14,\n fontWeight: 500\n },\n '& .allImagesContainer': {\n flexWrap: \"nowrap\",\n overflow: \"auto\",\n '& .viewerContainer': {\n display: \"flex\"\n },\n '&.sign': {\n justifyContent: \"space-around\",\n },\n '& img': {\n width: \"auto\",\n height: 64,\n cursor: \"pointer\",\n marginRight: theme.spacing(1.5),\n \"&:last-child\": {\n marginRight: 0\n }\n }\n }\n }\n }\n }\n },\n '& .commentsContainer': {\n flexDirection: \"column\",\n padding: theme.spacing(1),\n backgroundColor: theme.palette.secondary.main,\n borderRadius: theme.spacing(1),\n '& .commentsItem': {\n paddingBottom: theme.spacing(0.75),\n '& p': {\n fontWeight: 500,\n fontSize: 12\n },\n '& .heading': {\n fontSize: 14\n }\n }\n }\n }\n }\n }\n },\n '& .consignmentHistory': {\n paddingBottom: theme.spacing(1)\n },\n '& .tabularSection': {\n paddingBottom: theme.spacing(1),\n '&:last-child': {\n paddingBottom: 0\n },\n '&.crates': {\n '& .itemsContainer .item .itemContainer .itemColumn.item1 p': {\n fontWeight: 600,\n },\n '& .itemsContainer .item .itemContainer .itemColumn.item1 .header p': {\n fontWeight: 500,\n },\n '& .crateBarcode': {\n width: 40,\n height: 15,\n marginLeft: theme.spacing(3)\n },\n '& .crateStageLocationIcon': {\n width: 16,\n height: 16,\n marginRight: theme.spacing(1)\n }\n },\n '& .itemDiv': {\n padding: theme.spacing(0),\n '& .content': {\n width: \"100%\",\n '& .itemsContainer': {\n flexWrap: \"nowrap\",\n '& .item': {\n padding: theme.spacing(2, 0),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n \"&:first-child\": {\n padding: 0,\n },\n '&:last-child': {\n borderBottom: \"none\"\n },\n '& .itemContainer': {\n padding: theme.spacing(0, 2),\n '&.items': {\n backgroundColor: COLORS.SECONDARY_MAIN,\n padding: theme.spacing(2),\n },\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600\n },\n '&.header p': {\n color: COLORS.DOVE_GRAY,\n fontWeight: 500,\n },\n '& .itemColumn': {\n padding: theme.spacing(0),\n '&.item1': {\n \"& p\": {\n fontWeight: 400,\n textTransform: \"capitalize\"\n },\n '& .rejectedReason': {\n fontSize: 10,\n color: COLORS.ALIZARIN_CRIMSON\n },\n '& .viewOriginalLink': {\n fontSize: 9,\n color: COLORS.COPY,\n cursor: \"pointer\",\n paddingRight: 6\n },\n '& .originalName': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 400,\n }\n },\n '&.item2': {\n '& p': {\n textAlign: \"center\",\n '& .green': {\n color: COLORS.PERSIAN_GREEN\n }\n }\n },\n '&.item3': {\n '& p': {\n textAlign: \"right\"\n }\n }\n }\n }\n }\n },\n '& .paymentContainer': {\n padding: 16,\n paddingTop: 13,\n '& .totalDivider': {\n margin: \"11px 0px\"\n },\n '& .paymentItem': {\n '&:last-child p': {\n fontWeight: 600\n },\n padding: \"5px 0\",\n '& .paymentItemColumn': {\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\"\n },\n '& .vat': {\n fontWeight: 400,\n paddingLeft: theme.spacing(0.25)\n },\n '&.right': {\n marginLeft: \"auto\"\n }\n }\n }\n }\n }\n }\n }\n },\n accordionSummary: {\n '& .header': {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: theme.spacing(0.5),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .smallHeading': {\n fontSize: 12\n }\n },\n '& .content': {\n flexGrow: 1\n }\n },\n timeline: {\n padding: \"0 !important\",\n margin: 0,\n '& .timelineItem': {\n minHeight: 50,\n '&:last-child': {\n minHeight: \"auto\"\n },\n '&:before': {\n content: \"none\"\n },\n '& .timelineDot': {\n padding: 0,\n margin: 0,\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"transparent\",\n '& .dotIcon': {\n width: 18,\n height: 18,\n padding: 5,\n '&.active': {\n padding: 0\n }\n },\n },\n '& .primaryConnector': {\n backgroundColor: COLORS.TRANSPARENT,\n borderLeft: `1px dashed ${COLORS.SILVER}`\n },\n '& .timelineContent': {\n padding: 0,\n paddingLeft: theme.spacing(1),\n '& .heading': {\n paddingTop: 1,\n fontSize: 14,\n lineHeight: \"14px\",\n fontWeight: 600,\n color: theme.palette.primary.main,\n '&.error': {\n color: COLORS.DARK_RED,\n '&.active': {\n paddingBottom: 17\n }\n },\n '&.active': {\n // paddingBottom: 17\n },\n '& .dateTime': {\n fontSize: 12,\n lineHeight: \"15px\",\n fontWeight: 500,\n color: COLORS.DOVE_GRAY,\n paddingLeft: theme.spacing(0.5),\n verticalAlign: \"bottom\",\n }\n },\n '& .metadataContainer': {\n paddingBottom: theme.spacing(1.5),\n '& .title': {\n fontSize: 12,\n lineHeight: \"10px\",\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n fontWeight: 500,\n color: COLORS.COPY\n },\n '& .description': {\n fontSize: 10,\n lineHeight: \"10px\",\n color: COLORS.DOVE_GRAY_LIGHT\n }\n }\n }\n }\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 600\n },\n verticalDiv: {\n color: \"#0E5AA7\",\n height: \"16px\",\n background: \"#0E5AA7\",\n width: \"2px\",\n margin: \"2px 16px 0px 16px\"\n },\n horizontalDiv: {\n borderBottom: \"1px solid #E6E6E6\",\n marginBottom: \"16px\"\n },\n pdfDocStyle: {\n overflow: \"scroll\",\n height: \"890px\"\n },\n pdfHeader: {\n position: \"absolute\",\n backgroundColor: \"#393939\",\n height: \"56px\",\n width: \"100%\",\n zIndex: 1,\n },\n pdfRoot: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n zoomOutStyle: {\n marginRight: \"10px\",\n cursor: \"pointer\",\n marginTop: \"20px\"\n },\n zoomInStyle: {\n cursor: \"pointer\",\n marginTop: \"12px\",\n marginLeft: \"16px\"\n },\n pdfName: {\n fontSize: 14,\n fontWeight: 600,\n color: COLORS.WHITE,\n lineHeight: \"17px\",\n display: \"flex\",\n alignContent: \"center\",\n alignItems: \"center\"\n },\n pdfScaleNo: {\n backgroundColor: \"#000408\",\n width: \"44px\",\n height: \"24px\",\n padding: \"6px\",\n color: \"white\"\n },\n invoiceModalBody: {\n borderRadius: \"8px\",\n '& .react-pdf__Page': {\n marginTop: \"56px\",\n '& .react-pdf__Page__canvas': {\n margin: \"0 auto\",\n height: \"100% !important\",\n overflow: \"auto\",\n minWidth: \"1064px\"\n },\n },\n '& .react-pdf__Page__annotations.annotationLayer': {\n padding: \"8px\",\n },\n },\n countSection: {\n margin: 'auto',\n width: 100,\n height: 40,\n borderRadius: 100,\n backgroundColor: COLORS.FOOTER_COUNT_BACKGROUND,\n color: COLORS.WHITE,\n left: \"calc(50% - 40px)\",\n bottom: \"38px\",\n position: \"fixed\",\n zIndex: 100,\n '& .countContainer': {\n height: \"100%\",\n '& .countItem': {\n margin: \"auto\",\n '& p': {\n fontSize: 16,\n fontWeight: 400\n },\n '& .current': {\n fontWeight: 500\n },\n '& .separator': {\n padding: \"0 2px\"\n }\n }\n }\n },\n closeModalIcon: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n paddingRight: \"48px\"\n },\n modalTitle: {\n fontSize: \"24px\",\n fontWeight: 600,\n padding: \"24px\",\n },\n applyModalBodyTitle: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n fontWeight: 600,\n fontSize: \"16px\",\n lineHeight: \"20px\",\n paddingTop: \"16px\",\n },\n noPdfModal: {\n border: \"none\",\n minWidth: \"800px\",\n minHeight: \"500px\",\n maxHeight: \"890px\",\n backgroundColor: COLORS.SECONDARY_LIGHT,\n position: \"absolute\",\n top: \"40%\",\n left: \"50%\",\n transform: \"translate(-40%, -50%)\",\n padding: \"24px\",\n textAlign: \"center\",\n borderRadius: \"8px\",\n },\n closeNoPdfModalIcon: {\n position: 'absolute',\n right: \"-20px\",\n top: \"-21px\",\n width: \"40px\",\n height: \"40px\",\n zIndex: 1,\n cursor: \"pointer\",\n },\n noInvoiceMsg: {\n fontSize: \"18px\",\n fontWeight: 500\n },\n openX: {\n transform: \"scaleX(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n closeX: {\n transform: \"scaleX(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n openY: {\n transform: \"scaleY(1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n },\n closeY: {\n transform: \"scaleY(-1)\",\n height: 18,\n width: 20,\n color: COLORS.COPY\n }\n }),\n);","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n '& .headingContainer': {\n flexDirection: \"column\",\n '& .titleHeading': {\n fontSize: 18,\n fontWeight: 500,\n '& .content': {\n fontWeight: 600\n }\n },\n '& .titleContent': {\n fontSize: 12,\n fontWeight: 600,\n '&.link': {\n cursor: \"pointer\"\n }\n }\n },\n '& .tagContainer': {\n marginLeft: theme.spacing(1),\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n '&.PICTON_BLUE': {\n backgroundColor: COLORS.PICTON_BLUE\n },\n '&.MINSK': {\n backgroundColor: COLORS.SCAMPI\n },\n '&.AMBER': {\n backgroundColor: COLORS.AMBER\n },\n '&.SEA_GREEN': {\n backgroundColor: COLORS.PERSIAN_GREEN_DARK\n },\n '&.RED': {\n backgroundColor: COLORS.PALE_RED\n },\n '&.MADISON_BLUE': {\n backgroundColor: COLORS.GREEN_BLUE\n },\n '&.DUSTY_GRAY': {\n backgroundColor: COLORS.DUSTY_GRAY\n }\n }\n },\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: \"8px\",\n '& .selectionArea': {\n paddingBottom: theme.spacing(3),\n '& .selectionFormControlContainer': {\n '& .formHeading': {\n fontSize: 14,\n fontWeight: 400,\n color: theme.palette.text.primary,\n paddingBottom: theme.spacing(2)\n },\n '& .radioGroup': {\n flexDirection: 'row',\n '& .radioItem': {\n marginRight: theme.spacing(3)\n },\n '& .MuiFormControlLabel-label': {\n fontSize: 14,\n fontWeight: 500,\n color: theme.palette.text.primary,\n }\n }\n }\n },\n '& .selectedContentArea': {\n '& .contentAreaContainer': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '&.reschedule .MuiOutlinedInput-root': {\n height: 40\n },\n '& .contentAreaItem': {\n paddingBottom: theme.spacing(3),\n flexGrow: 1,\n '& .itemContainer': {\n flexDirection: \"column\",\n '& .itemLabel': {\n paddingBottom: theme.spacing(1),\n alignSelf: \"flex-start\",\n '& p': {\n fontSize: 14,\n fontWeight: 400\n }\n },\n '& .itemInput': {\n '& .MuiOutlinedInput-input': {\n fontSize: 14,\n fontWeight: 400\n }\n }\n },\n }\n }\n }\n },\n buttons: {\n width: \"100%\",\n '& .userBtn': {\n '&.secondary': {\n marginRight: theme.spacing(2)\n },\n flexGrow: 1\n }\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 580\n },\n '& .react-pdf__Page': {\n marginTop: \"10px\",\n },\n '& .react - pdf__Page__textContent': {\n border: \"1px solid darkgrey\",\n boxShadow: \"5px 5px 5px 1px #ccc\",\n borderRadius: \"5px\",\n },\n '& .react - pdf__Page__annotations.annotationLayer': {\n padding: \"20px\",\n },\n '& .react - pdf__Page__canvas': {\n margin: \"0 auto\",\n },\n })\n);","import React, { forwardRef, ReactElement, Ref, useCallback, useEffect } from 'react';\nimport CustomDialog from '../common/Dialog';\nimport * as yup from 'yup';\nimport { useStyles } from './UpdateCustomerAddress.styles';\nimport { TransitionProps } from \"@material-ui/core/transitions\";\nimport Slide from \"@material-ui/core/Slide\";\nimport { Button, Grid, Typography } from '@material-ui/core';\nimport AppConstants from '../constants';\nimport { useFormik } from 'formik';\nimport TextBox from '../common/TextBox';\n\ninterface UpdateCustomerAddressProps {\n open: boolean;\n custInfo: any;\n consignment: any;\n closePopup: () => void;\n handleDialogAction?: (params: any) => void;\n}\n\nconst Transition = forwardRef(function Transition(\n props: TransitionProps & { children?: ReactElement\n View Original \n handleOriginalName()} />\n
\n }\n \n {`Live Tracking (#${deliveryInformation && deliveryInformation.carrierTrackingId ? deliveryInformation.carrierTrackingId : consignment.orderReference ? consignment.orderReference : \"\"})`}\n
\n :\n \n Lat/Long : \n {getLatLong(custInfo && custInfo.address ? custInfo.address : \"\")} \n
\n \n Landmark : \n {Object.keys(updatedAddress.address).length !== 0 ? (\n {updatedAddress.address ? updatedAddress.address.landmark : \"\"} \n ) : (\n {custInfo && custInfo.address ? custInfo.address.landmark : \"\"} \n )}\n
\n \n Delivery Instructions : \n {deliveryInformation ? deliveryInformation.deliveryInstructions : \"\"} \n
\n \n {loading && 'All changes will be discarded. Are you sure you want to leave this page?'}\n />\n }\n \n \n \n {editMode ? `Edit ${draftRoute.route ? draftRoute.route.routeId : \"\"}` : viewMode ? location.state.route.routeId : 'Create Route'} \n {\n viewMode && location.state.route.displayRouteStatus !== AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.ROUTES_DATA.UNEDITABLE_CHIP &&\n <>\n \n \n {location.state ? location.state.route.status : \"\"} \n {!(isLastMileViewer || isOnlyStdLastMileViewer) &&\n \n \n \n }\n \n \n \n \n \n \n \n \n \n \n \n \n {viewMode ? 'Consignments' : tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ? `Consignments(${allConsignments.length})` : 'Routes'} \n {\n !viewMode && tabValue !== AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n \n \n {\n !viewMode &&\n \n {\n tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED &&\n \n \n \n }\n \n \n {\n !viewMode &&\n \n \n \n \n \n \n \n \n {\n !editMode &&\n \n \n }\n \n \n }\n \n \n \n {\n viewMode ?\n \n {getViewModeConsignments()}\n \n :\n \n \n \n \n \n \n {getAreawiseConsignments()}\n \n \n \n \n {getSlotwisePlannedRoutes()}\n \n \n \n \n \n Hub:{location.state.hubName || \"\"} \n \n \n {\n tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED &&\n \n \n \n All \n \n \n \n \n \n }\n \n }\n \n \n \n \n \n {\n viewMode ?\n \n \n {\n location.state.route ?\n \n {location.state.route && location.state.route.routeId} \n \n : null\n }\n {\n location.state.route ?\n \n \n \n \n \n \n \n Driver \n \n \n {location.state.route && location.state.route.assignee ? location.state.route.assignee.name : 'Not Assigned'} \n \n \n \n \n \n \n Helper \n \n \n {location.state.route && location.state.route.helper ? location.state.route.helper.name : 'Not Assigned'} \n \n \n \n \n \n \n Vehicle \n \n \n {location.state.route && location.state.route.assignedVehicle ? location.state.route.assignedVehicle.name : 'Not Assigned'} \n \n \n \n \n \n \n Hub \n \n \n {location.state.route && location.state.route.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n\n \n \n \n Consignments \n \n \n {location.state.route && `${location.state.route.totalConsignment}`.padStart(2, '0')} \n \n \n \n {/* \n \n \n Crates \n \n \n {location.state.route && `${location.state.route.totalCrates}`.padStart(2, '0')} \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Route Details will appear here \n \n }\n \n \n :\n tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n \n \n \n \n \n {draftRoute.route && draftRoute.route.routeId} \n \n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n : null\n }\n \n \n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n Consignments \n \n \n \n {`${getAllSelectedConsignments().length}`.padStart(2, '0')} \n {\n calculateCapacityBreach('consignments') &&\n \n \n }\n \n \n \n \n {/* \n \n \n Crates \n \n \n \n {`${getTotalCrates(getAllSelectedConsignments())}`.padStart(2, '0')} \n {\n calculateCapacityBreach('crates') &&\n \n \n }\n \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Selected Consignments will appear here \n \n }\n {\n getAllSelectedConsignments().length ?\n \n \n \n \n {(provided) => (\n \n \n {draftRoute.route && draftRoute.route.hubName}\n \n \n {getStepperTimelineItems()}\n {provided.placeholder}\n \n )}\n \n \n \n \n : null\n }\n {\n getAllSelectedConsignments().length ?\n \n \n \n \n \n You can also drag and reorder the consigments to change their sequence. \n \n \n \n : null\n }\n \n \n :\n \n \n {\n selectedRoute.code ?\n \n {selectedRoute && selectedRoute.value} \n \n : null\n }\n {\n selectedRoute.code ?\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Hub \n \n \n {selectedRoute.data && selectedRoute.data.hubName} \n \n \n \n \n \n \n Delivery Area \n \n \n \n {getSelectedAreas()} \n \n \n \n \n \n \n \n \n\n \n \n \n Consignments \n \n \n {selectedRoute.data && `${selectedRoute.data.totalConsignment}`.padStart(2, '0')} \n \n \n \n {/* \n \n \n Crates \n \n \n {selectedRoute.data && `${selectedRoute.data.totalCrates}`.padStart(2, '0')} \n \n \n */}\n \n \n \n Delivery Slot \n \n \n \n {getSelectedDeliverySlots()} \n \n \n \n \n \n \n \n Delivery Date \n \n \n {getCurrentSelectedDate()} \n \n \n \n \n \n \n Transit Time \n \n \n {getTransitTime()} \n \n \n \n \n \n \n \n :\n \n Selected Route Details will appear here \n \n }\n \n \n }\n \n {\n tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.PLANNED && !selectedRoute.code ? null : isListView ? getAllSelectedConsignments().length ?\n \n \n \n \n \n \n \n \n {viewMode ? location.state.route && location.state.route.hubName : draftRoute.route && draftRoute.route.hubName} \n \n \n {getListViewTimelineItems()}\n \n \n : null :\n \n toggleListView('map')} item>\n \n Map \n \n \n toggleListView('list')} item>\n \n List \n \n \n \n \n {\n !viewMode ?\n \n \n {\n !isListView &&\n <>\n \n \n \n }\n {\n tabValue === AppConstants.CARREFOUR_HOME_DLVRY_CONSTANTS.CREATE_ROUTE_DATA.TAB_VALUES.UNPLANNED ?\n editMode ?\n <>\n \n \n \n :\n \n :\n \n }\n \n \n : null\n }\n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default CreateRoute;","import { createSlice, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport networkHandler from \"../../../network/networkHandler\";\nimport { EApiMiddlewareMethods } from \"../../../network/networkHandler.types\";\nimport { CodReconciliationState } from \"./reconciliationSlice.types\";\nimport AppConstants from \"../../../constants\";\nimport ReconciliationConstants from \"../../../constants/CodReconciliationConstants\";\nimport { transformDateWithEmptyValues, transformDates, enumerateDaysBetweenDates } from \"../../../utils/helpers.utils\";\n\nexport const fetchCodReconciliation = createAsyncThunk(\n \"Dashboard/FetchCODReconciliation\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"reconcile/dashboard\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nconst initialState: CodReconciliationState = {\n loading: false,\n codReconciliationCount: {\n pendingAmount: 0,\n collectedAmount: 0,\n expectedAmount: 0,\n shortage: 0,\n handedOver: 0,\n excess: 0,\n },\n amountsByPlannedDate: {},\n formattedDates: {},\n filteredDays: {},\n error: \"\",\n};\n\nconst reconciliationSlice = createSlice({\n name: \"Dashboard\",\n initialState,\n reducers: {},\n extraReducers: (builders) => {\n builders\n .addCase(fetchCodReconciliation.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchCodReconciliation.fulfilled, (state, action) => {\n const { payload } = action;\n const { meta: { arg: { params } } } = action;\n const allDates = enumerateDaysBetweenDates(params.startDate, params.endDate, AppConstants.DATE_FORMAT_BACKEND);\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n state.codReconciliationCount = payload.totalAmounts;\n state.amountsByPlannedDate = payload.amountsByPlannedDate || {};\n state.filteredDays = transformDateWithEmptyValues(ReconciliationConstants.RECONCILIATION_CONSTANTS.AMOUNT_VALUES.Amount, payload.amountsByPlannedDate, allDates);\n state.formattedDates = transformDates(allDates);\n })\n .addCase(fetchCodReconciliation.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n });\n },\n});\n\nexport default reconciliationSlice.reducer;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M8.92575 20L8.75875 19.9804C3.51484 19.3218 -0.313023 14.6857 0.0201925 9.39673C0.353408 4.10774 4.73268 -0.00843053 10.0175 1.29667e-05C15.3024 0.00845646 19.6686 4.13859 19.985 9.42863C20.3014 14.7187 16.4588 19.3425 11.2128 19.9843L11.0781 20L10.9824 19.001L11.0918 18.9892C15.8135 18.4129 19.273 14.2521 18.9893 9.49081C18.7056 4.72953 14.7766 1.01143 10.02 1.00298C5.26346 0.994531 1.32137 4.69864 1.02084 9.45889C0.720312 14.2191 4.1651 18.3922 8.88476 18.9853L9.0371 19.003L8.92575 20ZM9.5029 4.9595H10.5029V6.96914H9.5029V4.9595ZM10.5029 7.96574H9.5029V14.9948H10.5029V7.96574Z\",\n fill: \"#4D4D4D\"\n});\n\nvar SvgInfoIcon = function SvgInfoIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 21,\n height: 20,\n viewBox: \"0 0 21 20\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgInfoIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/info-icon.885df939.svg\";\nexport { ForwardRef as ReactComponent };","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles(() =>\n createStyles({\n tooltip: {\n background: COLORS.WHITE\n },\n barChart: {\n width: \"100%\",\n '& .mixed-chart': {\n overflowX: \"auto\",\n overflowY: \"hidden\",\n maxWidth: \"1313px\"\n },\n '& svg .apexcharts-datalabels': {\n transform: \"translate(0px, -8px)\"\n },\n '& .apexcharts-legend-series': {\n paddingRight: \"12px\",\n paddingTop: 8\n },\n '& .apexcharts-legend-text': {\n fontSize: 9,\n fontWeight: 500,\n lineHeight: \"11px\",\n color: COLORS.BLACK\n }\n },\n\n })\n);","import { ApexOptions } from \"apexcharts\";\nimport React from \"react\";\nimport Chart from \"react-apexcharts\";\nimport { useStyles } from \"./BarChartComponent.styles\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\ninterface BarChartsProps {\n options?: ApexOptions;\n seriesObj: any;\n days: any;\n color: any;\n showLegend: boolean;\n}\n\nconst BarCharts = (props: BarChartsProps) => {\n const { days, color, seriesObj, showLegend } = props;\n const classes = useStyles();\n const config: any = {\n series: seriesObj,\n options: {\n colors: color,\n chart: {\n type: 'bar',\n height: 430,\n toolbar: {\n show: false\n },\n width: \"100%\",\n },\n dataLabels: {\n enabled: false\n },\n legend: {\n show: showLegend,\n position: 'top',\n horizontalAlign: 'left',\n markers: {\n width: 10,\n height: 10,\n radius: 4,\n offsetX: 0,\n offsetY: 0,\n padding: 48,\n },\n },\n plotOptions: {\n bar: {\n horizontal: false,\n columnWidth: '40%',\n barHeight: '70%',\n endingShape: 'rounded',\n borderRadius: 4\n },\n },\n stroke: {\n colors: ['transparent'],\n width: 6,\n },\n xaxis: {\n categories: days,\n tickPlacement: \"between\",\n },\n yaxis: {\n crosshairs: {\n show: true,\n position: 'back',\n stroke: {\n color: '#b6b6b6',\n width: 1,\n dashArray: 0,\n },\n },\n tickAmount: 4,\n labels: {\n formatter: function (val: any) {\n return val.toFixed(0)\n }\n },\n },\n grid: {\n show: true,\n borderColor: COLORS.SILVER_CHALICE,\n strokeDashArray: 3,\n padding: {\n right: 40,\n left: 40\n },\n },\n itemMargin: {\n horizontal: 5,\n vertical: 0,\n },\n tooltip: {\n x: {\n show: false\n },\n y: {\n formatter: function (val: any) {\n return val\n }\n }\n },\n noData: {\n text: \"No data available\",\n align: \"center\",\n verticalAlign: \"middle\",\n offsetX: 0,\n offsetY: 0,\n style: {\n fontSize: 14,\n },\n },\n\n },\n };\n\n return (\n \n
\n );\n};\n\nexport default BarCharts;","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n backgroundColor: COLORS.ROUTE_CONTAINER_BACKGROUND,\n },\n container: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n },\n mainContainer: {\n flexWrap: \"nowrap\",\n height: 286,\n paddingLeft: theme.spacing(1),\n },\n heading: {\n fontWeight: 600,\n color: COLORS.MINE_SHAFT,\n fontSize: 24,\n lineHeight: \"29px\",\n },\n subHeading: {\n fontWeight: 500,\n color: COLORS.COPY,\n fontSize: 14,\n lineHeight: \"17px\",\n paddingTop: theme.spacing(1),\n paddingLeft: theme.spacing(1),\n },\n infoText: {\n fontSize: 14,\n fontWeight: 500,\n lineHeight: \"16px\",\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: theme.spacing(1),\n },\n accordion: {\n backgroundColor: COLORS.WHITE,\n boxShadow: `0px 1px 4px ${COLORS.LIGHT_BLACK_SHADOW}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(2),\n },\n accordionSummary: {\n color: COLORS.COPY,\n fontSize: 18,\n fontWeight: 600,\n \"&.MuiAccordionSummary-root\": {\n borderBottom: `0px solid ${COLORS.TRANSPARENT}`,\n },\n },\n accordionStyle: {\n marginTop: theme.spacing(2),\n },\n accordionTitle: {\n fontSize: 18,\n fontWeight: 600,\n },\n expectedAmtText: {\n fontWeight: 500,\n fontSize: 20,\n color: COLORS.MINE_SHAFT,\n lineHeight: \"24px\",\n paddingLeft: theme.spacing(1),\n },\n daysText: {\n color: COLORS.MINE_SHAFT,\n fontSize: 16,\n fontWeight: 500,\n lineHeight: \"16px\",\n marginLeft: theme.spacing(1),\n },\n dataDivs: {\n background: COLORS.WHITE,\n boxSizing: \"border-box\",\n borderRadius: theme.spacing(1),\n border: `1px solid ${COLORS.SECONDARY_DARK}`,\n padding: theme.spacing(2),\n width: 166,\n },\n amountCounts: {\n paddingTop: theme.spacing(1.5)\n },\n firstAmountDiv: {\n paddingRight: theme.spacing(0.75),\n },\n secondAmountDiv: {\n paddingLeft: theme.spacing(0.75),\n },\n amountStatusText: {\n fontWeight: 500,\n fontSize: 14,\n color: COLORS.COPY,\n lineHeight: \"17px\",\n },\n amountStatusData: {\n fontWeight: 600,\n fontSize: 14,\n color: COLORS.MINE_SHAFT,\n lineHeight: \"17px\",\n paddingTop: theme.spacing(1),\n },\n amountStatusSummaryData: {\n fontWeight: 600,\n fontSize: 14,\n color: COLORS.MINE_SHAFT,\n lineHeight: \"17px\",\n paddingTop: theme.spacing(1),\n paddingLeft: 15,\n },\n orderStatusBottonIcon: {\n fontSize: 12,\n border: `2px solid ${COLORS.WHITE}`,\n borderRadius: \"50%\",\n marginRight: theme.spacing(0.75),\n marginBottom: \"auto\",\n },\n orderStatusBottonIconCollected: {\n color: COLORS.PRIMARY_MAIN,\n },\n orderStatusBottonIconHandedOver: {\n color: COLORS.LIGHT_GREEN,\n },\n orderStatusBottonIconPending: {\n color: COLORS.ALERT_ORANGE,\n },\n orderStatusBottonIconExcess: {\n color: COLORS.PICTON_BLUE,\n },\n orderStatusBottonIconShortage: {\n color: COLORS.CORAL_PINK,\n },\n })\n);\n","import React, { useState, useCallback, useEffect, useRef } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { AppState } from \"../../config/redux/reducers\";\nimport moment from \"moment\";\nimport { createCodReconciliationPayload } from \"../../mocks/codReconciliation/response.transforms\";\nimport { fetchCodReconciliation } from \"./redux/reconciliationSlice\";\nimport { userLogout } from \"../../Login/redux/loginSlice\";\n\n//Material UI Components\nimport { Grid, Typography, SvgIcon } from \"@material-ui/core\";\nimport Accordion from \"@material-ui/core/Accordion/Accordion\";\nimport AccordionSummary from \"@material-ui/core/AccordionSummary/AccordionSummary\";\nimport AccordionDetails from \"@material-ui/core/AccordionDetails/AccordionDetails\";\nimport Lens from \"@material-ui/icons/Lens\";\nimport clsx from \"clsx\";\n//Assets\nimport { ReactComponent as infoIcon } from \"../../assets/icons/info-icon.svg\";\nimport ExpandMoreIcon from \"../../assets/icons/expand-accordion-icon.svg\";\nimport calendarIcon from \"../../assets/icons/calendar-icon.svg\";\n\n//Common Components\nimport BarCharts from \"../../common/BarCharts/index\";\nimport DateRangePickerComponent from \"../../common/DateRangeComponent/index\";\nimport Loader from \"../../common/Loader\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\nimport CustomSnackbar from '../../common/CustomSnackbar';\n\n//Style\nimport { useStyles } from \"./reconciliationDashboard.styles\";\n\n//Constants\nimport AppConstants from \"../../constants\";\n\ninterface DashboardProps { }\n\nconst BARCOLORS = [\n COLORS.LIGHT_GREEN,\n COLORS.ALERT_ORANGE,\n COLORS.PICTON_BLUE,\n COLORS.CORAL_PINK,\n];\n\nconst ReconciliationDashboard = (props: DashboardProps) => {\n const classes = useStyles();\n\n const dispatch = useDispatch();\n\n const { codReconciliationCount, loading, filteredDays, formattedDates, errorCode, error } = useSelector(\n (state: AppState) => state.codReconciliation\n );\n\n const [expanded, setExpanded] = useState(true);\n const [datePickerValue, setDatePickerValue] = useState({\n endDate: moment().hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT),\n startDate: moment().subtract(6, 'd').format(AppConstants.DATE_FORMAT),\n });\n const [showLastSevenDays, setShowLastSevenDays] = useState(true);\n\n const [openSnackbar, setOpenSnackbar] = useState(false);\n const snackbarType = useRef(AppConstants.SNACKBAR.TYPES.SUCCESS);\n const snackbarMessage = useRef(\"\");\n\n const openSnackbarPopup = (msg: string, type: string) => {\n snackbarMessage.current = \"No Data present for Requested Date\";\n snackbarType.current = type;\n setOpenSnackbar(true);\n }\n\n const handleSnackbarClose = useCallback(\n () => {\n setOpenSnackbar(false);\n },\n [],\n );\n\n const handleSnackbarExited = useCallback(\n () => {\n if (errorCode === AppConstants.RECONCILIATION_CONSTANTS.RESPONSE_CONSTANTS.ERROR_CODES.SESSION_TIMEOUT) {\n dispatch(\n userLogout()\n );\n }\n },\n [dispatch, errorCode]\n );\n\n\n const handleCreateCodReconciliation = useCallback(\n (date: any) => {\n const params = createCodReconciliationPayload({\n date: date,\n });\n dispatch(\n fetchCodReconciliation({\n params: params,\n })\n );\n },\n [dispatch]\n );\n\n const handleDateChange = useCallback((dateRange: any) => {\n setDatePickerValue(dateRange);\n handleCreateCodReconciliation(dateRange);\n setShowLastSevenDays(false);\n }, [handleCreateCodReconciliation]);\n\n useEffect(() => {\n if (error) {\n openSnackbarPopup(error, AppConstants.SNACKBAR.TYPES.ERROR);\n }\n }, [error])\n\n useEffect(() => {\n handleCreateCodReconciliation(datePickerValue);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n
\n \n \n
\n \n \n \n \n \n \n COD Reconciliation\n \n \n (based on Planned delivery dates)\n \n \n \n \n \n \n All figures are in AED \n \n\n \n \n \n {loading && setExpanded(!expanded)}>\n \n \n \n Expected Amount : {`${codReconciliationCount.expectedAmount}`}\n \n {showLastSevenDays ? (\n \n (Last 7 days)\n \n ) : null}\n \n \n {!expanded ? (\n \n \n \n e.stopPropagation()}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default ReconciliationDashboard;\n","import moment from \"moment\";\nimport AppConstants from \"../../constants\";\n\nexport const createCodReconciliationPayload = (payload: any) => {\n return {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n startDate: moment(payload.date.startDate, AppConstants.DATE_FORMAT)\n .hours(0)\n .minutes(0)\n .seconds(0)\n .format(AppConstants.DATE_FORMAT_BACKEND),\n endDate: moment(payload.date.endDate, AppConstants.DATE_FORMAT)\n .hours(23)\n .minutes(59)\n .seconds(59)\n .format(AppConstants.DATE_FORMAT_BACKEND),\n };\n};\n","import moment from \"moment\";\nimport AppConstants from \"../../constants\";\n\nexport const createPerformancePayload = (payload: any) => {\n\n if (payload) {\n let dateRange = [];\n const selectAllIdx = payload.slots.indexOf(AppConstants.SELECT_ALL.value);\n if (payload.dateRange) {\n if (selectAllIdx > -1 || !payload.slots.length) {\n payload.isDateRange = true;\n dateRange.push({\n startTime: moment(payload.dateRange.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.dateRange.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n }\n else {\n if (payload.slots.length && !payload.slots.includes(AppConstants.SELECT_NONE.value)) {\n payload.isDateRange = false;\n payload.slots.forEach((slot: any) => {\n const splitSlot = slot.split('-');\n const startSlot = splitSlot[0] && splitSlot[0].split(':');\n const endSlot = splitSlot[1] && splitSlot[1].split(':');\n dateRange.push({\n startTime: moment(payload.dateRange.startDate, AppConstants.DATE_FORMAT).hours(startSlot[0]).minutes(startSlot[1]).seconds(startSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.dateRange.endDate, AppConstants.DATE_FORMAT).hours(endSlot[0]).minutes(endSlot[1]).seconds(endSlot[2]).format(AppConstants.DATE_FORMAT_BACKEND),\n })\n })\n }\n else {\n payload.isDateRange = false;\n dateRange.push({\n startTime: moment(payload.dateRange.startDate, AppConstants.DATE_FORMAT).hours(0).minutes(0).seconds(0).format(AppConstants.DATE_FORMAT_BACKEND),\n endTime: moment(payload.dateRange.endDate, AppConstants.DATE_FORMAT).hours(23).minutes(59).seconds(59).format(AppConstants.DATE_FORMAT_BACKEND)\n });\n }\n }\n }\n payload.dateRange = dateRange;\n }\n return {\n countryCode: sessionStorage.getItem(AppConstants.COUNTRY_CODE),\n hubCode: payload.hubCode,\n orderType: payload.orderType,\n dateRange: payload.dateRange,\n isDateRange: payload.isDateRange\n };\n};","import { createSlice, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport networkHandler from \"../../../network/networkHandler\";\nimport { EApiMiddlewareMethods } from \"../../../network/networkHandler.types\";\nimport { PerformanceState } from \"./performanceSlice.types\";\nimport AppConstants from \"../../../constants\";\nimport { transformSelectValues, transformSlots, totalValues, transformPerformanceResponse, transformVolumeResponse, transformDateValues, transformDataIntoArray } from \"../../../utils/helpers.utils\";\n\nexport const fetchFiltersDropdownValues = createAsyncThunk(\n \"PerformanceDashboard/FetchFiltersDropdownValues\",\n async (params, { rejectWithValue }) => {\n try {\n const request = {\n url: `filter/all/${sessionStorage.getItem(AppConstants.COUNTRY_CODE)}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, false, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchPerformanceParameters = createAsyncThunk(\n \"Dashboard/FetchPerformanceParameters\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"operations/dashboard/consignments\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRouteParameters = createAsyncThunk(\n \"Dashboard/FetchRouteParameters\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"operations/dashboard/routes/global\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRouteGlobalParams = createAsyncThunk(\n \"Dashboard/FetchRouteGlobalParams\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"operations/dashboard/routes\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\n\nexport const fetchConsignmentsSlots = createAsyncThunk(\n \"Dashboard/FetchConsignmentsSlots\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"operations/dashboard/consignments/slots\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchRoutesSlots = createAsyncThunk(\n \"Dashboard/FetchRoutesSlots\",\n async (\n {\n params,\n }: {\n params: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: \"operations/dashboard/routes/global/slots\",\n method: EApiMiddlewareMethods.POST,\n data: params,\n } as any;\n const { data } = await networkHandler(request, false, true, false);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nconst routesInitialState = {\n onTimePercentage: \"\",\n handOverOnTimePercentage: \"\",\n unPlannedConsignments: \"\",\n globalStateCount: {},\n slotWise: {},\n formattedSlots: [],\n performanceData: {},\n countsData: {},\n percentageData: {},\n volumeData: {},\n paymentWise: [],\n}\n\nconst consignmentsInitialState = {\n totalConsignments: \"\",\n onTimePercentage: \"\",\n handOverOnTimePercentage: \"\",\n performanceParams: {},\n slotWise: {},\n globalStateCount: {},\n transformedSlots: {},\n countsData: {},\n percentageData: {},\n volumeData: {},\n formattedSlots: [],\n paymentWise: [],\n deliveryTypeWise: [],\n}\n\nconst initialState: PerformanceState = {\n loading: false,\n filtersDropdowns: {\n countriesList: [],\n hubCodeList: [],\n hubNameList: [],\n deliveryAreaList: [],\n deliverySlotList: [],\n orderTypeList: []\n },\n allSlots: [],\n consignments: {\n ...consignmentsInitialState\n },\n error: \"\",\n routes: {\n ...routesInitialState\n },\n routesGlobal: {\n statusWise: {},\n totalRoutes: \"\",\n deliveryTypeWise: [],\n },\n};\n\nconst performanceSlice = createSlice({\n name: \"Dashboard\",\n initialState,\n reducers: {},\n extraReducers: (builders) => {\n builders\n .addCase(fetchFiltersDropdownValues.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchFiltersDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n let hubCodeList: any = {};\n let hubNameList: any = {};\n let deliveryAreaList: any = {};\n let deliverySlotList: any = {};\n let orderTypeList: any = {};\n if (payload.hubMap) {\n Object.keys(payload.hubMap).filter((country: any) => {\n hubCodeList[country] = transformSelectValues(payload.hubMap[country], 'code');\n hubNameList[country] = transformSelectValues(payload.hubMap[country], 'value');\n return true;\n });\n }\n if (payload.deliveryArea) {\n Object.keys(payload.deliveryArea).filter((country: any) => {\n deliveryAreaList[country] = transformSelectValues(payload.deliveryArea[country]);\n return true;\n });\n }\n if (payload.deliverySlot) {\n Object.keys(payload.deliverySlot).filter((country: any) => {\n deliverySlotList[country] = transformSelectValues(payload.deliverySlot[country]);\n return true;\n });\n }\n if (payload.orderType) {\n Object.keys(payload.orderType).filter((country: any) => {\n orderTypeList[country] = transformSelectValues(payload.orderType[country]);\n return true;\n });\n }\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.filtersDropdowns = {\n countriesList: transformSelectValues(payload.countries),\n hubCodeList: hubCodeList,\n hubNameList: hubNameList,\n deliveryAreaList: deliveryAreaList,\n deliverySlotList: deliverySlotList,\n orderTypeList: orderTypeList\n };\n })\n .addCase(fetchFiltersDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchPerformanceParameters.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchPerformanceParameters.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n state.consignments.performanceParams = payload.statusWise;\n let ontimeValue = payload.onTimePercentage;\n let roundedOntimeValue = ontimeValue && Math.round(ontimeValue.replace(\"%\", \"\"));\n state.consignments.onTimePercentage = roundedOntimeValue || 0;\n let handOvervalue = payload.handOverOnTimePercentage;\n let roundedHandoverValue = handOvervalue && Math.round(handOvervalue.replace(\"%\", \"\"));\n state.consignments.handOverOnTimePercentage = roundedHandoverValue || 0;\n state.consignments.slotWise = payload.slotWise || {};\n state.consignments.globalStateCount = payload.globalStateCount || {};\n state.consignments.totalConsignments = totalValues(payload.statusWise);\n state.consignments.formattedSlots = transformSlots(payload.slotWise);\n let transformedPerformance = transformPerformanceResponse(payload.slotWise);\n state.consignments.volumeData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.PERFORMANCE_CONSTANTS.SLOT_VALUES.Volume, transformVolumeResponse(payload.slotWise));\n state.consignments.countsData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.PERFORMANCE_CONSTANTS.SLOT_VALUES.Counts, transformedPerformance);\n state.consignments.percentageData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.PERFORMANCE_CONSTANTS.SLOT_VALUES.Percentages, transformedPerformance);\n state.consignments.paymentWise = transformDataIntoArray(AppConstants.DASHBOARD_CONSTANTS.PERFORMANCE_CONSTANTS.SLOT_VALUES.PaymentWise, payload.paymentWise);\n state.consignments.deliveryTypeWise = transformDataIntoArray(AppConstants.DASHBOARD_CONSTANTS.PERFORMANCE_CONSTANTS.SLOT_VALUES.DeliveryTypeWise, payload.deliveryTypeWise);\n\n })\n .addCase(fetchPerformanceParameters.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchConsignmentsSlots.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchConsignmentsSlots.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n if (payload.allSlots.length) {\n state.allSlots = transformSelectValues(payload.allSlots);\n }\n })\n .addCase(fetchConsignmentsSlots.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRoutesSlots.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchRoutesSlots.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n if (payload.allSlots.length) {\n state.allSlots = transformSelectValues(payload.allSlots);\n }\n })\n .addCase(fetchRoutesSlots.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRouteParameters.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchRouteParameters.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n let ontimeValue = payload.onTimePercentage;\n let roundedOntimeValue = ontimeValue && Math.round(ontimeValue.replace(\"%\", \"\"));\n state.routes.onTimePercentage = roundedOntimeValue || 0;\n let handOvervalue = payload.handOverOnTimePercentage;\n let roundedHandoverValue = handOvervalue && Math.round(handOvervalue.replace(\"%\", \"\"));\n state.routes.handOverOnTimePercentage = roundedHandoverValue || 0;\n state.routes.unPlannedConsignments = payload.unPlannedConsignments;\n state.routes.slotWise = payload.slotWise || {};\n state.routes.globalStateCount = payload.globalStateCount || {};\n state.routes.formattedSlots = transformSlots(payload.slotWise);\n let routesTransformedPerformance = transformPerformanceResponse(payload.slotWise);\n state.routes.volumeData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.ROUTES_PERFORMANCE_CONSTANTS.SLOT_VALUES.Volume, transformVolumeResponse(payload.slotWise));\n state.routes.countsData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.ROUTES_PERFORMANCE_CONSTANTS.SLOT_VALUES.Counts, routesTransformedPerformance);\n state.routes.percentageData = transformDateValues(AppConstants.DASHBOARD_CONSTANTS.ROUTES_PERFORMANCE_CONSTANTS.SLOT_VALUES.Percentages, routesTransformedPerformance);\n state.routes.paymentWise = transformDataIntoArray(AppConstants.DASHBOARD_CONSTANTS.ROUTES_PERFORMANCE_CONSTANTS.SLOT_VALUES.PaymentWise, payload.paymentWise);\n\n })\n .addCase(fetchRouteParameters.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.routes = { ...routesInitialState }\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(fetchRouteGlobalParams.pending, (state) => {\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = true;\n })\n .addCase(fetchRouteGlobalParams.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = \"\";\n state.error = \"\";\n state.loading = false;\n state.routesGlobal.statusWise = payload.statusWise;\n state.routesGlobal.totalRoutes = totalValues(payload.statusWise);\n state.routesGlobal.deliveryTypeWise = transformDataIntoArray(AppConstants.DASHBOARD_CONSTANTS.ROUTES_PERFORMANCE_CONSTANTS.SLOT_VALUES.DeliveryTypeWise, payload.deliveryTypeWise);\n })\n .addCase(fetchRouteGlobalParams.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload\n ? errorPayload.error\n : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n },\n});\n\nexport default performanceSlice.reducer;\n","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n backgroundColor: COLORS.ROUTE_CONTAINER_BACKGROUND,\n overflow: \"scroll\"\n },\n container: {\n margin: \"24px 0px 0px 0px\",\n boxShadow: \"0px 4px 20px rgba(0, 0, 0, 0.06)\",\n backgroundColor: COLORS.WHITE\n },\n title: {\n fontSize: 24,\n fontWeight: 600,\n lineHeight: \"29px\",\n color: COLORS.MINE_SHAFT,\n display: \"flex\",\n alignItems: \"center\"\n },\n subTitle: {\n display: \"flex\",\n justifyContent: \"center\",\n fontSize: 10,\n lineHeight: \"16px\",\n fontWeight: 500,\n fontFamily: \"Montserrat\",\n color: COLORS.TEXT_PRIMARY\n },\n select: {\n borderRadius: 8,\n background: COLORS.WHITE,\n minWidth: 150\n },\n slotsSelect: {\n borderRadius: 8,\n background: COLORS.WHITE\n },\n icon: {\n \"& .MuiOutlinedInput-input\": {\n height: \"40px\",\n },\n },\n tilesView: {\n flexGrow: 1,\n },\n cratesMainDivStyle: {\n background: \"#FFFFFF\",\n border: \"1px solid #D2D2D2\",\n borderRadius: \"8px\",\n },\n mainDivSearchColumn: {\n display: \"grid\",\n float: \"left\",\n marginTop: \"auto\",\n marginBottom: \"auto\",\n height: \"40px\",\n width: \"427px\",\n },\n inputBoxFontStyle: {\n fontFamily: \"Montserrat\",\n fontSize: \"12px\",\n lineHeight: \"1px\",\n color: \"#252525 !important\",\n paddingLeft: \"2px\",\n \"& .MuiFormLabel-root\": {\n fontFamily: \"Montserrat\",\n fontWeight: \"500\",\n fontSize: \"12px\",\n lineHeight: \"1px\",\n color: \"#252525\",\n paddingLeft: \"2px\",\n },\n \"& .MuiFormLabel-root.Mui-focused\": {\n color: \"#252525 !important\",\n },\n \"& .Mui-focused\": {\n color: \"#252525\",\n fontWeight: \"500\",\n },\n \"&$focused\": {\n color: \"#252525 !important\",\n },\n },\n searchStyle: {\n fontFamily: \"Montserrat\",\n fontSize: \"12px\",\n lineHeight: \"8px\",\n textAlign: \"left\",\n height: \"40px\",\n background: \"#FFFFFF\",\n border: \"1px solid #B2B2B2\",\n borderColor: \"#f44336\",\n borderRadius: \"8px\",\n outline: \"0 !important\",\n color: \"#252525\",\n backgroundColor: \"#FFFFFF !important\",\n boxShadow: \"0px 4px 4px rgba(205, 205, 205, 0.23)\",\n \"&:hover\": { backgroundColor: \"#FFFFFF\" },\n \"& .MuiSelect-select:focus\": { background: \"rgba(255,255,255,0.1)\" },\n },\n inputRounded: {\n fontFamily: \"Montserrat\",\n fontSize: \"12px\",\n lineHeight: \"8px\",\n textAlign: \"left\",\n height: \"40px\",\n background: \"#FFFFFF\",\n border: \"1px solid #B2B2B2\",\n borderRadius: \"8px\",\n outline: \"0 !important\",\n backgroundColor: \"#FFFFFF !important\",\n boxShadow: \"0px 4px 4px rgba(205, 205, 205, 0.23)\",\n \"&:hover\": { backgroundColor: \"#FFFFFF\" },\n \"& .MuiSelect-select:focus\": { background: \"rgba(255,255,255,0.1)\" },\n },\n tableDataRow: {\n height: \"56px\",\n background: \"#FFFFFF\",\n },\n tableHeadStyle: {\n height: \"28px\",\n backgroundColor: \"rgba(230, 230, 230, 0.24)\"\n },\n tableDataRowActive: {\n height: \"56px\",\n backgroundColor: COLORS.MADISON_LIGHT,\n },\n tableDataFirstRow: {\n padding: 0,\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n minWidth: \"160px\",\n maxWidth: \"160px\",\n fontWeight: 600,\n height: \"56px\",\n fontFamily: \"Montserrat\",\n fontSize: \"14px\",\n lineHeight: \"17px\",\n color: COLORS.COPY,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"10px\",\n borderRight: \"none\",\n },\n },\n tableDataRowCell: {\n padding: 0,\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n minWidth: \"160px\",\n maxWidth: \"160px\",\n fontWeight: 500,\n height: \"56px\",\n fontFamily: \"Montserrat\",\n fontSize: \"14px\",\n lineHeight: \"17px\",\n color: COLORS.COPY,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"10px\",\n borderRight: \"none\",\n },\n },\n tableDataRowCellActive: {\n padding: 0,\n paddingLeft: \"20px\",\n height: \"56px\",\n fontFamily: \"Montserrat\",\n fontSize: \"14px\",\n lineHeight: \"17px\",\n color: \"#0E5AA7\",\n borderTop: `1px solid ${COLORS.SECONDARY_DARK}`,\n borderBottom: `1px solid ${COLORS.SECONDARY_DARK}`,\n borderRight: `1px solid ${COLORS.SECONDARY_DARK}`,\n },\n gridRow: {\n background: \"#fff\",\n height: \"64px\",\n \"&$selected\": {\n background: COLORS.SUB_HEADER_SELECTED,\n backgroundColor: COLORS.SUB_HEADER_SELECTED,\n height: \"64px\",\n },\n \"&$selected, &$selected:hover\": {\n background: COLORS.SUB_HEADER_SELECTED,\n backgroundColor: COLORS.SUB_HEADER_SELECTED,\n height: \"64px\",\n },\n\n },\n SlotDropDownButtonStyle: {\n cursor: \"pointer\",\n outline: \"0 !important\",\n \"&:hover\": { backgroundColor: \"transparent\" },\n },\n SlotOpenDropDownStyle: {\n marginLeft: \"6px\",\n cursor: \"pointer\",\n outline: \"0 !important\",\n },\n collapseTableCell: {\n paddingBottom: 0,\n paddingTop: 0,\n borderBottom: \"none\",\n borderTop: \"none\",\n paddingLeft: \"0px\",\n \"&.MuiTableCell-sizeSmall\": {\n \"&:last-child\": {\n paddingRight: \"0px\",\n },\n },\n },\n collapseTableCellDiv: {\n maxHeight: \"200px\",\n overflow: \"auto\",\n },\n collapseTableHeaderCellFirst: {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n height: \"36px\",\n borderTop: \"none\",\n },\n collapseTableHeaderCell: {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n height: \"36px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n color: COLORS.COPY,\n borderTop: `1px solid ${COLORS.SECONDARY_DARK}`,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n borderRight: \"none\",\n },\n },\n collapseTableDataRow: {\n height: \"36px\",\n background: COLORS.WHITE,\n },\n collapseTableDataRowCellEmpty: {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n height: \"36px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n color: COLORS.BLACK,\n background: COLORS.WHITE,\n borderBottom: \"none\",\n },\n collapseTableDataRowCell: {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n height: \"36px\",\n color: COLORS.BLACK,\n background: COLORS.WHITE,\n borderRight: `1px solid ${COLORS.SECONDARY_DARK}`,\n borderTop: `1px solid ${COLORS.SECONDARY_DARK}`,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n borderRight: \"none\",\n },\n },\n noRowsSection: {\n borderLeft: `1px solid ${COLORS.SECONDARY_DARK}`,\n marginLeft: \"215px\",\n },\n noRowsText: {\n marginLeft: \"445px\",\n padding: \"24px\",\n fontSize: \"12px\",\n },\n loadingTable: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n translate: \"transform(-50%, -50%)\",\n },\n popperStyle: {\n fontSize: \"10px\",\n fontWeight: 500,\n color: COLORS.WHITE,\n },\n arrowStyle: {\n color: COLORS.BLACK,\n },\n tooltipStyle: {\n background: COLORS.BLACK,\n },\n statusTitle: {\n color: \"#979797\",\n fontSize: \"10px\",\n fontWeight: 500,\n fontFamily: \"Montserrat\",\n lineHeight: \"18px\",\n },\n statusData: {\n color: \"#4D4D4D\",\n fontWeight: 500,\n fontSize: \"16px\",\n lineHeight: \"20px\",\n },\n progressText: {\n color: \"#686868\",\n fontWeight: 500,\n fontSize: \"10px\",\n lineHeight: \"12px\",\n display: \"flex\",\n flexWrap: \"wrap\",\n fontFamily: \"Montserrat\",\n paddingTop: \"8px\"\n },\n linearProgressRoot: {\n height: \"8px\",\n borderRadius: \"4px\",\n },\n linearProgress: {\n marginTop: \"8px\",\n },\n linearProgressBarRoot: {\n borderRadius: 4,\n backgroundColor: COLORS.SECONDARY_DARK,\n },\n linearProgressColorDefault: {\n backgroundColor: COLORS.SECONDARY_DARK,\n },\n linearProgressBarColor: {\n backgroundColor: COLORS.LIGHT_PERSIAN_GREEN,\n },\n linearProgressBarColorInProgress: {\n backgroundColor: COLORS.GOLDEN_BELL,\n },\n loadingDiv: {\n display: \"table\",\n height: \"89%\",\n width: \"100%\",\n textAlign: \"center\",\n },\n loadingDivInner: {\n height: \"100%\",\n width: \"100%\",\n verticalAlign: \"middle\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n spanStyle: {\n marginTop: \"auto\",\n marginBottom: \"auto\",\n fontFamily: \"Montserrat\",\n fontSize: \"24px\",\n fontWeight: 500,\n lineHeight: \"21px\",\n color: COLORS.COPY,\n padding: \"24px\"\n },\n handoverPercent: {\n fontSize: \"12px\",\n lineHeight: \"15px\",\n fontWeight: 600,\n color: COLORS.PERSIAN_GREEN,\n paddingLeft: \"14px\"\n },\n ontimePercent: {\n fontSize: \"12px\",\n lineHeight: \"15px\",\n fontWeight: 600,\n color: COLORS.PALE_PURPLE,\n paddingLeft: \"14px\"\n }\n })\n);","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const headStyles = makeStyles((theme) =>\n createStyles({\n root: {\n width: \"100%\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n overflow: \"auto\",\n },\n paper: {\n width: \"100%\",\n marginBottom: \"24px\",\n },\n container: {\n height: `calc(100vh - 310px)`,\n maxHeight: `calc(100vh - 310px)`,\n width: \"100%\",\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: \"rect(0 0 0 0)\",\n height: 1,\n margin: -1,\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n top: 20,\n width: 1,\n },\n tableHeaderRow: {\n backgroundColor: COLORS.SECONDARY_MAIN,\n },\n tableRowHeaderCell: {\n fontSize: \"12px\",\n lineHeight: \"15px\",\n height: \"4em\",\n },\n tableRowCell: {\n padding: 0,\n fontSize: \"12px\",\n lineHeight: \"15px\",\n },\n tableHeadRowCell: {\n padding: 0,\n paddingLeft: \"10px\",\n paddingRight: \"6px\",\n height: \"30px\",\n width: \"70px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n color: \"#252525\",\n borderTop: `1.27px solid ${COLORS.SECONDARY_DARK}`,\n borderBottom: `1.27px solid ${COLORS.SECONDARY_DARK}`,\n borderRight: `1.27px solid ${COLORS.SECONDARY_DARK}`,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"10px\",\n paddingRight: \"6px\",\n borderRight: \"none\",\n },\n },\n tableDataRowCell: {\n padding: 0,\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n height: \"55px\",\n fontSize: \"14px\",\n fontWeight: 600,\n lineHeight: \"17px\",\n color: \"#4D4D4D\",\n borderTop: `1.27px solid ${COLORS.MADISON_LIGHT}`,\n borderBottom: `1.27px solid ${COLORS.MADISON_LIGHT}`,\n \"&:last-child\": {\n padding: 0,\n paddingLeft: \"15px\",\n paddingRight: \"10px\",\n borderRight: \"none\",\n },\n },\n gridRow: {\n background: \"#fff\",\n \"&$selected\": {\n background: COLORS.MADISON_LIGHT,\n backgroundColor: COLORS.MADISON_LIGHT,\n },\n \"&$selected, &$selected:hover\": {\n background: COLORS.MADISON_LIGHT,\n backgroundColor: COLORS.MADISON_LIGHT,\n },\n },\n gridRowSelected: {\n backgroundColor: `${COLORS.MADISON_LIGHT} !important`,\n },\n infoIconStyle: {\n height: \"20px\",\n width: \"14px\",\n marginLeft: \"12px\",\n paddingTop: \"6px\"\n }\n }));","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const progressStyles = makeStyles((theme) =>\n createStyles({\n linearProgressRoot: {\n height: \"8px\",\n borderRadius: \"4px\",\n },\n linearProgress: {\n marginTop: \"8px\",\n },\n linearProgressBarRoot: {\n borderRadius: 4,\n backgroundColor: COLORS.SECONDARY_DARK,\n },\n linearProgressColorDefault: {\n backgroundColor: COLORS.SECONDARY_DARK,\n },\n linearProgressBarColor: {\n backgroundColor: COLORS.LIGHT_PERSIAN_GREEN,\n },\n linearProgressBarColorInProgress: {\n backgroundColor: COLORS.GOLDEN_BELL,\n },\n }));","import React from \"react\";\n\n//Material UI Components\nimport TableHead from \"@material-ui/core/TableHead\";\nimport Table from \"@material-ui/core/Table\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Box from \"@material-ui/core/Box\";\nimport Collapse from \"@material-ui/core/Collapse\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\nimport { Grid, Typography } from \"@material-ui/core\";\n//Style\nimport { progressStyles } from \"./HubsRowDetails.styles\";\n\n//Assets\nimport SlotOpenDropDown from \"../../assets/icons/SlotOpenDropDown.svg\";\nimport SlotOpenDropDownOpen from \"../../assets/icons/SlotOpenDropDownOpen.svg\";\n\ninterface HubsRowProps {\n classes: any;\n hubData: any;\n hubName: any;\n hubCode: any;\n hubDataIndex: any;\n}\n\n\nconst HubsRow = (props: HubsRowProps) => {\n const { classes, hubData, hubName, hubCode } = props;\n const [open, setOpen] = React.useState(false);\n const progressClasses = progressStyles();\n return (\n \n \n \n
\n ) : (\n \n )}\n \n \n \n Collected \n \n \n {codReconciliationCount.collectedAmount}\n \n \n
\n \n \n \n Handed Over \n \n \n {codReconciliationCount.handedOver}\n \n \n
\n \n \n \n Pending \n \n \n {codReconciliationCount.pendingAmount}\n \n \n
\n \n \n \n Excess \n \n \n {codReconciliationCount.excess}\n \n \n
\n \n \n \n Shortage \n \n \n {codReconciliationCount.shortage}\n \n \n
\n \n \n \n Collected Amount \n \n {codReconciliationCount.collectedAmount}\n \n \n \n
\n \n \n \n Handed Over \n \n {codReconciliationCount.handedOver}\n \n \n \n
\n \n \n \n Pending \n \n {codReconciliationCount.pendingAmount}\n \n \n \n
\n \n \n \n Excess \n {codReconciliationCount.excess} \n \n \n
\n \n \n \n Shortage \n \n {codReconciliationCount.shortage}\n \n \n \n
\n \n \n \n Dashboard \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n <>\n {hubWiseDataLoading &&
\n );\n};\n\nexport default HubwiseDashboard;\n","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme) =>\n createStyles({\n root: {\n padding: theme.spacing(3),\n height: \"100%\",\n backgroundColor: COLORS.ROUTE_CONTAINER_BACKGROUND,\n overflow: \"scroll\"\n },\n title: {\n fontSize: 24,\n fontWeight: 600,\n lineHeight: \"29px\",\n color: COLORS.MINE_SHAFT\n },\n subTitle: {\n display: \"flex\",\n justifyContent: \"center\",\n fontSize: 10,\n lineHeight: \"16px\",\n fontWeight: 500,\n fontFamily: \"Montserrat\",\n color: COLORS.TEXT_PRIMARY\n },\n select: {\n borderRadius: 8,\n background: COLORS.WHITE,\n minWidth: 150\n },\n slotsSelect: {\n borderRadius: 8,\n background: COLORS.WHITE\n },\n icon: {\n \"& .MuiOutlinedInput-input\": {\n height: \"40px\",\n },\n },\n consignments: {\n background: COLORS.WHITE,\n boxShadow: \"0px 4px 8px rgba(0, 0, 0, 0.08)\",\n borderRadius: 8,\n padding: \"6px 24px\",\n height: \"58px\"\n },\n routes: {\n background: COLORS.WHITE,\n boxShadow: \"0px 0px 8px rgba(0, 0, 0, 0.1)\",\n borderRadius: 8,\n padding: \"16px 24px\",\n },\n deliverySection: {\n padding: \"24px 24px 0px 24px\"\n },\n totalText: {\n fontSize: 16,\n fontWeight: 600,\n lineHeight: \"21px\",\n color: COLORS.BLACK,\n },\n consignmentText: {\n fontSize: 14,\n fontWeight: 600,\n lineHeight: \"21px\",\n color: COLORS.BLACK,\n },\n consignmentPercent: {\n fontSize: 32,\n fontWeight: 600,\n lineHeight: \"39px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n },\n subText: {\n fontSize: 12,\n lineHeight: \"12px\",\n color: COLORS.COPY,\n marginTop: theme.spacing(1)\n },\n consignmentData: {\n fontSize: 24,\n color: COLORS.TEXT_PRIMARY,\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: 600,\n padding: theme.spacing(1)\n },\n statusTiles: {\n display: \"flex\",\n },\n tilesView: {\n flexGrow: 1,\n },\n planned: {\n height: 80,\n background: \"linear-gradient(180deg, #843D77 0%, #A7689B 100%)\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n },\n outDelivery: {\n height: 80,\n background: \"linear-gradient(180deg, #1B96C3 0%, #41BCEA 100%);\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n },\n full: {\n height: 80,\n background: \"linear-gradient(180deg, #3ABA71 0%, #7FD2A3 100%);\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n },\n unplanned: {\n height: 80,\n background: \"linear-gradient(180deg, #CF9E36 0%, #F5C45D 100%)\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n minWidth: 170\n },\n undelivered: {\n height: 80,\n background: \"linear-gradient(180deg, #CE3637 0%, #F78283 100%)\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: 12,\n minWidth: 170\n },\n globalStatusTiles: {\n background: \"#FFFFFF\",\n borderRadius: \"8px\",\n height: \"58px\",\n boxShadow: \"0px 4px 8px rgba(0, 0, 0, 0.08)\",\n },\n statusTilesTitle: {\n display: \"flex\",\n alignItems: \"center\",\n alignContent: \"center\",\n paddingTop: \"8px\",\n paddingLeft: \"12px\",\n fontSize: \"12px\",\n lineHeight: \"18px\",\n color: \"#979797\",\n },\n routeStatusTilesTitle: {\n display: \"flex\",\n alignItems: \"center\",\n alignContent: \"center\",\n paddingTop: \"8px\",\n paddingLeft: \"12px\",\n fontSize: \"16px\",\n lineHeight: \"18px\",\n color: \"#979797\",\n },\n data: {\n fontSize: 20,\n fontWeight: 600,\n paddingLeft: 18,\n color: \"#4D4D4D\"\n },\n tiles: {\n display: \"flex\",\n justifyContent: \"space-between\",\n background: COLORS.WHITE,\n boxShadow: \"0px 0px 8px rgba(0, 0, 0, 0.1)\",\n borderRadius: 8,\n height: \"62px\",\n padding: theme.spacing(2)\n },\n tileContent: {\n display: \"flex\",\n alignItems: \"center\"\n },\n deliveryText: {\n background: COLORS.WHITE,\n boxShadow: \"0px 4px 8px rgba(0, 0, 0, 0.08)\",\n borderRadius: 8,\n fontSize: 16,\n color: COLORS.BLACK,\n fontWeight: 500,\n lineHeight: \"20px\",\n marginTop: theme.spacing(2)\n },\n details: {\n cursor: \"pointer\",\n color: theme.palette.primary.main,\n fontWeight: 600,\n fontSize: 12,\n lineHeight: \"15px\"\n },\n subDivision: {\n marginTop: \"4px\",\n padding: \"0px 24px\"\n },\n subDivisionHandover: {\n background: COLORS.PALE_PURPLE,\n borderRadius: 8,\n padding: theme.spacing(1),\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n },\n subDivisionOntime: {\n background: COLORS.PALE_GREEN,\n borderRadius: 8,\n padding: theme.spacing(1),\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n },\n deliveryTiles: {\n display: \"flex\",\n alignItems: \"center\",\n paddingLeft: theme.spacing(2),\n },\n deliveryTileContent: {\n fontSize: 24,\n fontWeight: 600,\n lineHeight: \"29px\",\n color: COLORS.WHITE\n },\n deliveryTilesText: {\n fontSize: 12,\n fontWeight: 600,\n lineHeight: \"15px\",\n color: COLORS.WHITE\n },\n subContainer: {\n marginTop: theme.spacing(2),\n flexWrap: \"nowrap\"\n },\n firstSubContainer: {\n width: \"408px\"\n },\n subDiv: {\n flexGrow: 1\n },\n chartDiv: {\n flexWrap: \"nowrap\",\n height: 300,\n },\n firstTileSection: {\n padding: \"16px 24px\"\n },\n secondTileSection: {\n padding: \"0px 24px 0px 24px\"\n },\n switchStyle: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-around\",\n fontSize: \"14px\",\n fontWeight: 600,\n },\n graphDivision: {\n background: COLORS.WHITE,\n boxShadow: \"0px 4px 8px rgba(0, 0, 0, 0.08)\",\n borderRadius: 8,\n padding: theme.spacing(3),\n },\n tabStylePerformance: {\n border: `1px solid ${COLORS.SECONDARY_DARK}`,\n background: COLORS.MADISON_LIGHT,\n marginRight: \"0px\",\n padding: \"4px 12px\",\n borderRadius: \"4px 0px 0px 4px\"\n },\n tabStyleVolume: {\n border: `1px solid ${COLORS.SECONDARY_DARK}`,\n background: COLORS.MADISON_LIGHT,\n marginRight: \"0px\",\n padding: \"4px 12px\",\n borderRadius: \"0px 4px 4px 0px\"\n },\n horizontalLine: {\n borderBottom: `1px solid ${COLORS.SECONDARY_DARK}`,\n marginTop: theme.spacing(3),\n width: \"100%\",\n },\n statusText: {\n color: COLORS.TEXT_PRIMARY,\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600\n },\n totalData: {\n background: COLORS.PRIMARY_MAIN,\n borderRadius: 108,\n color: COLORS.WHITE,\n fontWeight: 600,\n padding: \"8px 12px\",\n fontSize: 16\n },\n onTimeData: {\n background: COLORS.OCEAN_GREEN,\n borderRadius: \"108px\",\n color: COLORS.WHITE,\n fontWeight: 600,\n padding: \"8px 12px\",\n fontSize: 16\n },\n lateData: {\n background: COLORS.GOLDEN_BELL,\n borderRadius: \"108px\",\n color: COLORS.WHITE,\n fontWeight: 600,\n padding: \"8px 12px\",\n fontSize: 16\n },\n atRiskData: {\n background: COLORS.DARK_RED,\n borderRadius: \"108px\",\n color: COLORS.WHITE,\n fontWeight: 600,\n padding: \"8px 12px\",\n fontSize: 16\n },\n driversTitle: {\n fontSize: 16,\n lineHeight: \"20px\",\n fontWeight: 500,\n color: COLORS.BLACK\n },\n driversSubTitle: {\n fontSize: 10,\n lineHeight: \"12px\",\n color: COLORS.COPY,\n fontWeight: 500,\n paddingTop: theme.spacing(1)\n },\n pieDivision: {\n background: COLORS.WHITE,\n boxShadow: \"0px 4px 8px rgba(0, 0, 0, 0.08)\",\n borderRadius: 8,\n padding: theme.spacing(3),\n marginTop: theme.spacing(2)\n },\n plannedRoutes: {\n height: 80,\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: 12,\n background: COLORS.WHITE,\n boxShadow: \"0px 0px 8px rgba(0, 0, 0, 0.1)\",\n },\n inProgress: {\n height: 80,\n background: COLORS.WHITE,\n boxShadow: \"0px 0px 8px rgba(0, 0, 0, 0.1)\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n },\n completed: {\n height: 80,\n background: COLORS.WHITE,\n boxShadow: \"0px 0px 8px rgba(0, 0, 0, 0.1)\",\n borderRadius: 8,\n color: COLORS.WHITE,\n fontSize: 14,\n fontWeight: 600,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: 12,\n },\n unplannedSection: {\n display: \"flex\",\n alignContent: \"center\",\n padding: theme.spacing(2),\n },\n warningUnplanned: {\n background: COLORS.BASE_RED,\n borderRadius: 8,\n marginTop: \"8px\"\n },\n warningIcon: {\n width: \"20px\",\n marginRight: \"12px\"\n },\n unplannedText: {\n fontSize: 16,\n fontWeight: 600,\n color: COLORS.TEXT_PRIMARY,\n display: \"flex\",\n alignContent: \"center\",\n padding: theme.spacing(2),\n },\n hubSelectionDialogPaperPropsRoot: {\n width: 500,\n height: 300,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n hubSelectionDialogTitle: {\n fontSize: 20,\n fontWeight: 600\n },\n hubSelectionDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '&.heading': {\n '& p': {\n fontSize: 14,\n fontWeight: 400\n }\n },\n '&.hub': {\n paddingTop: theme.spacing(3.75)\n }\n }\n },\n hubSelectionDialogButtonsContainer: {\n justifyContent: \"flex-end\",\n paddingBottom: theme.spacing(7),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n\n })\n);","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles(() =>\n createStyles({\n tooltip: {\n background: COLORS.WHITE\n },\n barChart: {\n width: \"100%\",\n '& svg .apexcharts-datalabels': {\n transform: \"translate(0px, -8px)\"\n },\n '& .apexcharts-legend-series': {\n paddingRight: \"12px\",\n paddingTop: 8\n },\n '& .apexcharts-legend-text': {\n fontSize: 9,\n fontWeight: 500,\n lineHeight: \"11px\",\n color: COLORS.BLACK\n }\n }\n })\n);","import { ApexOptions } from \"apexcharts\";\nimport React from \"react\";\nimport Chart from \"react-apexcharts\";\nimport { useStyles } from \"./AreaChart.styles\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\ninterface AreaChartProps {\n options?: ApexOptions;\n seriesObj: any;\n days: any;\n color: any;\n showLegend: boolean;\n stacked: boolean;\n}\n\nconst AreaChart = (props: AreaChartProps) => {\n const { days, color, seriesObj, showLegend } = props;\n const classes = useStyles();\n const config: any = {\n series: seriesObj,\n options: {\n colors: color,\n chart: {\n height: 350,\n type: 'area',\n toolbar: {\n show: false\n }\n },\n dataLabels: {\n enabled: false\n },\n stroke: {\n show: true,\n curve: 'smooth',\n width: 2,\n },\n legend: {\n show: showLegend,\n position: 'top',\n horizontalAlign: 'left',\n markers: {\n width: 10,\n height: 10,\n radius: 4,\n offsetX: 0,\n offsetY: 0\n },\n },\n plotOptions: {\n area: {\n fillTo: 'origin',\n }\n },\n yaxis: {\n crosshairs: {\n show: true,\n position: 'back',\n stroke: {\n color: '#b6b6b6',\n width: 1,\n dashArray: 0,\n },\n },\n tickAmount: 4,\n min: 0,\n },\n xaxis: {\n categories: days,\n },\n fill: {\n type: \"gradient\",\n gradient: {\n shadeIntensity: 1,\n opacityFrom: 0.8,\n opacityTo: 0.9,\n stops: [100]\n },\n },\n grid: {\n show: true,\n borderColor: COLORS.SILVER_CHALICE,\n strokeDashArray: 3,\n },\n itemMargin: {\n horizontal: 5,\n vertical: 0,\n },\n tooltip: {\n x: {\n show: false\n },\n y: {\n show: false,\n formatter: function (val: any) {\n return val\n }\n },\n marker: {\n show: true,\n },\n },\n noData: {\n text: \"No data available\",\n align: \"center\",\n verticalAlign: \"middle\",\n offsetX: 0,\n offsetY: 0,\n style: {\n fontSize: 14,\n },\n },\n },\n };\n\n return (\n \n
\n )}\n \n }\n \n
\n \n No Data Available\n
\n \n
\n );\n};\n\n\nexport default AreaChart;\n","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles(() =>\n createStyles({\n tooltip: {\n background: COLORS.BLACK\n },\n dashboardChartStyle: {\n margin: 0,\n padding: 0,\n },\n })\n);","import React from \"react\";\nimport { ApexOptions } from \"apexcharts\";\nimport ReactApexCharts from \"react-apexcharts\";\nimport { useStyles } from \"./DonutChartComponent.styles\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\ninterface DonutChartProps {\n options?: ApexOptions;\n pieData: any;\n pieLabel?: any;\n pieColors: any;\n title: any;\n donutLabel: any;\n}\n\nconst DonutChart = (props: DonutChartProps) => {\n const { pieData, pieLabel, pieColors, title, donutLabel } = props;\n const classes = useStyles();\n const config: any = {\n series: pieData,\n options: {\n chart: {\n fontFamily: \"Montserrat\",\n type: \"pie\"\n },\n chartOptions: {\n labels: pieLabel\n },\n title: {\n text: title,\n style: {\n fontSize: 16,\n fontWeight: 600,\n fontFamily: \"Montserrat\",\n color: COLORS.BLACK,\n lineHeight: \"20px\"\n }\n },\n plotOptions: {\n pie: {\n donut: {\n size: \"60%\",\n labels: {\n show: true,\n name: {\n show: true,\n offsetY: 20\n },\n value: {\n show: true,\n fontSize: 24,\n fontFamily: \"Montserrat\",\n fontWeight: 600,\n color: COLORS.BLACK,\n offsetY: -20,\n },\n total: {\n show: true,\n showAlways: true,\n label: donutLabel,\n fontSize: 12,\n fontFamily: \"Montserrat\",\n fontWeight: 500,\n color: COLORS.BLACK,\n formatter: function (w: any) {\n return w.globals.seriesTotals.reduce((a: any, b: any) => {\n return a + b;\n }, 0);\n },\n },\n },\n },\n },\n },\n colors: pieColors,\n labels: pieLabel,\n dataLabels: {\n dropShadow: {\n enabled: false\n },\n },\n legend: {\n show: true,\n position: \"bottom\",\n horizontalAlign: \"center\",\n fontFamily: \"Montserrat\",\n fontSize: 12,\n fontWeight: 500,\n },\n stroke: {\n width: 1\n },\n noData: {\n text: \"No Data Available\",\n style: {\n fontFamily: \"Montserrat\",\n fontSize: 14,\n colors: [\"#000000\"],\n fontWeight: 500,\n },\n verticalAlign: \"middle\"\n },\n tooltip: {\n onDatasetHover: {\n highlightDataSeries: true\n }\n },\n }\n };\n\n\n return (\n <>\n \n
\n \n
\n \n
\n \n );\n};\n\n\nexport default DonutChart;\n","import { createStyles, makeStyles } from \"@material-ui/core\";\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles(() =>\n createStyles({\n tooltip: {\n background: COLORS.BLACK\n },\n dashboardChartStyle: {\n margin: 0,\n padding: 0,\n },\n })\n);","import React from \"react\";\nimport { ApexOptions } from \"apexcharts\";\nimport ReactApexCharts from \"react-apexcharts\";\nimport { useStyles } from \"./PieChartComponent.styles\";\nimport { COLORS } from \"config/theme/baseTheme\";\n\ninterface PieChartProps {\n options?: ApexOptions;\n pieData: any;\n pieLabel?: any;\n pieColors: any;\n title: any;\n}\n\nconst PieChart = (props: PieChartProps) => {\n const { pieData, pieLabel, pieColors, title } = props;\n const classes = useStyles();\n const config: any = {\n series: pieData,\n options: {\n chart: {\n fontFamily: \"Montserrat\",\n type: \"pie\",\n style: {\n padding: \"24px\"\n }\n },\n chartOptions: {\n labels: pieLabel\n },\n title: {\n text: title,\n style: {\n fontSize: 16,\n fontWeight: 600,\n fontFamily: \"Montserrat\",\n color: COLORS.BLACK,\n lineHeight: \"20px\",\n padding: \"24px\"\n }\n },\n plotOptions: {\n pie: {\n donut: {\n size: \"60%\",\n labels: {\n show: true,\n name: {\n show: true,\n offsetY: 20\n },\n value: {\n show: true,\n fontSize: 24,\n fontFamily: \"Montserrat\",\n fontWeight: 600,\n color: COLORS.BLACK,\n offsetY: -20,\n },\n },\n },\n },\n },\n colors: pieColors,\n labels: pieLabel,\n dataLabels: {\n dropShadow: {\n enabled: false\n },\n },\n legend: {\n floating: false,\n show: true,\n position: \"bottom\",\n horizontalAlign: \"center\",\n fontFamily: \"Montserrat\",\n fontSize: 12,\n fontWeight: 500,\n },\n stroke: { width: 0 },\n noData: {\n text: \"No Data Available\",\n style: {\n fontFamily: \"Montserrat\",\n fontSize: 14,\n colors: [\"#000000\"],\n fontWeight: 500,\n },\n verticalAlign: \"middle\"\n },\n tooltip:\n {\n onDatasetHover: {\n highlightDataSeries: true\n }\n },\n }\n };\n\n\n return (\n <>\n \n
\n \n );\n};\n\n\nexport default PieChart;\n","import React, { useState } from \"react\";\nimport { useSelector } from \"react-redux\";\n\n//Material UI Components\nimport { Grid, Typography } from \"@material-ui/core\";\n\n//Style\nimport { useStyles } from \"./performanceDashboard.styles\";\n\n//Common Components\nimport BarCharts from \"../../common/BarCharts\";\nimport AreaChart from \"../../common/AreaChart\";\nimport DonutChart from \"../../common/DonutChart\";\n\n//Constants\nimport { COLORS } from \"../../config/theme/baseTheme\";\n\nimport { AppState } from '../../config/redux/reducers';\nimport PieChart from \"common/PieChart\";\nimport SwitchButton from \"../../common/SwitchButton/SwitchButton\";\n\ninterface ConsignmentDashboardProps { }\n\nconst BARCOLORS_PERFORMANCE = [\n COLORS.PALE_PURPLE,\n COLORS.OCEAN_GREEN\n]\n\nconst BARCOLORS_VOLUME = [\n COLORS.ALICE_BLUE,\n COLORS.INFO_BLUE,\n COLORS.VIBRANT_YELLOW,\n COLORS.VENETIAN_RED,\n COLORS.FOUNTAIN_BLUE,\n COLORS.BRICK_RED,\n COLORS.VERY_LIGHT_GREY,\n]\n\nconst DONUT_COLORS = [\n COLORS.PRIMARY_MAIN,\n COLORS.CORAL_PINK,\n COLORS.PICTON_BLUE,\n COLORS.ALERT_ORANGE\n]\n\nconst PIE_COLORS = [\n COLORS.PRIMARY_LIGHT_BLUE,\n COLORS.PRIMARY_LIGHT,\n COLORS.PRIMARY_MAIN,\n]\n\nconst DONUT_LABELS = [\n 'E-Food', 'Marketplace', 'Non-Food', 'Express Delivery'\n]\n\nconst PIE_LABELS = [\n \"COD\", \"Card on Delivery\", \"Prepaid\"]\n\nconst ConsignmentsDashboard = (props: ConsignmentDashboardProps) => {\n const classes = useStyles();\n\n const { consignments } = useSelector(\n (state: AppState) => state.performance\n );\n const [isChecked, setIsChecked] = useState(false);\n\n\n const handleSwitch = (e: any) => {\n if (isChecked) {\n setIsChecked(false);\n } else {\n setIsChecked(true);\n }\n };\n\n const renderGraphsSection = () => {\n return (\n <>\n {isChecked ?\n \n Unplanned \n {consignments.performanceParams.Unplanned || 0} \n
\n \n Planned /Published \n {consignments.performanceParams['Planned/Published'] || 0} \n
\n \n Preparing/Prepared \n {consignments.performanceParams['Preparing/Prepared'] || 0} \n
\n \n Out for Delivery \n {consignments.performanceParams['Out for Delivery'] || 0} \n
\n \n Delivered \n {(consignments.performanceParams.Delivered + (consignments.performanceParams['Partially Delivered'] || 0)) || 0} \n
\n \n Un-delivered \n {consignments.performanceParams['Un-Delivered'] || 0} \n
\n \n Cancelled \n {consignments.performanceParams['Cancelled'] || 0} \n
\n \n Planned / Published \n {routesGlobal.statusWise['Planned/Published'] || 0} \n
\n \n In Progress \n {routesGlobal.statusWise['In Progress'] || 0} \n
\n \n Completed \n {routesGlobal.statusWise['Completed'] || 0} \n
\n \n \n \n \n \n \n \n \n Dashboard \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {loading && \n \n \n \n \n \n
\n );\n}\n\nexport default PerformanceDashboard;","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n padding: \"0px 12px 0px 12px\",\n height: \"100%\"\n },\n container: {\n flexDirection: \"column\",\n height: \"100%\",\n '& .userItem': {\n width: '100%',\n '&.heading': {\n paddingBottom: theme.spacing(2.5),\n '& p': {\n fontSize: 24,\n color: COLORS.BLACK,\n fontWeight: 600\n }\n },\n '&.content': {\n backgroundColor: COLORS.WHITE,\n //boxShadow: \"0px 4px 4px rgba(0, 0, 0, 0.04)\",\n borderRadius: theme.spacing(1),\n height: \"calc(100vh - 172px)\",\n paddingTop: theme.spacing(1.5),\n '& .userIdLink': {\n margin: 'auto 0px',\n cursor: \"pointer\",\n color: theme.palette.primary.main,\n fontWeight: 600,\n fontSize: 12\n },\n '& .userIdEmailVerified':{\n margin: 'auto 4px',\n padding: 0,\n width: '15px',\n height: '15px',\n fill: COLORS.SEA_GREEN,\n }\n }\n }\n },\n statusHeaderContainer: {\n '& .tag': {\n color: COLORS.WHITE,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5, 1),\n lineHeight: \"14px\",\n backgroundColor: COLORS.BLACK,\n fontWeight: 600,\n textTransform: \"uppercase\",\n fontSize: 12,\n '&.yellow': {\n color: COLORS.GOLDEN_BELL,\n backgroundColor: COLORS.GOLDEN_YELLOW_LIGHT\n },\n '&.green': {\n color: COLORS.PERSIAN_GREEN_DARK,\n backgroundColor: COLORS.PERSIAN_GREEN_LIGHT\n },\n '&.red': {\n color: COLORS.DARK_RED,\n backgroundColor: COLORS.LIGHT_RED\n },\n '&.gray': {\n color: COLORS.GRAY_DARK,\n backgroundColor: COLORS.ALTO\n },\n '&.black': {\n backgroundColor: COLORS.BLACK,\n color: COLORS.WHITE\n }\n }\n },\n actionsHeader: {\n alignItems: \"center\",\n '& .actionItem': {\n cursor: \"pointer\",\n '& .icon': {\n padding: theme.spacing(0.25, 0.5, 0.25, 0.5)\n }\n }\n },\n customDialogPaperPropsRoot: {\n width: 600,\n height: 350,\n margin: \"auto\",\n borderRadius: theme.spacing(1),\n },\n dialogDetailsContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n \"& .contentItem\": {\n \"& p\": {\n textAlign: \"center\",\n lineHeight: 1.2,\n },\n \"&.heading\": {\n padding: theme.spacing(0, 15.75, 5),\n \"& p\": {\n fontSize: 24,\n fontWeight: 600,\n },\n },\n \"&.desc\": {\n padding: theme.spacing(0, 2.5),\n \"& p\": {\n fontSize: 18,\n fontWeight: 400,\n \"& .count\": {\n fontWeight: 600,\n },\n },\n },\n },\n },\n dialogDetailsActionContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(8.25),\n \"& .dialogBtn\": {\n \"&.secondary\": {\n paddingLeft: theme.spacing(8),\n paddingRight: theme.spacing(8),\n marginRight: theme.spacing(1),\n },\n \"&.primary\": {\n paddingLeft: theme.spacing(7.25),\n paddingRight: theme.spacing(7.25),\n marginLeft: theme.spacing(1),\n },\n },\n },\n }),\n);\n","import { createSlice, createAsyncThunk } from \"@reduxjs/toolkit\";\nimport networkHandler from \"../../network/networkHandler\";\nimport { EApiMiddlewareMethods } from \"../../network/networkHandler.types\";\nimport { saveFile, transformSelectMenuValue, transformSelectValues, transformSelectValuesForPhonePrefixes, transformUerTypeListSelectValues } from \"../../utils/helpers.utils\";\nimport { UsersState } from \"./usersSlice.types\";\nimport AppConstants from \"../../constants\";\n\nexport const generateUsername = createAsyncThunk(\n \"Users/GenerateUsername\",\n async ({\n params\n }: {\n params: any;\n }, { rejectWithValue }) => {\n try {\n const request = {\n url: `user/check-username-validity?${params.queryString}`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchAddUserDropdownValues = createAsyncThunk(\n \"Users/FetchAddUserDropdownValues\",\n async (params, { rejectWithValue }) => {\n try {\n const request = {\n url: `user/populate`,\n method: EApiMiddlewareMethods.GET,\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchUsersByFilter = createAsyncThunk(\n \"Users/FetchByFilter\",\n async (\n {\n filters,\n requestContinuationToken\n }: {\n requestContinuationToken?: string;\n filters: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'users/search/filter',\n method: EApiMiddlewareMethods.POST,\n data: filters\n } as any;\n if (requestContinuationToken && filters.page) {\n request.headers = {\n 'x-requestcontinuation-token': requestContinuationToken\n }\n }\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createUserInUaeService = createAsyncThunk(\n \"Users/CreateUserInUaeService\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n try {\n const countryRequest = {\n url: 'country/url',\n method: EApiMiddlewareMethods.GET,\n } as any;\n countryRequest.headers = {\n \"countryISOCode\": payload.countryDetails.code,\n };\n const { data: countryData } = await networkHandler(countryRequest, false, true, false, true);\n sessionStorage.setItem(AppConstants.COUNTRY_URL, countryData.countryUrl);\n } catch (error : any) {\n return rejectWithValue(error.response.data);\n }\n const request = {\n url: 'assignee/register',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const fetchCountryUrl = createAsyncThunk(\n \"Users/FetchCountryUrl\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const countryRequest = {\n url: 'country/url',\n method: EApiMiddlewareMethods.GET,\n } as any;\n countryRequest.headers = {\n \"countryISOCode\": payload,\n };\n const { data: countryData } = await networkHandler(countryRequest, false, true, false, true);\n sessionStorage.setItem(AppConstants.COUNTRY_URL, countryData.countryUrl);\n } catch (error : any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateUserInUaeService = createAsyncThunk(\n \"Users/UpdateUserInUaeService\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'assignee/update',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, false, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const createUserViaSA = createAsyncThunk(\n \"Users/CreateUserViaSA\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'user/create',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const bulkUpdateUsers = createAsyncThunk(\n \"Users/BulkUpdateUsers\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'user/bulkapproval',\n method: EApiMiddlewareMethods.POST,\n data: payload\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const updateUser = createAsyncThunk(\n \"Users/updateUser\",\n async (\n {\n payload\n }: {\n payload: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'user/update',\n method: EApiMiddlewareMethods.PUT,\n data: payload\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const usersResetPwd = createAsyncThunk(\n \"Users/ResetPassword\",\n async (\n {\n userdata\n }: {\n userdata: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'user/forgotPassword',\n method: EApiMiddlewareMethods.POST,\n data: userdata\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const endActiveSession = createAsyncThunk(\n \"Users/EndActiveSession\",\n async (\n {\n driverId\n }: {\n driverId: any;\n },\n { rejectWithValue }\n ) => {\n try {\n const request = {\n url: 'authenticate/invalidate/deviceId',\n method: EApiMiddlewareMethods.GET,\n } as any;\n if (driverId) {\n request.headers = {\n 'user-id': driverId\n }\n }\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nexport const clearList = createAsyncThunk(\"Users/ClearContents\", () => {\n return [];\n});\n\nexport const resetUsersResetPwd = createAsyncThunk(\"Users/ResetUserResetPassword\", () => {\n return false;\n});\n\nexport const resetUsersError = createAsyncThunk(\"Users/ResetError\", () => {\n return \"\";\n});\n\nexport const resetUserCreationStatus = createAsyncThunk(\"Users/ResetUserCreationStatus\", () => {\n return false;\n});\n\nexport const resetUserUpdationStatus = createAsyncThunk(\"Users/ResetUserUpdationStatus\", () => {\n return false;\n});\n\nexport const setLoggedInUser = createAsyncThunk(\"Users/SetLoggedInUser\", () => {\n return false;\n});\n\nexport const closeDialog = createAsyncThunk(\"Users/CloseDialog\", () => {\n return false;\n});\nexport const exportUserInformationToExcel = createAsyncThunk(\"Users/exportUserInformationToExcel\", async ({payload}: {payload: any}, { rejectWithValue }) => {\n try {\n const request = {\n url: 'v1/export/users',\n method: EApiMiddlewareMethods.POST,\n data: payload,\n responseType: \"blob\"\n } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n});\n\nexport const bulkDeleteUser = createAsyncThunk(\"Users/bulkDeleteUser\", async ({payload}: {payload: any}, { rejectWithValue }) => {\n try {\n const request = { url: 'user/delete', method: EApiMiddlewareMethods.DELETE, data: payload } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n});\n\nexport const fetchUsersBuildVersion = createAsyncThunk(\"Users/fetchUsersBuildVersion\", async ({filters, requestContinuationToken}: {requestContinuationToken?: string; filters: any; }, { rejectWithValue }) => {\n try {\n const request = { url: 'users/search/dynamic/filter', method: EApiMiddlewareMethods.POST, data: filters } as any;\n const { data } = await networkHandler(request, true, true);\n return data;\n } catch (error: any) {\n return rejectWithValue(error.response.data);\n }\n }\n);\n\nconst initialState: UsersState = {\n loading: false,\n tableLoading: false,\n userUpdateStatus: false,\n userCreationStatus: false,\n userCreationMsg: \"\",\n userRegisteredStatus: false,\n resetPwdSuccess: false,\n suggestedUsername: \"\",\n userUpdateMsg: \"\",\n endSession: false,\n addUserDropdowns: {\n countriesList: [],\n hubList: [],\n rolesList: [],\n userTypeList: [],\n statusList: [],\n deliveryTypeList: [],\n vehicleTypeList: [],\n vendorList: [],\n serviceTypeList: [],\n vendorListStd: [],\n buildVersionList: [],\n phonePrefixesList: []\n },\n data: { content: [], pageable: { pageNumber: 0 }},\n error: \"\",\n resetPwdMsg: \"\"\n};\n\nconst UsersSlice = createSlice({\n name: \"Users\",\n initialState,\n reducers: {},\n extraReducers: (builders) => {\n builders\n .addCase(generateUsername.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.suggestedUsername = \"\";\n })\n .addCase(generateUsername.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.suggestedUsername = payload.suggestions && payload.suggestions.length ? payload.suggestions[0] : \"\";\n })\n .addCase(generateUsername.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(closeDialog.fulfilled, (state, action) => {\n state.suggestedUsername = \"\";\n })\n .addCase(fetchAddUserDropdownValues.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchAddUserDropdownValues.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n let countriesList: any = {};\n let hubList: any = {};\n let vendorList: any = {};\n let vendorListStd: any = {};\n let phonePrefixesList: any = [];\n if (payload.roleCountryMap) {\n Object.keys(payload.roleCountryMap).filter((role: any) => {\n countriesList[role] = transformSelectValues(payload.roleCountryMap[role]);\n return true;\n });\n }\n if (payload.countryHubMap) {\n Object.keys(payload.countryHubMap).filter((country: any) => {\n hubList[country] = transformSelectValues(payload.countryHubMap[country]);\n return true;\n });\n }\n if (payload.expressCountryVendorMap) {\n Object.keys(payload.expressCountryVendorMap).filter((country: any) => {\n vendorList[country] = transformSelectValues(payload.expressCountryVendorMap[country]);\n return true;\n });\n }\n if (payload.standardCountryVendorMap) {\n Object.keys(payload.standardCountryVendorMap).filter((country: any) => {\n vendorListStd[country] = transformSelectValues(payload.standardCountryVendorMap[country]);\n return true;\n });\n }\n if(payload?.phonePrefixes?.length > 0){\n phonePrefixesList = transformSelectValuesForPhonePrefixes(payload.phonePrefixes);\n }\n state.errorCode = \"\";\n state.error = \"\";\n state.addUserDropdowns = {\n ...state.addUserDropdowns,\n countriesList: countriesList,\n rolesList: transformSelectValues(payload.roles),\n userTypeList: transformUerTypeListSelectValues(payload.userTypes),\n statusList: transformSelectValues(payload.userStatus),\n hubList: hubList,\n deliveryTypeList: transformSelectValues(payload.deliveryTypes),\n vehicleTypeList: transformSelectValues(payload.vehicleTypes),\n vendorList: vendorList,\n vendorListStd: vendorListStd,\n serviceTypeList: transformSelectValues(payload.serviceTypes),\n phonePrefixesList: phonePrefixesList\n };\n }\n })\n .addCase(fetchAddUserDropdownValues.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.addUserDropdowns = {\n countriesList: {},\n rolesList: [],\n userTypeList: [],\n statusList: [],\n hubList: {},\n deliveryTypeList: [],\n vehicleTypeList: [],\n vendorList: [],\n serviceTypeList: [],\n vendorListStd: [],\n buildVersionList: [],\n phonePrefixesList: []\n };\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(clearList.fulfilled, (state, action) => {\n const { payload } = action;\n state.tableLoading = false;\n state.errorCode = \"\";\n state.error = \"\";\n state.data = {\n ...payload,\n content: action.payload,\n };\n })\n .addCase(fetchUsersByFilter.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(fetchUsersByFilter.fulfilled, (state, action) => {\n const {\n payload,\n meta: {\n arg: { filters }\n }\n } = action;\n state.tableLoading = false;\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.data = {\n ...payload,\n content:\n filters.page === 0\n ? [...payload.content]\n : [...state.data.content, ...payload.content],\n };\n }\n })\n .addCase(fetchUsersByFilter.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(createUserViaSA.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(createUserViaSA.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.suggestedUsername = \"\";\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.userCreationStatus = true;\n state.userCreationMsg = `User ${payload.firstName} ${payload.lastName} has been added successfully`;\n }\n })\n .addCase(createUserViaSA.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.userCreationStatus = false;\n state.userCreationMsg = \"\";\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(createUserInUaeService.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(createUserInUaeService.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.suggestedUsername = \"\";\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.userRegisteredStatus = true;\n }\n })\n .addCase(createUserInUaeService.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.userRegisteredStatus = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(bulkUpdateUsers.pending, (state) => {\n state.tableLoading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(bulkUpdateUsers.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.tableLoading = false;\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.userUpdateStatus = true;\n state.userUpdateMsg = payload;\n }\n })\n .addCase(bulkUpdateUsers.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.userUpdateStatus = false;\n state.userUpdateMsg = \"\";\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(updateUser.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.userUpdateStatus = false;\n })\n .addCase(updateUser.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n state.suggestedUsername = \"\";\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.userUpdateStatus = true;\n state.userUpdateMsg = payload;\n }\n })\n .addCase(updateUser.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.userUpdateStatus = false;\n state.userUpdateMsg = \"\";\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(usersResetPwd.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.resetPwdSuccess = false;\n })\n .addCase(usersResetPwd.fulfilled, (state, action) => {\n const payload: any = action.payload;\n state.loading = false;\n if (payload.error) {\n state.resetPwdSuccess = false;\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload\n ? payload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n } else {\n state.errorCode = \"\";\n state.error = \"\";\n state.resetPwdSuccess = true;\n state.resetPwdMsg = payload?.message;\n }\n })\n .addCase(usersResetPwd.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.resetPwdSuccess = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n .addCase(resetUsersResetPwd.fulfilled, (state, action) => {\n const { payload } = action;\n state.resetPwdSuccess = payload;\n })\n .addCase(resetUsersError.fulfilled, (state, action) => {\n const { payload } = action;\n state.errorCode = payload;\n state.error = payload;\n })\n .addCase(resetUserCreationStatus.fulfilled, (state, action) => {\n const { payload } = action;\n state.userCreationStatus = payload;\n })\n .addCase(resetUserUpdationStatus.fulfilled, (state, action) => {\n const { payload } = action;\n state.userUpdateStatus = payload;\n })\n .addCase(endActiveSession.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(endActiveSession.fulfilled, (state, action) => {\n const {\n payload\n } = action;\n state.loading = false;\n if (payload) {\n state.endSession = payload;\n }\n })\n .addCase(endActiveSession.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.tableLoading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload\n ? errorPayload.message\n : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n /** exportUserInformationToExcel */\n .addCase(exportUserInformationToExcel.pending, (state) => {\n state.loading = true;\n state.error = \"\";\n state.errorCode = \"\";\n })\n .addCase(exportUserInformationToExcel.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n if (payload) {\n let filename = `User_Info.xlsx`;\n saveFile(payload, filename);\n }\n })\n .addCase(exportUserInformationToExcel.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload ? errorPayload.message : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n /** bulkDeleteUser */\n .addCase(bulkDeleteUser.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n })\n .addCase(bulkDeleteUser.fulfilled, (state, action) => {\n const { payload } = action;\n state.loading = false;\n })\n .addCase(bulkDeleteUser.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload ? errorPayload.message : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n /** fetchUsersBuildVersion */\n .addCase(fetchUsersBuildVersion.pending, (state) => {\n state.loading = true;\n state.errorCode = \"\";\n state.error = \"\";\n state.addUserDropdowns.buildVersionList = [];\n })\n .addCase(fetchUsersBuildVersion.fulfilled, (state, action) => {\n const { payload, meta: { arg: { filters }}} = action;\n state.loading = false;\n if (payload.error) {\n state.errorCode = payload.error || AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = payload && payload.message ? payload.message : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n }else if(payload?.buildVersion?.length > 0) {\n state.addUserDropdowns.buildVersionList = transformSelectMenuValue(payload.buildVersion);\n }\n })\n .addCase(fetchUsersBuildVersion.rejected, (state, action) => {\n const errorPayload: any = action.payload;\n state.loading = false;\n state.errorCode = errorPayload ? errorPayload.error : AppConstants.RESPONSE_CONSTANTS.ERROR_CODES.DEFAULT_API_FAILED;\n state.error = errorPayload && errorPayload.message ? errorPayload.message : AppConstants.RESPONSE_CONSTANTS.DEFAULT_API_FAILED_ERROR_MSG;\n })\n },\n});\n\nexport default UsersSlice.reducer;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 70,\n cy: 70,\n r: 70,\n fill: \"#0E5AA7\",\n fillOpacity: 0.1\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M104.948 101.98C104.796 99.6493 104.262 97.3596 103.368 95.2019C102.205 92.4017 100.29 89.9783 97.8338 88.2003C95.9348 86.7764 93.7412 85.7953 91.4138 85.3291C87.4005 84.878 83.4732 83.8509 79.753 82.2793C79.4974 82.1023 79.251 81.9124 79.0148 81.7103C85.9988 76.612 89.9952 68.3783 89.6801 59.7371C89.6801 46.0754 80.8692 35 70.0006 35C59.1321 35 50.3212 46.0754 50.3212 59.7371C50.0061 68.3797 54.0041 76.6146 60.9903 81.7124C60.7549 81.9138 60.5094 82.103 60.2547 82.2793C56.5345 83.8508 52.6072 84.878 48.5939 85.3291C46.2665 85.7954 44.0728 86.7765 42.1736 88.2003C39.7178 89.9784 37.8024 92.4018 36.6395 95.2019C35.7456 97.3596 35.2117 99.6494 35.0591 101.98C34.9912 102.985 34.9907 103.994 35.0578 105H105.001C105.001 105 104.96 102.142 104.948 101.98Z\",\n fill: \"#0E5AA7\",\n fillOpacity: 0.3\n});\n\nvar SvgUserProfileIcon = function SvgUserProfileIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 140,\n height: 140,\n viewBox: \"0 0 140 140\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgUserProfileIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/user-profile-icon.935d19d2.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask0email\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 0,\n y: 0,\n width: 22,\n height: 15\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19.4524 0.987061H1.88291C0.856068 0.990631 0.026369 1.76061 0.0287625 2.70776L0 14.7433L1.05539 14.7385L1.0846 2.8022L10.3786 8.44533C10.4647 8.49726 10.5653 8.52497 10.6682 8.52509C10.7695 8.52518 10.8687 8.49814 10.9537 8.44725L20.2502 2.90273L20.2505 13.025C20.2514 13.4324 19.8945 13.7636 19.4528 13.7652H3.19933V14.7433H19.4528C20.4784 14.7396 21.3073 13.971 21.3059 13.025L21.3056 2.70537C21.307 1.75937 20.4781 0.990759 19.4524 0.987061Z\",\n fill: \"white\"\n}));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask0email)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M23.4358 -4.91321H-2.13086V18.6691H23.4358V-4.91321Z\",\n fill: \"#0E5AA7\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask1email\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 1,\n y: 1,\n width: 19,\n height: 7\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19.3891 1.99548H1.81959C1.75463 1.99986 1.69055 2.0119 1.62891 2.03131L9.62548 6.88729L10.6305 7.46927L19.7053 2.05741C19.6057 2.01682 19.498 1.99574 19.3891 1.99548Z\",\n fill: \"white\"\n}));\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask1email)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n}, /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n}, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.7,\n d: \"M23.4358 -4.91321H-2.13086V18.6691H23.4358V-4.91321Z\",\n fill: \"white\"\n}))));\n\nvar SvgEmailIcon = function SvgEmailIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 15,\n viewBox: \"0 0 22 15\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgEmailIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/email-icon.c06f8cfb.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask0mobile\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 0,\n y: 0,\n width: 12,\n height: 21\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.59991 0H2.28802C1.00935 0.0178212 -0.0140252 1.09131 0.000145403 2.39991V17.8759C-0.0140252 19.1845 1.00935 20.258 2.28802 20.2759H8.93904V19.2551H10.9135V20.2732H11.8878V2.39991C11.902 1.09131 10.8786 0.0178212 9.59991 0ZM10.8947 15.2243H0.98044V4.06293H10.8947V15.2243Z\",\n fill: \"white\"\n}));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask0mobile)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17.8319 -2.02759H-5.94336V22.3034H17.8319V-2.02759Z\",\n fill: \"#0E5AA7\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask1mobile\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 0,\n y: 0,\n width: 11,\n height: 20\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.02331 16.2303V17.8497C1.02259 18.6271 1.63707 19.2584 2.39675 19.2606H10.9102V16.2322L1.02331 16.2303ZM6.95298 17.2342V18.2448H4.96516V17.2342H6.95298ZM9.61502 0.995728C10.3747 0.997997 10.9892 1.62926 10.9884 2.40669V3.02828H0.929688V2.40669C0.92897 1.62925 1.54344 0.997986 2.30313 0.995728H9.61502Z\",\n fill: \"white\"\n}));\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask1mobile)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n}, /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n}, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.7,\n d: \"M17.83 -2.02759H-5.94531V22.3034H17.83V-2.02759Z\",\n fill: \"white\"\n}))));\n\nvar SvgNewMobileIcon = function SvgNewMobileIcon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12,\n height: 21,\n viewBox: \"0 0 12 21\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgNewMobileIcon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/new-mobile-icon.591e02e6.svg\";\nexport { ForwardRef as ReactComponent };","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\nimport { COLORS } from \"../config/theme/baseTheme\";\n\nexport const useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n },\n titleContainer: {\n '& .headingContainer': {\n flexDirection: \"column\",\n '& .titleHeading': {\n fontSize: 18,\n fontWeight: 500,\n '& .content': {\n fontWeight: 600\n }\n },\n '& .titleContent': {\n fontSize: 12,\n fontWeight: 600,\n '&.link': {\n cursor: \"pointer\"\n }\n },\n \"& .statusContainer\": {\n \"& .statusIcon\": {\n width: 12,\n height: 12,\n borderRadius: \"50%\",\n '&.yellow': {\n backgroundColor: COLORS.STATUS_YELLOW\n },\n '&.black': {\n backgroundColor: COLORS.TEXT_PRIMARY\n },\n '&.green': {\n backgroundColor: COLORS.PERSIAN_GREEN\n },\n '&.red': {\n backgroundColor: COLORS.DARK_RED\n },\n '&.gray': {\n backgroundColor: COLORS.GRAY_DARK\n },\n },\n '& .statusMsg': {\n paddingLeft: theme.spacing(1),\n '& .status': {\n fontSize: 12\n }\n }\n },\n '& .editIcon': {\n paddingLeft: theme.spacing(1.5),\n '& .icon': {\n cursor: \"pointer\",\n verticalAlign: \"middle\"\n }\n }\n },\n '& .tagContainer': {\n cursor: \"pointer\",\n marginLeft: theme.spacing(2),\n alignSelf: \"center\"\n }\n },\n contentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .detailsHeader': {\n backgroundColor: COLORS.TRANSPARENT_BLUE,\n padding: theme.spacing(3),\n borderRadius: theme.spacing(1),\n '& .detailsHeaderItem': {\n padding: theme.spacing(2.5, 0, 0, 6),\n '&:first-child': {\n padding: 0\n },\n '& .profileIcon': {\n width: 140,\n height: 140\n },\n '& .rightPanelContainer': {\n flexDirection: \"column\",\n '& .rightPanelItem': {\n paddingBottom: theme.spacing(1.5),\n '&:last-child': {\n paddingBottom: 0\n },\n '& .endSessionBtn': {\n minWidth: \"245px\"\n },\n '& .fullname': {\n fontSize: 24,\n fontWieght: 600\n },\n '& .logo': {\n width: 20,\n height: 20\n },\n '& .contact': {\n '& a': {\n fontSize: 14,\n fontWeight: 600,\n textDecoration: \"none\",\n color: theme.palette.text.primary\n },\n paddingLeft: theme.spacing(1),\n '&.mobile': {\n paddingLeft: theme.spacing(1)\n },\n '&.userIdEmailVerified': {\n margin: 'auto 4px',\n padding: 0,\n width: '15px',\n height: '15px',\n fill: COLORS.SEA_GREEN,\n }\n }\n }\n }\n }\n },\n '& .detailsContent': {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n padding: theme.spacing(3, 0, 2, 0),\n '& .contentRow': {\n paddingBottom: theme.spacing(3),\n '& .contentRowContainer': {\n justifyContent: \"space-between\"\n },\n '&:last-child': {\n paddingBottom: 0\n },\n '& .contentColumn': {\n flex: \"2 0 0\",\n '&:last-child': {\n flex: \"1.5 0 0\"\n },\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\"\n },\n '& .label': {\n paddingBottom: theme.spacing(1)\n },\n '& .content': {\n fontWeight: 600\n }\n },\n '&.twoItems': {\n '& .contentColumn': {\n '&:last-child': {\n flex: \"2.5 0 0\"\n }\n }\n },\n '&.btnContainer': {\n '& .contentColumn': {\n flex: \"1 0 auto\",\n '& .resetPasswordBtn': {\n width: \"100%\"\n },\n '& .endSessionBtn': {\n width: \"300px\"\n },\n }\n }\n }\n },\n '& .hubItemsSection': {\n '& .content': {\n width: \"100%\",\n '& .itemsContainer': {\n flexWrap: \"nowrap\",\n '& .item': {\n padding: theme.spacing(2, 0),\n borderBottom: `1px solid ${theme.palette.secondary.dark}`,\n \"&:first-child\": {\n padding: 0,\n paddingBottom: theme.spacing(2)\n },\n '&:last-child': {\n borderBottom: \"none\"\n },\n '& .itemContainer': {\n justifyContent: \"space-between\",\n '& p': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600\n },\n '&.header p': {\n color: COLORS.DOVE_GRAY,\n fontWeight: 500,\n }\n }\n }\n }\n }\n }\n },\n accordionSummary: {\n '& .header': {\n fontSize: 14,\n lineHeight: \"17px\",\n fontWeight: 600\n },\n '& .content': {\n flexGrow: 1\n }\n },\n buttons: {\n width: \"100%\",\n '& .userBtn': {\n '&.secondary': {\n marginRight: theme.spacing(2)\n },\n flexGrow: 1\n }\n },\n dialogPaperPropsRoot: {\n margin: 0,\n marginLeft: \"auto\",\n maxHeight: \"none\",\n height: \"100vh\",\n width: 580\n },\n endSessionSelectionDialogTitle: {\n fontSize: 20,\n fontWeight: 600,\n padding: \"6px 0px 0px 12px\"\n },\n endSessionSelectionDialogPaperPropsRoot: {\n width: 428,\n height: 242,\n margin: \"auto\",\n borderRadius: theme.spacing(1)\n },\n content: {\n fontWeight: 500,\n fontSize: \"14px\",\n lineHeight: \"15px\",\n color: \"#252525\"\n },\n endSessionSelectionDialogContentContainer: {\n flexDirection: \"column\",\n flexWrap: \"nowrap\",\n '& .contentItem': {\n '&.heading': {\n '& p': {\n fontSize: 14,\n fontWeight: 400\n }\n },\n '&.hub': {\n paddingTop: theme.spacing(3.75)\n }\n }\n },\n endSessionDialogButtonsContainer: {\n justifyContent: \"center\",\n paddingBottom: theme.spacing(1),\n '& .dialogBtn': {\n paddingLeft: theme.spacing(4.5),\n paddingRight: theme.spacing(4.5),\n '&.secondary': {\n marginRight: theme.spacing(1)\n },\n '&.primary': {\n marginLeft: theme.spacing(1)\n }\n }\n },\n }),\n);","import React, { forwardRef, ReactElement, Ref, useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport moment from 'moment';\n\nimport { Accordion, AccordionDetails, AccordionSummary, Button, Grid, SvgIcon, Typography } from '@material-ui/core';\nimport { TransitionProps } from \"@material-ui/core/transitions\";\nimport { ReactComponent as editIcon } from './../assets/icons/edit-icon.svg';\nimport { ReactComponent as userProfileIcon } from './../assets/icons/user-profile-icon.svg';\nimport { ReactComponent as emailLogoIcon } from './../assets/icons/email-icon.svg';\nimport { ReactComponent as mobileLogoIcon } from './../assets/icons/new-mobile-icon.svg';\nimport { ReactComponent as downArrowIcon } from './../assets/icons/down-arrow.svg';\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\n\nimport { useStyles } from './UserDetails.styles';\nimport { checkUserRoleAccess } from '../mocks/users/response.transforms';\nimport { COLORS } from '../config/theme/baseTheme';\nimport { endActiveSession } from \"./redux/usersSlice\";\nimport { AppState } from \"../config/redux/reducers\";\n\nimport CustomDialog from '../common/Dialog';\nimport Slide from \"@material-ui/core/Slide\";\nimport CustomSnackbar from '../common/CustomSnackbar';\nimport AppConstants from '../constants/index';\nimport alertIcon from \"./../assets/icons/Alert.svg\";\n\ninterface UserDetailsProps {\n open: boolean;\n user: any;\n closePopup: () => void;\n handleDialogAction?: (type: string) => void;\n}\n\nconst Transition = forwardRef(function Transition(\n props: TransitionProps & { children?: ReactElement\n {(selected as string[]).map((value, index) => {\n const item : any = Object.values(items).flat().find(i => i.value === value) !== undefined ? Object.values(items).flat().find(i => i.value === value) : {name: \"\", value: \"\" };\n return
\n );\n };\n\n useEffect(() => {\n if (!isEqualArrays(Object.values(items).flat(), itemsPrevValues, \"value\")) { \n setItemsDdn([...Object.values(items).flat().map((item) => item.value)]);\n setDdnValue([...Object.values(items).flat().map((item) => item.value)]);\n }\n setItemsPrevValues(Object.values(items).flat());\n }, [items]);\n\n useEffect(() => {\n if (reset) {\n setDdnValue(itemsDdn);\n } else {\n setDdnValue(value);\n }\n }, [value]);\n\n useEffect(() => {\n if (resetAll) {\n setDdnValue(itemsDdn);\n }\n }, [resetAll]);\n\n return (\n