\r\n
\r\n \r\n \r\n {!props.showOrdersMenu ? null : (\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ))}\r\n \r\n ) : (\r\n
\r\n \r\n \r\n {!props.showOrdersMenu ? null : | }\r\n \r\n \r\n {strings.ordersGridOrderNumberLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersGridEmailLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersGridDepositCodeLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersGridDateLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersShippingMethodLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersGridStateLabel}\r\n \r\n | \r\n \r\n \r\n {strings.ordersGridCostLabel}\r\n {strings.costDisclaimer ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n | \r\n | \r\n
\r\n \r\n \r\n {props.items.map((order) => (\r\n \r\n {!props.showOrdersMenu ? null : (\r\n | \r\n \r\n | \r\n )}\r\n \r\n {this.getPlatformOrderNumber(order)}\r\n \r\n {strings.ordersGridTrackingNumberLabel +\r\n ':'}{' '}\r\n {order.trackingNumber}\r\n \r\n | \r\n \r\n \r\n {order.email}\r\n \r\n \r\n {order.mobilePhoneNumber\r\n ? ' \\r' +\r\n strings.ordersGridPhoneShortLabel +\r\n ': ' +\r\n order.mobilePhoneNumber\r\n : ''}\r\n \r\n | \r\n {order.depositCode} | \r\n \r\n {moment(order.insertionTS,'YYYY-MM-DD').format('DD-MM-YYYY')}\r\n | \r\n \r\n {strings.shippingMethods[getObjectKey(shippingMethods,order.shippingMethodId)]}\r\n \r\n | \r\n \r\n \r\n {this.getOrderState(order) + this.canceledPackageInside(order)}\r\n \r\n \r\n {order.failureCause ? `Rechazado: ${order.failureCause}` : null}\r\n \r\n | \r\n \r\n \r\n {!this.isDispatchToLocker(order) && order.cost !== null\r\n ? '$' + order.cost : ''\r\n }\r\n\r\n {!order.insuredValue ? null : (\r\n <>\r\n
\r\n \r\n {\r\n strings.ordersGridItemsTotalAmountLabel\r\n }\r\n : $\r\n {\r\n order.itemsTotalAmount\r\n }\r\n
\r\n {\r\n strings.ordersGridInsuredValueLabel\r\n }\r\n : $\r\n {order.insuredValue}\r\n
\r\n {\r\n strings.ordersGridPrimeOfInsuredValueLabel\r\n }\r\n : $+\r\n {\r\n order.primeOfInsuredValue\r\n }\r\n \r\n }\r\n >\r\n \r\n {\r\n strings.ordersGridprimeOfInsuredValue\r\n }\r\n : +$\r\n {\r\n order.primeOfInsuredValue\r\n }\r\n \r\n \r\n \r\n )}\r\n | \r\n {!props.showOrdersMenu ? null : (\r\n \r\n \r\n | \r\n )}\r\n
\r\n ))}\r\n \r\n
\r\n )}\r\n\r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n appStore:store.app\r\n }\r\n};\r\n\r\nexport default connect(mapStateToProps)(withWidth()(withTheme(Component)))\r\n","import XlsxPopulate from 'xlsx-populate'\r\nimport { saveAs } from 'file-saver'\r\n\r\nexport const saveAsExcel = (data, fileName, object, headers, orderCustomSecurity) => {\r\n const getSheetData = (data, header) => {\r\n var sheetData = []\r\n if (data && data.length) {\r\n var fields = Object.keys(data[0])\r\n\r\n sheetData = data.map(function (row) {\r\n return fields.map(function (fieldName) {\r\n return row[fieldName] ? row[fieldName] : ''\r\n })\r\n })\r\n }\r\n sheetData.unshift(header)\r\n return sheetData\r\n }\r\n\r\n let header = headers\r\n\r\n data = data.map((x) => {\r\n delete x.SaveError\r\n return { ...object, ...x }\r\n })\r\n XlsxPopulate.fromBlankAsync().then(async (workbook) => {\r\n const sheet1 = workbook.sheet(0)\r\n const sheetData = getSheetData(data, header)\r\n const totalColumns = sheetData[0].length\r\n const maxRowsAllowed = 100 // Máximo de órdenes permitidas por carga\r\n\r\n sheet1.cell('A1').value(sheetData)\r\n\r\n const maxStringLength = rango => sheet1.range(rango).reduce((max, cell) => {\r\n const value = cell.value();\r\n if (value === undefined) return max;\r\n return Math.max(max, value.toString().length + 2);\r\n }, 0);\r\n\r\n const columns = Array.from(new Set(Array(totalColumns).fill().map((_, i) => String.fromCharCode(65 + i))))\r\n columns.forEach(column => {\r\n sheet1.column(column).width(maxStringLength(column + '1:' + column + '1000'));\r\n })\r\n\r\n if (fileName === 'Ordenes.xlsx') {\r\n const commonInfo = sheet1.range(\"A1:U1\")\r\n const shipmentInfo = sheet1.range(\"J1:K1\")\r\n const lockerInfo = sheet1.range(\"L1:P1\")\r\n const depositColumn = sheet1.cell(\"Q1\")\r\n\r\n commonInfo.style('fill', 'BFBFBF')\r\n shipmentInfo.style('fill', 'a9d08e')\r\n lockerInfo.style('fill', '9bc2e6')\r\n depositColumn.style('fill', 'f7b500')\r\n\r\n if (orderCustomSecurity) {\r\n const securityInfo = sheet1.range(\"R1:U1\")\r\n securityInfo.style('fill', 'BFBFBF')\r\n }\r\n\r\n } else if (fileName === 'Plantilla ejemplo de órdenes Pudo' || fileName === 'Ordenes no creadas') {\r\n const commonInfo = sheet1.range(\"A1:D1\")\r\n const lockerInfo = sheet1.range(\"E1:I1\")\r\n const shipmentInfo = sheet1.range(\"J1:P1\")\r\n const depositColumn = sheet1.cell(\"Q1\")\r\n commonInfo.style('fill', 'BFBFBF')\r\n lockerInfo.style('fill', '9bc2e6')\r\n shipmentInfo.style('fill', 'a9d08e')\r\n depositColumn.style('fill', 'f7b500')\r\n\r\n if (orderCustomSecurity) {\r\n const securityInfo = sheet1.range(\"R1:U1\")\r\n securityInfo.style('fill', 'BFBFBF')\r\n }\r\n }\r\n\r\n function applyDataValidation(range, options) {\r\n sheet1.range(range).dataValidation({\r\n type: 'list',\r\n formula1: `\"${options.join(',')}\"`,\r\n showDropDown: true\r\n });\r\n }\r\n\r\n if (orderCustomSecurity) {\r\n const typeOptions = ['Dni', 'Alphanumeric', '']\r\n const booleanOptions = ['true', 'false', '']\r\n applyDataValidation(`T2:T${maxRowsAllowed}`, typeOptions)\r\n applyDataValidation(`R2:R${maxRowsAllowed}`, booleanOptions)\r\n applyDataValidation(`S2:S${maxRowsAllowed}`, booleanOptions)\r\n\r\n sheet1.column('R', 'S').style({ numberFormat: '@' })\r\n }\r\n\r\n const range = sheet1.usedRange()\r\n sheet1.row(1).style('bold', true)\r\n range.style('border', true)\r\n return workbook.outputAsync().then((res) => {\r\n saveAs(res, fileName)\r\n })\r\n })\r\n}","const securityOptions = {\r\n RequestSignature: '',\r\n RequestToken: '',\r\n CustomCodeType: '',\r\n CustomCode: '',\r\n}\r\n\r\nconst securityOptionsHeaders = [\r\n 'Firma',\r\n 'Token',\r\n 'Tipo de código de seguridad',\r\n 'Código de Seguridad',\r\n]\r\n\r\nconst exportOrdersBase = {\r\n insertionTS: '',\r\n alias: '',\r\n depositCode: '',\r\n mobilePhoneNumber: '',\r\n mail: '',\r\n trackingNumber: '',\r\n orderStateName: '',\r\n shippingMethod: '',\r\n cost: '',\r\n address: '',\r\n zipCode: '',\r\n lockerId: '',\r\n lockerName: '',\r\n lockerAddress: '',\r\n doorSizeId: '',\r\n doorSizeName: '',\r\n apiWebhookDefinitionId: '',\r\n depositDate: '',\r\n collectedDate: '',\r\n expiredNotCollectedDate: '',\r\n abandonedCollectedDate: '',\r\n}\r\n\r\nconst exportOrdersBaseHeaders = [\r\n 'Fecha',\r\n 'Alias',\r\n 'Código de depósito',\r\n 'Teléfono',\r\n 'Email',\r\n 'Número de seguimiento',\r\n 'Estado de la órden',\r\n 'Método de envío',\r\n 'Precio',\r\n 'Dirección de envío',\r\n 'Código postal',\r\n 'Locker ID',\r\n 'Nombre del locker',\r\n 'Dirección del Locker',\r\n 'ID de puerta',\r\n 'Tamaño de puerta',\r\n 'ID Estado Api',\r\n 'Fecha del depósito del paquete en el locker',\r\n 'Fecha del retiro del paquete del locker',\r\n 'Fecha de vencimiento del retiro del paquete',\r\n 'Fecha de recupero del paquete abandonado',\r\n]\r\n\r\nconst downloadOrdersBase = {\r\n ClientMail: '',\r\n ClientName: '',\r\n ClientPhone: '',\r\n Alias: '',\r\n LockerId: '',\r\n ParcelHeightInMm: '',\r\n ParcelLengthInMm: '',\r\n ParcelWidthInMm: '',\r\n ParcelWeightInGrams: '',\r\n StreetName: '',\r\n StreetNumber: '',\r\n Floor: '',\r\n City: '',\r\n CountrySubdivision: '',\r\n PostalCode: '',\r\n Apartment: '',\r\n DepositCode: '',\r\n}\r\n\r\nexport function downloadOrdersTemplate(orderCustomSecurity) {\r\n if (orderCustomSecurity) {\r\n return { ...downloadOrdersBase, ...securityOptions }\r\n } else {\r\n return downloadOrdersBase\r\n }\r\n}\r\n\r\nexport function exportOrdersTemplate(orderCustomSecurity) {\r\n if (orderCustomSecurity) {\r\n return { ...exportOrdersBase, ...securityOptions }\r\n } else {\r\n return exportOrdersBase\r\n }\r\n}\r\n\r\nexport function exportOrdersHeaders(orderCustomSecurity) {\r\n if (orderCustomSecurity) {\r\n return [...exportOrdersBaseHeaders, ...securityOptionsHeaders]\r\n } else {\r\n return exportOrdersBaseHeaders\r\n }\r\n}","import './orders.css'\r\nimport React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getOrdersAction,\r\n getGroupReadyForCollectAction,\r\n getOrdersForExportAction,\r\n downloadOrderAction,\r\n getStatusAction,\r\n} from '../../../actions/appActions'\r\nimport moment from 'moment'\r\nimport {\r\n Button,\r\n TextField,\r\n FormControl,\r\n Select,\r\n InputLabel,\r\n MenuItem,\r\n Typography\r\n} from '@material-ui/core/index'\r\nimport { strings } from '../../../localization/strings'\r\nimport GridList from './gridList'\r\nimport routes from '../../router/routes'\r\nimport Loader from '../../loaders'\r\nimport WarningIcon from '@material-ui/icons/Warning'\r\nimport {\r\n getObjectKey,\r\n orderStateTypes,\r\n orderTypes,\r\n statusTypes,\r\n} from '../../../server/shared'\r\nimport InfoIcon from '@material-ui/icons/Info'\r\nimport withStyles from '@material-ui/core/styles/withStyles'\r\nimport Tooltip from '@material-ui/core/Tooltip'\r\nimport { saveAsExcel } from '../../components/saveAsExcel'\r\nimport { exportOrdersTemplate, exportOrdersHeaders } from './orderTemplates'\r\nimport { orderReadyAll } from '../../../helpers/restHelpers'\r\n\r\nconst TooltipFontSizeMedium = withStyles({\r\n tooltip: {\r\n fontSize: '0.8em',\r\n },\r\n})(Tooltip)\r\n\r\nconst styles = {\r\n field: {\r\n maxWidth: 200,\r\n height: 64,\r\n padding: 2,\r\n margin: '10px',\r\n },\r\n btnContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n formBtn: {\r\n minWidth: '200px',\r\n maxWidth: 'fit-content',\r\n height: '32px',\r\n margin: '10px',\r\n },\r\n}\r\n\r\nexport const orderStatesFilter = [\r\n orderStateTypes.registered,\r\n orderStateTypes.pendingIncidentResolution,\r\n orderStateTypes.reserved,\r\n orderStateTypes.waitingPickup,\r\n orderStateTypes.orderWaitingPickUpLimit,\r\n orderStateTypes.pendingReservation,\r\n orderStateTypes.customerPickup,\r\n orderStateTypes.abandoned,\r\n orderStateTypes.abandonedCollected,\r\n orderStateTypes.deposited,\r\n orderStateTypes.depositExpired,\r\n orderStateTypes.parcelCollected,\r\n orderStateTypes.inFacility,\r\n orderStateTypes.inTransit,\r\n orderStateTypes.cancelled,\r\n orderStateTypes.returnToSender,\r\n orderStateTypes.outForDelivery,\r\n orderStateTypes.courierDelivered,\r\n orderStateTypes.lockerPickup,\r\n orderStateTypes.unableToPickup,\r\n]\r\n\r\nclass Component extends React.Component {\r\n state = {\r\n fetching_orders: true,\r\n fromDate: moment().add(-7, 'days').format('YYYY-MM-DD'),\r\n toDate: moment().format('YYYY-MM-DD'),\r\n orderNumber: '',\r\n rows: [],\r\n filteredOrders: [],\r\n totalRows: 0,\r\n fetching_pdf: false,\r\n status: '',\r\n orderCustomSecurity: this.props.appStore.userPermissions.some(\r\n (x) => x === 'orderCustomSecurity'\r\n ),\r\n ordersGroupedToReadyForCollect: [],\r\n readyForCollect: 0\r\n }\r\n\r\n getStatus = () =>\r\n new Promise((resolve, reject) => {\r\n this.props\r\n .getStatusAction(this.props.history)\r\n .then((status) => {\r\n this.setState({ status: status })\r\n resolve()\r\n })\r\n .catch((error) => {\r\n if (error.additionalData)\r\n window.showDialog(\r\n { message: error.additionalData },\r\n () => this.props.logOutAction()\r\n )\r\n else\r\n window.showDialog(error, () =>\r\n this.props.logOutAction()\r\n )\r\n reject()\r\n })\r\n })\r\n\r\n getOrders = (pageIndex, rowsPerPage) => {\r\n if (!pageIndex) pageIndex = this.state.paginatorPageIndex || 1\r\n if (!rowsPerPage)\r\n rowsPerPage =\r\n this.state.paginatorRowsPerPage ||\r\n localStorage.getItem('paginatorRowsPerPage') ||\r\n 10\r\n\r\n this.setState({ fetching_orders: true })\r\n\r\n if (rowsPerPage !== this.state.paginatorRowsPerPage) {\r\n pageIndex = 1\r\n localStorage.setItem('paginatorRowsPerPage', rowsPerPage)\r\n }\r\n\r\n var data = {\r\n fromDate: this.state.fromDate,\r\n toDate: this.state.toDate,\r\n orderNumber: this.state.orderNumber,\r\n pageIndex: pageIndex,\r\n pageSize: rowsPerPage,\r\n orderStateId: this.state.orderStateId || 0,\r\n orderTypeId: this.state.orderTypeId || 0,\r\n }\r\n\r\n this.props\r\n .getOrdersAction(data)\r\n .then((x) => {\r\n let rows = x.data\r\n ? x.data.map((x) => ({ ...x, checked: false }))\r\n : []\r\n let ordersWaitingPickUpLimit = rows.filter(x => x.isGroupedToReadyForCollect === true)\r\n let ordersCreated = rows.filter(x => x.isGroupedToReadyForCollect === false)\r\n\r\n if (this.state.orderStateId === 99) {\r\n rows = ordersWaitingPickUpLimit\r\n } else if (this.state.orderStateId === 1) {\r\n rows = ordersCreated\r\n }\r\n\r\n this.setState({\r\n fetching_orders: false,\r\n rows: rows,\r\n totalRows: x.totalRows, //mock\r\n paginatorRowsPerPage: rowsPerPage,\r\n paginatorPageIndex: pageIndex,\r\n })\r\n })\r\n .catch((error) => {\r\n window.showDialog(error)\r\n this.setState({ fetching_orders: false })\r\n })\r\n }\r\n\r\n getGroupReadyForCollect = () => {\r\n this.props\r\n .getGroupReadyForCollectAction()\r\n .then((response) => {\r\n this.setState({ ordersGroupedToReadyForCollect: response.groupReady })\r\n this.setState({ readyForCollect: response.readyForCollect })\r\n })\r\n }\r\n getOrdersForExport = () => {\r\n var data = {\r\n fromDate: this.state.fromDate,\r\n toDate: this.state.toDate,\r\n identifier: this.state.orderNumber,\r\n orderStateId: this.state.orderStateId || '',\r\n orderTypeId: this.state.orderTypeId || '',\r\n }\r\n this.setState({ fetching_orders: true })\r\n this.props\r\n .getOrdersForExportAction(data)\r\n .then((x) => {\r\n if (x !== null) {\r\n x.forEach((x) => {\r\n if (x.shippingMethod === 'Standard') {\r\n x.shippingMethod = 'Smart Locker'\r\n } else if (x.shippingMethod === 'ShipToAddress') {\r\n x.shippingMethod = 'Envío a Domicilio'\r\n }\r\n x.insertionTS = moment(x.insertionTS).format('DD-MM-YYYY')\r\n if (x.depositDate) x.depositDate = moment(x.depositDate).format('DD-MM-YYYY HH:mm')\r\n if (x.collectedDate) x.collectedDate = moment(x.collectedDate).format('DD-MM-YYYY HH:mm')\r\n if (x.expiredNotCollectedDate) x.expiredNotCollectedDate = moment(x.expiredNotCollectedDate).format('DD-MM-YYYY HH:mm')\r\n if (x.abandonedCollectedDate) x.abandonedCollectedDate = moment(x.abandonedCollectedDate).format('DD-MM-YYYY HH:mm')\r\n Object.keys(orderStateTypes).forEach((y) => {\r\n if (x.orderStateName.charAt(0).toLowerCase() + x.orderStateName.slice(1) === y) {\r\n x.orderStateName = strings.orderStateFilter[getObjectKey(orderStateTypes, x.orderStateId)]\r\n }\r\n })\r\n })\r\n }\r\n this.setState({\r\n fetching_orders: false,\r\n filteredOrders: x\r\n })\r\n saveAsExcel(this.state.filteredOrders, 'Ordenes.xlsx', exportOrdersTemplate(this.state.orderCustomSecurity), exportOrdersHeaders(this.state.orderCustomSecurity), this.state.orderCustomSecurity)\r\n })\r\n .catch((error) => {\r\n window.showDialog(error)\r\n this.setState({ fetching_orders: false })\r\n })\r\n }\r\n\r\n getOrderLabel = (orderId, print) => {\r\n this.setState({ fetching_pdf: true })\r\n this.props\r\n .downloadOrderAction(orderId, print)\r\n .then(() => this.setState({ fetching_pdf: false }))\r\n .catch((error) => {\r\n this.setState({ fetching_pdf: false })\r\n window.showDialog(error)\r\n })\r\n }\r\n\r\n getOrderLabels = (orderIds, print) => {\r\n this.setState({ fetching_pdf: true })\r\n this.props\r\n .downloadOrderAction(orderIds[0], print)\r\n .then(() => this.setState({ fetching_pdf: false }))\r\n .catch((error) => {\r\n this.setState({ fetching_pdf: false })\r\n window.showDialog(error)\r\n })\r\n }\r\n\r\n openInfoDialog = () => {\r\n window.showDialog({ message: strings.infoDialogText, title: ' ' })\r\n }\r\n\r\n goToBillingInformation = () => {\r\n this.props.history.push({\r\n pathname: routes.billingInformation.path,\r\n })\r\n }\r\n\r\n viewOrder = (orderId) => {\r\n this.props.history.push({\r\n pathname: routes.tracking.path,\r\n state: { orderId: orderId },\r\n })\r\n }\r\n\r\n handleCheckAllOrders = (event) => {\r\n let rows = this.state.rows.map((x) => ({\r\n ...x,\r\n checked: event.target.checked,\r\n }))\r\n this.setState({ rows: rows })\r\n }\r\n\r\n handleCheckOrder = (event) => {\r\n let orderId = parseInt(event.target.name)\r\n let rows = this.state.rows.map((x) =>\r\n x.id === orderId ? { ...x, checked: event.target.checked } : x\r\n )\r\n this.setState({ rows: rows })\r\n }\r\n\r\n componentDidMount() {\r\n this.getStatus()\r\n .then(() => {\r\n this.getGroupReadyForCollect()\r\n this.getOrders();\r\n })\r\n }\r\n\r\n getFilterStateString(stateId) {\r\n return strings.orderStateFilter[getObjectKey(orderStateTypes, stateId)]\r\n }\r\n\r\n handleOrdersReady = (ordersIds) => {\r\n window.showDialog(\r\n {\r\n title: strings.orderReadyDialogTitle,\r\n message: strings.ordersReadyDialogText,\r\n },\r\n () => {\r\n orderReadyAll(ordersIds)\r\n .then((response) => {\r\n if (response.data.error.length > 0) {\r\n window.showDialog(\r\n {\r\n title: strings.orderReadyAllErrorTitle,\r\n message: strings.orderReadyAllError,\r\n }\r\n )\r\n } else {\r\n window.showDialog(\r\n {\r\n title: strings.orderReadyAllSuccessTitle,\r\n message: strings.orderReadyAllSuccess,\r\n },\r\n () => {\r\n this.getOrders();\r\n window.location.reload()\r\n }\r\n )\r\n }\r\n })\r\n .catch((error) => {\r\n window.showDialog(error)\r\n })\r\n },\r\n () => { }\r\n )\r\n }\r\n\r\n render() {\r\n let ordersReadyToPickUp = this.state.readyForCollect\r\n let minimumGroupToReadyForCollect = this.props.appStore.minimumGroupToReadyForCollect\r\n let remainingOrders = minimumGroupToReadyForCollect - this.state.ordersGroupedToReadyForCollect.length\r\n\r\n if (this.state.fetching_orders || this.state.fetching_pdf)\r\n return
\r\n\r\n return (\r\n
\r\n {this.state.status.status === statusTypes.Registered ? (\r\n
\r\n \r\n \r\n \r\n {strings.cantOperate}\r\n \r\n ) : this.state.status.status ===\r\n statusTypes.PendingValidation ? (\r\n
\r\n \r\n \r\n \r\n {strings.pendingValidation}\r\n 
\r\n