\n
\n\n
\n
\n {\n this.state.error === false ?\n
}\n type=\"success\"\n />\n :\n null\n }\n\n
\n
\n
\n
\n
\n {\n !this.state.updatedStatus ?\n \n \n \n \n }\n\n
\n
\n
\n
\n );\n }\n}\n\nfunction mapStateToProps({ auth }) {\n return ({\n error: auth.error\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n resetPassword,\n clearAuthErrors\n }),\n withTranslation('common')\n)(Form.create({name:'sendResetPassword'})(ResetPassword));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport {passwordSent, signoutUser} from '../../actions/authActions';\n\nimport img from '../../images/janio-main-logo-new.png';\nimport chineseImg from '../../images/janio-main-logo-chinese.png';\nimport _ from \"lodash\";\nimport { history } from '../../utils/historyUtils';\nimport backgroundImg from \"../../images/janio-login-background.png\";\nimport {Alert, Button, Divider, Form} from \"antd\";\nimport i18n from 'i18next';\nimport {Trans, withTranslation} from \"react-i18next\";\nimport Input from \"antd/es/input\";\nimport compose from \"recompose/compose\";\n\nclass PasswordSent extends Component {\n constructor() {\n super();\n this.state = {\n newPassword: '',\n newPasswordConfirm: '',\n error: false,\n success: false,\n errorData: '',\n };\n }\n\n componentDidMount() {\n\n }\n\n componentDidUpdate() {\n if (this.props.resetPasswordError === false){\n this.props.signoutUser(history)\n }\n }\n\n componentWillUnmount() {\n\n }\n\n handleOnChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleKeyUp(e) {\n if (e.keyCode === 13 || e.which === 13) {\n if (this.state.newPassword.length > 0 && this.state.newPasswordConfirm.length > 0) {\n this.handleResetPassword(e);\n }\n }\n }\n\n handleResetPassword = (e) => {\n e.preventDefault()\n let {newPassword, newPasswordConfirm} = this.state\n if (newPassword !== newPasswordConfirm) {\n this.setState({\n error:true,\n errorData:
\n })\n } else if (newPassword.length < 8) {\n this.setState({\n error:true,\n errorData:
\n })\n } else {\n this.setState({\n error:false,\n errorData: '',\n success:true\n })\n const resetToken = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);\n\n if (resetToken !== null) {\n this.props.form.validateFieldsAndScroll((err, values) => {\n if (!err) {\n this.props.passwordSent(values.newPassword, resetToken);\n }\n });\n }\n }\n }\n\n renderAlerts = () => {\n let errorDataDiv = null;\n let successDataDiv= null;\n\n if (this.state.errorData !== undefined && !_.isEmpty(this.state.errorData) && this.state.error) {\n errorDataDiv =\n
\n\n return errorDataDiv;\n }\n\n if (this.state.success) {\n successDataDiv =\n
}\n type=\"success\"\n />\n\n return successDataDiv;\n }\n }\n\n render() {\n const { getFieldDecorator } = this.props.form\n return (\n
\n
\n\n
\n
\n {this.renderAlerts()}\n
\n
\n
\n
\n
\n \n
\n
\n
\n );\n }\n}\n\nfunction mapStateToProps({auth}) {\n return ({\n resetPasswordError: auth.error\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n signoutUser,\n passwordSent\n }),\n withTranslation('common')\n)(Form.create({name:'resetPassword'})(PasswordSent));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { clearOrderErrors } from '../../actions/orderActions';\n\nimport SubmitSuccessMessage from '../common/SubmitSuccessMessage';\n\nclass SubmitOrderSuccess extends Component {\n constructor(props) {\n super(props);\n this.state = {\n\n };\n }\n\n componentDidMount() {\n this.props.clearOrderErrors();\n }\n\n render() {\n const title = \"Order Submitted!\";\n\n const subTitleList = [\n 'Orders submitted before 1pm will be picked up between 2pm-6pm on the same day.',\n 'Kindly paste the barcode label and commercial invoice on the packaging before pickup.'\n ];\n\n const secondaryButtonsList = [\n {\n link: '/submit-order/',\n text: 'Submit Another by Form'\n },\n {\n link: '/submit-order-csv/',\n text: 'Submit Another by CSV / Excel'\n }\n ];\n\n const mainButtonList = [\n {\n link: '/view-orders/',\n text: 'Manage Orders'\n }\n ];\n\n return (\n
\n
\n );\n }\n}\n\nfunction mapStateToProps() {\n return ({\n\n });\n}\n\nexport default connect(mapStateToProps, { clearOrderErrors })(SubmitOrderSuccess);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport compose from 'recompose/compose';\nimport Select from 'react-select';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass DropdownField extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selected: false,\n anchorEl: null\n };\n }\n\n handleOnChange = (e) => {\n this.props.onChange(e);\n this.setState({\n selected: true\n })\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n render() {\n // const { classes } = this.props;\n // const { anchorEl } = this.state;\n // const open = Boolean(anchorEl);\n\n const {\n // fieldName,\n placeholder,\n clearValue,\n i18nKey,\n labelClassName,\n dropdownClassName,\n disableLabel,\n isMulti,\n allowPickup,\n renderItems,\n loading,\n value\n } = this.props;\n\n return (\n
\n {\n !disableLabel ?\n
\n :\n null\n }\n {\n !clearValue ?\n
this.handleOnChange(e)}\n options={renderItems}\n />\n :\n this.handleOnChange(e)}\n options={renderItems}\n />\n }\n \n );\n };\n}\n\nfunction mapStateToProps() {\n return ({\n\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {}),\n withStyles(styles),\n withTranslation('common')\n)(DropdownField);\n","import React, { useMemo } from 'react'\nimport { connect } from 'react-redux'\nimport compose from 'recompose/compose'\nimport { withTranslation } from 'react-i18next'\nimport DropdownField from '../common/DropdownField'\n\nconst SelectService = props => {\n const { serviceValue, clearValue, onChange } = props\n\n const renderService = useMemo(() => {\n let options = [{\n serviceId: 0,\n value: 'All Services',\n label: props.t('common.allServices')\n }]\n if (!props.service) return options\n\n props.service.forEach(item => {\n options.push({\n serviceId: item.service_id,\n value: item.service_name,\n label: item.service_name\n });\n })\n\n return options\n }, [props.service])\n\n return useMemo(() =>\n
\n , [serviceValue, props.service])\n}\n\nfunction mapStateToProps({ order }) {\n return ({\n service: order.service\n });\n}\n\nexport default compose(\n connect(mapStateToProps),\n withTranslation('common')\n)(SelectService)","import React from 'react'\n\nconst MPSIcon = ({ orderType }) => {\n const src = orderType === 'MPS'\n ? 'https://janio-b2c-documents.s3.ap-southeast-1.amazonaws.com/mps_parent.png'\n : 'https://janio-b2c-documents.s3.ap-southeast-1.amazonaws.com/mps_child.png'\n\n return (\n
\n )\n}\n\nexport default MPSIcon\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { ClipLoader } from 'react-spinners';\nimport { connect } from \"react-redux\";\nimport 'react-datepicker/dist/react-datepicker.css';\nimport moment from 'moment';\nimport ReactTable from \"react-table\";\nimport \"react-table/react-table.css\";\nimport _ from 'lodash';\nimport axios from 'axios';\nimport compose from 'recompose/compose';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { DatePicker, Modal, message, Alert, Select, Pagination } from 'antd';\nimport { history } from \"../../utils/historyUtils\";\nimport { capitalizeUnderscore } from \"../../utils\"\nimport queryString from 'query-string'\nimport print from '../../images/print.png'\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n fetchAllCountries,\n fetchService,\n fetchStatuses,\n fetchPrevious,\n fetchNext,\n fetchOrderByFilter,\n deleteOrder,\n clearOrderErrors\n} from '../../actions/orderActions';\nimport {ROOT_URL} from '../../actions/index';\n\nimport twoGoExpressLogo from '../../images/twoGoExpress.svg';\nimport stickerLogo from '../../images/janio-sticker-logo.svg';\n\n// import DropdownField from '../common/DropdownField';\nimport SelectServices from \"./SelectServices\";\nimport MPSIcon from \"./viewOrderDetails/components/MPSIcon\";\n\nconst { Option, OptGroup } = Select\n\nconst styles = theme => ({\n fab: {\n margin: theme.spacing.unit,\n },\n extendedIcon: {\n marginRight: theme.spacing.unit,\n },\n});\n\nconst { RangePicker } = DatePicker;\n\nconst initialState = {\n error: true,\n fetched: false,\n assigned: false,\n fetchedOrders: false,\n\n urlParamsList: [],\n dataObj: {},\n secretKey: '',\n serviceId: 0,\n serviceValue: null,\n clearValue: null,\n fromDate: moment().subtract(90, 'days').startOf('day'),\n toDate: moment().endOf('day'),\n pickupDateFrom: null,\n pickupDateTo: null,\n pickupDate: null,\n trackingNo: '',\n shipperOrderId: '',\n statusCode: '',\n uploadBatchNo: '',\n pickupCountry: '',\n consigneeCountry: '',\n consigneeName: '',\n consigneeEmail: '',\n phoneNumber: '',\n\n shipperOrderIdStatus: true,\n trackingNoStatus: true,\n statusCodeStatus: true,\n createdOnStatus: true,\n consigneeNameStatus: false,\n consigneeEmailStatus: false,\n pickupCountryStatus: false,\n consigneeCountryStatus: false,\n consigneeAddressStatus: false,\n consigneeCustomsDocuments: false,\n phoneNumberStatus: true,\n uploadBatchNoStatus: false,\n isProcessing: false,\n pickupDateStatus: false,\n forwardTrackingNoStatus: false,\n orderTypeStatus: false,\n identification_document_name: false,\n consignee_identifcation_number: false,\n\n selectAll: false,\n page: 1,\n pageSize: 50,\n selectedDataList: [],\n selectedAllDataList: [],\n lastUpdated: moment(),\n loading: false,\n showAllPageNums: false,\n printingOrder: [],\n isPrinting: false,\n showPrintingModal: false,\n confirmingCancelOrders: [],\n cancellingOrders: [],\n\n // New States to eliminate filter-refresh bug\n queryId: 0,\n data: undefined,\n totalOrders: undefined,\n totalPages: undefined,\n selectedService: null,\n\n publicStatusCode: \"\"\n};\n\n\nclass ViewOrders extends Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n\n this.debouncedFetch = _.debounce(this.fetchOrders, 1000);\n }\n\n componentDidMount() {\n const location = window.location.search\n const queries = queryString.parse(location)\n const shipperOrderIds = queries['ids[]'] || queries.ids || queries.id\n const ids = shipperOrderIds instanceof Array ? shipperOrderIds.join():shipperOrderIds\n\n if (ids) {\n queries.shipperOrderId = ids\n }\n if (Object.keys(queries).length) {\n this.setState(queries)\n }\n\n this.props.fetchShipperDetails();\n if (this.props.publicStatuses === undefined) {\n this.props.fetchStatuses();\n }\n if (this.props.countries === undefined) {\n this.props.fetchAllCountries();\n }\n }\n\n componentDidUpdate() {\n // if (this.state.hasReturnFeature !== this.props.hasReturnFeature) {\n // const { hasReturnFeature } = this.props\n // this.setState({\n // hasReturnFeature: hasReturnFeature,\n // orderTypeStatus: hasReturnFeature,\n // forwardTrackingNoStatus: hasReturnFeature\n // })\n // }\n\n if (this.state.secretKey && !this.state.fetchedOrders) {\n this.fetchOrders();\n this.setState({\n fetchedOrders: true\n });\n }\n\n // Check if the query is the latest query, then update this.state.data with the latest data from latest query, change loading to false, and take care of paginations\n if (this.props.queryId === this.state.queryId && this.props.data !== this.state.data){\n this.setState({\n data: this.props.data,\n loading: false,\n totalOrders: this.props.totalOrders,\n totalPages: this.props.totalPages\n })\n }\n //////\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.service === undefined && this.state.secretKey.length > 0 && !this.state.fetched) {\n this.props.fetchService(this.state.secretKey);\n this.setState({\n fetched: true\n });\n }\n\n if (this.props.service !== undefined && !this.state.assigned) {\n if (this.state.serviceId) {\n const service = this.props.service.filter(s => parseInt(s.service_id) === parseInt(this.state.serviceId))[0]\n this.setState({\n selectedService: {\n label: service.service_name,\n value: service.service_id,\n serviceId: service.service_id\n },\n assigned: true\n });\n }\n }\n\n if (this.props.lastUpdated && this.state.lastUpdated) {\n if ((this.props.lastUpdated.valueOf() > this.state.lastUpdated.valueOf()) && this.state.loading) {\n this.setState({\n loading: false\n });\n }\n }\n\n if (this.props.lastUpdated > this.state.lastUpdated) {\n this.setState({\n lastUpdated: this.props.lastUpdated\n });\n }\n\n const { shipperDetails } = this.props\n if (shipperDetails && shipperDetails.hasOwnProperty('agent_application_secret_key') && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n getPubliStatusCodeOptions = () => {\n const { public_statuses, public_statuses_v2 } = this.props.publicStatuses || {}\n const options = [\n
All Statuses \n ]\n if (!!public_statuses_v2) {\n const statusGroup = []\n public_statuses_v2.forEach(s => {\n statusGroup.push(\n
{capitalizeUnderscore(s)} \n )\n })\n options.push(\n
Public Statuses \n }>\n {statusGroup}\n \n )\n }\n if (!!public_statuses) {\n const statusGroup = []\n public_statuses.forEach(s => {\n statusGroup.push(\n
{s} \n )\n })\n options.push(\n
Old Public Statuses \n }>\n {statusGroup}\n \n )\n }\n return options\n }\n\n renderCountries = () => {\n let option = [
{this.props.t('common.allCountries')} ];\n\n _.map(this.props.countries || [], (item, i) => {\n option.push(
{item} );\n });\n\n return option;\n }\n\n renderFilters = () => {\n return (\n
\n
\n
\n {\n this.state.secretKey.length === 0 && this.props.data === undefined\n ?\n null\n :\n \n
\n
\n this.handleDropdownChange(e, 'serviceId')} />\n
\n
\n
\n \n
\n
this.handleDateChange(e, \"fromDate\")}\n locale=\"en-gb\"\n value={this.state.fromDate !== null ? moment(this.state.fromDate) : null}\n // readOnly={true}\n />\n \n\n
\n
\n
this.handleDateChange(e, \"toDate\")}\n locale=\"en-gb\"\n todayButton={\"Today\"}\n // readOnly={true}\n />\n \n\n
\n\n
\n
\n
this.handleOnChange(e)}\n />\n \n
\n
Consignee Name
\n
this.handleOnChange(e)}\n />\n \n
\n
Consignee Email
\n
this.handleOnChange(e)}\n />\n \n
\n
Phone Number
\n
this.handleOnChange(e)}\n />\n \n
\n
\n
this.handleOnChange(e)}\n />\n \n
\n
\n
this.handleUploadBatchNoChange(e)}\n />\n\n {/* this.handleUploadBatchNoChange(e)}\n >\n {this.renderUploadBatchNo()}\n */}\n\n \n
\n
\n
this.handlePickupCountryChange(e)}\n >\n {this.renderCountries()}\n \n \n
\n
\n
this.handleConsigneeCountryChange(e)}\n >\n {this.renderCountries()}\n \n \n
\n
\n {/*
this.handleStatusCodeChange(e)}\n >\n {this.renderStatuses()}\n */}\n \n {/* this.handleDropdownChange(e, 'statusCode')}\n >\n {this.renderStatuses()}\n */}\n this.handleDropdownChange(e, 'publicStatusCode')}\n >\n {this.getPubliStatusCodeOptions()}\n \n
\n \n {/*
\n \n \n
*/}\n
\n Apply \n \n
\n
\n
\n
\n
\n
this.handleOnChange(e, \"shipperOrderIdStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"trackingNoStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"statusCodeStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"createdOnStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"consigneeNameStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"consigneeEmailStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"pickupCountryStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"consigneeCountryStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"consigneeAddressStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"uploadBatchNoStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"consigneeCustomsDocuments\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"phoneNumberStatus\")}\n />\n
\n \n
\n
this.handleOnChange(e, \"pickupDateStatus\")}\n />\n
\n \n\n
\n
this.handleOnChange(e, \"orderTypeStatus\")}\n />\n Order Type
\n \n
\n
this.handleOnChange(e, \"forwardTrackingNoStatus\")}\n />\n Forward/Return Link
\n \n\n
\n
this.handleOnChange(e, \"identification_document_name\")}\n />\n Identification Document Name
\n \n
\n
this.handleOnChange(e, \"consignee_identifcation_number\")}\n />\n Identification Number
\n \n
\n
\n
\n
\n \n
\n
Sorting your Labels by Shipper order ID \n
\n )\n }\n\n renderOrderActions() {\n return (\n
\n {\n this.state.error !== undefined && this.state.error !== null ?\n
\n {this.props.message}\n
\n :\n null\n }\n\n
\n
\n {this.renderPrintButton()}\n \n
\n )\n }\n\n renderPrintButton = () => {\n let printButtonDisabled = !!this.state.isPrinting\n let enablePrintButtons = !this.state.selectedDataList.some(o => {\n const obj = o._original || o\n return obj.is_processing || !obj.order_label_url\n });\n const printButtons = enablePrintButtons && !!this.state.selectedDataList.length ?\n
\n \n
:\n
\n \n
;\n\n return printButtons;\n }\n\n renderFixedBottomButton = () => {\n let printButtonDisabled = !!this.state.isPrinting\n let button = null;\n\n let enablePrintButtons = !this.state.selectedDataList.some(o => {\n const obj = o._original || o\n return obj.is_processing || !obj.order_label_url\n });\n\n if (this.state.selectedAllDataList.length > 0) {\n if (enablePrintButtons) {\n if (window.innerWidth > 300 && window.innerWidth < 1000) {\n button =
\n \n \n
;\n } else if (window.innerWidth > 1000) {\n button =
\n \n \n
;\n }\n } else {\n if (window.innerWidth > 300 && window.innerWidth < 1000) {\n button =
\n \n \n
;\n } else if (window.innerWidth > 1000) {\n button =
\n \n \n
;\n }\n }\n }\n\n return button;\n }\n\n renderPartnerLogo = () => {\n let partnerLogoImgs = [];\n let partnerLogoImgStr = [];\n\n if (this.props.data !== undefined) {\n const partnerLogoUrlsList = _.map(this.props.data, (item, i) => {\n return item.partner_logo_urls;\n });\n _.map(partnerLogoUrlsList, (item, i) => {\n _.map(item, (value, i) => {\n if (!_.includes(partnerLogoImgStr, value)) {\n partnerLogoImgStr.push(value);\n }\n });\n });\n\n _.map(partnerLogoImgStr, (item, i) => {\n const index = i + 1;\n partnerLogoImgs.push(
);\n });\n }\n\n return partnerLogoImgs;\n }\n\n fetchOrders() {\n let {\n secretKey,\n serviceId,\n trackingNo,\n shipperOrderId,\n statusCode,\n uploadBatchNo,\n pickupCountry,\n consigneeCountry,\n consigneeName,\n consigneeEmail,\n phoneNumber,\n fromDate,\n toDate,\n pickupDateFrom,\n pickupDateTo,\n isProcessing,\n page,\n pageSize,\n queryId,\n publicStatusCode\n } = this.state;\n\n fromDate = fromDate ? moment(fromDate).startOf('day').format() : fromDate;\n toDate = toDate ? moment(toDate).endOf('day').format() : toDate;\n\n // Increase QueryId by 1 for each fetchOrders call and update the state\n queryId += 1\n this.setState({\n queryId: queryId\n })\n\n const [publicStatus, publicStatusVersion] = publicStatusCode.split(\"-\")\n let public_status, public_status_v2_shipper\n if (publicStatusVersion === \"v2\") {\n public_status_v2_shipper = publicStatus\n } else {\n public_status = publicStatus\n }\n\n const filterParams = {\n secretKey, serviceId, trackingNo,\n shipperOrderId, statusCode, uploadBatchNo,\n pickupCountry, consigneeCountry, fromDate,\n toDate, isProcessing, page, pageSize, queryId,\n consigneeName, consigneeEmail, phoneNumber,\n pickupDateFrom, pickupDateTo,\n public_status, public_status_v2_shipper\n }\n\n this.props.fetchOrderByFilter(filterParams);\n }\n\n handleDropdownChange = (e, type) => {\n let value = e.serviceId;\n if (value !== undefined) {\n value = e.serviceId;\n } else {\n value = 0;\n }\n\n if (type === 'serviceId') {\n const secretKey = this.props.shipperDetails.agent_application_secret_key;\n const selectedServiceId = parseInt(value, 10);\n\n const location = window.location.search\n const queries = queryString.parse(location)\n\n if (!value) {\n delete queries.serviceId\n } else {\n queries.serviceId = value\n }\n const stringified = queryString.stringify(queries)\n const url = `${window.location.pathname}?${stringified}`\n window.history.pushState({}, '', url);\n\n this.setState({\n secretKey: secretKey,\n serviceId: selectedServiceId,\n selectedService: e\n });\n }\n\n if (type === \"publicStatusCode\") {\n this.setState({\n publicStatusCode: e\n });\n }\n }\n\n handleUploadBatchNoChange = (e) => {\n this.setState({ [e.target.name]: e.target.value })\n }\n\n handleStatusCodeChange = (e) => {\n this.setState({ [e.target.name]: e.target.value })\n }\n\n handlePickupCountryChange = (e) => {\n this.setState({ [e.target.name]: e.target.value })\n }\n\n handleConsigneeCountryChange = (e) => {\n // this.changePathFunc(e);\n this.setState({ [e.target.name]: e.target.value })\n }\n\n changePathFunc = (e) => {\n this.props.clearOrderErrors();\n this.setState({\n loading: true,\n page: 1\n });\n this.resetToggleSelectAll();\n\n const { name, value } = e.target;\n\n const location = window.location.search\n const queries = queryString.parse(location)\n\n if (!value) {\n delete queries[name]\n } else {\n queries[name] = value\n }\n const stringified = queryString.stringify(queries)\n const url = `${window.location.pathname}?${stringified}`\n window.history.pushState({}, '', url);\n this.setState({ [name]: value }, () => {\n this.debouncedFetch();\n });\n }\n\n handleDateChange = (e, fieldName) => {\n if (fieldName === 'fromDate') {\n e = e ? moment(e).startOf('day').format() : e\n } else if (fieldName === 'toDate') {\n e = e ? moment(e).endOf('day').format() : e\n }\n\n const location = window.location.search\n let queries = queryString.parse(location)\n if (e) {\n queries[fieldName] = e\n } else {\n delete queries[fieldName]\n }\n\n const stringified = queryString.stringify(queries)\n const url = `${window.location.pathname}?${stringified}`\n window.history.pushState({}, '', url);\n\n // this.setState({ [fieldName]: e }, () => {\n // this.debouncedFetch();\n // });\n this.setState({ [fieldName]: e });\n }\n\n\n handleDateRangeChange = (date) => {\n this.setState({ pickupDateFrom: date[0].format('YYYY-MM-DD'), pickupDateTo: date[1].format('YYYY-MM-DD') }, () => {\n const location = window.location.search\n let queries = queryString.parse(location)\n queries['pickupDateFrom'] = this.state.pickupDateFrom\n queries['pickupDateTo'] = this.state.pickupDateTo\n\n\n const stringified = queryString.stringify(queries)\n const url = `${window.location.pathname}?${stringified}`\n window.history.pushState({}, '', url);\n // this.debouncedFetch();\n })\n \n }\n\n toggleSelectAll = (selectedAllDataList) => {\n this.props.clearOrderErrors();\n\n const checkboxList = document.querySelectorAll('input[type=checkbox]');\n if (!this.state.selectAll) {\n checkboxList.forEach((item) => {\n item.checked = true;\n });\n\n this.setState({\n selectAll: true,\n selectedDataList: selectedAllDataList,\n selectedAllDataList: selectedAllDataList\n });\n } else {\n checkboxList.forEach((item) => {\n item.checked = false;\n });\n\n this.setState({\n selectAll: false,\n selectedDataList: [],\n selectedAllDataList: []\n });\n }\n }\n\n resetToggleSelectAll = () => {\n const checkboxList = document.querySelectorAll('input[type=checkbox]');\n checkboxList.forEach((item) => {\n item.checked = false;\n });\n this.setState({\n selectAll: false,\n selectedDataList: [],\n selectedAllDataList: []\n });\n }\n\n handleResetFilters = () => {\n this.setState({\n serviceId: 0,\n clearValue: true,\n fromDate: null,\n pickupDate: null,\n pickupDateFrom: null,\n pickupDateTo: null,\n trackingNo: '',\n shipperOrderId: '',\n statusCode: '',\n uploadBatchNo: '',\n pickupCountry: '',\n consigneeCountry: '',\n phoneNumber: '',\n consigneeName: '',\n loading: true,\n consigneeEmail: '',\n publicStatusCode: '',\n page: 1\n }, () => {\n history.push({\n pathname: '/view-orders'\n })\n this.debouncedFetch()\n });\n this.resetToggleSelectAll();\n }\n\n handleApplyFilters = () => {\n this.props.clearOrderErrors();\n this.setState({\n loading: true,\n page: 1,\n clearValue: null\n });\n this.resetToggleSelectAll();\n this.fetchOrders()\n }\n \n handleCheckboxChange = (e, value) => {\n this.props.clearOrderErrors();\n\n if (e.target.checked) {\n this.setState({\n selectedDataList: this.state.selectedDataList.concat(value),\n selectedAllDataList: this.state.selectedAllDataList.concat(value)\n });\n } else {\n this.setState({\n selectedDataList: this.state.selectedDataList.filter((item) => item.order_id !== value.order_id),\n selectedAllDataList: this.state.selectedAllDataList.filter((item) => item.order_id !== value.order_id)\n });\n }\n }\n\n handleViewButton = (orderId) => {\n this.props.clearOrderErrors();\n\n history.push({\n // pathname: `/view-order-details/${orderId}`\n pathname: `/view-orders/${orderId}`\n });\n }\n\n handleTrackButton = (trackingNo) => {\n window.open(`https://tracker.janio.asia/${trackingNo}`);\n }\n\n showModal = () => {\n this.setState({showPrintingModal: true})\n setTimeout(() => {\n this.setState({showPrintingModal: false})\n },1600)\n }\n\n // method to generate pdf labels\n generateLabels = (payload) => {\n\n // set loading states for printing of individual and multiple orders\n if (payload.tracking_nos.length > 1){\n this.setState({isPrinting: true}, this.showModal)\n }else{\n let newPrinting = [...this.state.printingOrder]\n newPrinting.push(payload.tracking_nos[0])\n this.setState({printingOrder: newPrinting})\n }\n\n axios.post(`${ROOT_URL}/label/generate-label-invoice/`,\n payload,\n {\n responseType: 'arraybuffer',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n }\n })\n .then((response) => {\n const external_urls = response.headers['external-labels'].replace(/ /g,'').split(',')\n const url = URL.createObjectURL(new Blob([response.data], {type:\"application/pdf\"}));\n window.open(url);\n\n if (external_urls[0]){\n external_urls.forEach(element => {\n window.open(element)\n });\n }\n\n\n // reset loading states for printing of individual and multiple orders\n if (this.state.isPrinting === true){\n this.setState({isPrinting: false})\n }else{\n let newPrinting = [...this.state.printingOrder]\n _.remove(newPrinting, (item) => (item === payload.tracking_nos[0]))\n this.setState({printingOrder: newPrinting})\n }\n })\n .catch(error => {\n var decodedString = String.fromCharCode.apply(null, new Uint8Array(error.response.data));\n var obj = JSON.parse(decodedString);\n\n if (obj['message']){\n }else {\n }\n\n // reset loading states for printing of individual and multiple orders\n if (this.state.isPrinting === true){\n this.setState({isPrinting: false})\n }else{\n let newPrinting = [...this.state.printingOrder]\n _.remove(newPrinting, (item) => (item === payload.tracking_nos[0]))\n this.setState({printingOrder: newPrinting})\n }\n });\n };\n \n // method to merge olus into one file\n mergeLabels = (payload) => {\n this.setState({isPrinting: true}, this.showModal)\n axios.post(ROOT_URL + \"/label/generate-label-by-olu/\",\n payload,\n {\n responseType: 'arraybuffer',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n }\n })\n .then((response) => {\n const url = window.URL.createObjectURL(new Blob([response.data], {type:\"application/pdf\"}));\n this.setState({pdfURL: url})\n window.open(url)\n\n this.setState({isPrinting: false})\n })\n .catch(error => {\n this.setState({isPrinting: false})\n var decodedString = String.fromCharCode.apply(null, new Uint8Array(error.data));\n var obj = JSON.parse(decodedString);\n\n if (obj['message']){\n this.setState({errorMessage: obj['message']})\n }else {\n this.setState({errorMessage: 'Unable to generate labels, please check your tracking numbers and date format.'})\n }\n });\n };\n\n handlePrintButton = (value) => {\n window.open(value.order_label_url)\n }\n\n confirmCancel = (trackingNo) => {\n let newConfirm = [...this.state.confirmingCancelOrders]\n newConfirm.push(trackingNo)\n this.setState({confirmingCancelOrders: newConfirm})\n }\n \n cancelOrder = (trackingNo) => {\n let payload = {\n secret_key: this.props.shipperDetails.agent_application_secret_key,\n tracking_nos: [trackingNo]\n }\n axios.post(\"/api/order/cancel-orders/\",\n payload,\n {\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n }\n })\n .then((response) => {\n message.success(response.data['detail'])\n })\n .catch(error => {\n message.error(JSON.stringify(error.data).slice(1,-1), 4)\n }).finally(() =>{\n let newCancelling = [...this.state.cancellingOrders]\n _.remove(newCancelling, (item) => (item === trackingNo))\n this.setState({cancellingOrders: newCancelling})\n });\n }\n\n renderSinglePrintButton = (orderData) => {\n if (orderData.order_label_url) {\n return (\n
this.handlePrintButton(orderData)}>\n \n )\n }else {\n return (\n
this.handlePrintButton(orderData)}>\n \n )\n }\n }\n\n renderCancelButton = (orderData) => {\n\n const {tracking_no} = orderData\n if (this.state.confirmingCancelOrders.includes(tracking_no)) {\n return ( \n
this.handleCancelButton(tracking_no)}>\n \n )\n }\n else if (this.state.cancellingOrders.includes(tracking_no)) {\n return ( \n
\n \n )\n }\n else if (this.validateCancelOrder(orderData)) {\n return ( \n
this.confirmCancel(tracking_no)}>\n \n )\n }\n else {\n return ( \n
\n \n )\n }\n }\n\n validateCancelOrder = (orderData) => {\n const {tracker_status_code} = orderData\n if (tracker_status_code !== 'ORDER_INFO_RECEIVED') {\n return false\n }\n\n return true\n }\n\n handleCancelButton = (trackingNo) => {\n let newConfirming = [...this.state.confirmingCancelOrders]\n _.remove(newConfirming, (item) => (item === trackingNo))\n let newCancelling = [...this.state.cancellingOrders]\n newCancelling.push(trackingNo)\n this.setState({cancellingOrders: newCancelling, confirmingCancelOrders: newConfirming})\n this.cancelOrder(trackingNo)\n }\n\n handleDeleteButton = (orderId) => {\n this.props.clearOrderErrors();\n if (this.state.secretKey.length > 0) {\n this.props.deleteOrder(orderId, this.state.secretKey);\n }\n }\n\n handlePrintSelectedOrdersStickersAndCommercialInvoice = () => {\n this.props.clearOrderErrors();\n\n if (_.isEqual(this.state.selectedDataList, this.state.selectedAllDataList)) {\n // generate both pdf selectAll\n if (this.state.selectedAllDataList.length > 0) {\n const itemList = _.map(this.state.selectedAllDataList, (item, i) => {\n if (_.has(item, 'checkbox')) {\n return item.checkbox;\n } else {\n return item;\n }\n });\n\n const result = itemList.reduce((result, curr, index, arr)=>{\n if (!curr.order_label_url){\n result.has_olu = false\n }\n result.olus.push(curr.order_label_url)\n result.tracking_nos.push(curr.tracking_no)\n return result\n },{has_olu: true, olus:[], tracking_nos:[]})\n\n if (result.has_olu){\n this.mergeLabels({\n tracking_nos: result.tracking_nos\n })\n }\n }\n } else {\n // generate both pdf checked one\n if (this.state.selectedDataList.length > 0) {\n const itemList = _.map(this.state.selectedDataList, (item, i) => {\n if (_.has(item, 'checkbox')) {\n return item.checkbox;\n } else {\n return item;\n }\n });\n const result = itemList.reduce((result, curr, index, arr)=>{\n if (!curr.order_label_url){\n result.has_olu = false\n }\n result.olus.push(curr.order_label_url)\n result.tracking_nos.push(curr.tracking_no)\n return result\n },{has_olu: true, olus:[], tracking_nos:[]})\n\n if (result.has_olu){\n this.mergeLabels({\n tracking_nos: result.tracking_nos\n })\n }\n }\n }\n }\n\n handleOpenMultipleTrackingNo = () => {\n this.props.clearOrderErrors();\n\n if (_.isEqual(this.state.selectedDataList, this.state.selectedAllDataList)) {\n // selectAll\n if (this.state.selectedAllDataList.length > 0) {\n const itemList = _.map(this.state.selectedAllDataList, (item, i) => {\n if (_.has(item, 'checkbox')) {\n return item.checkbox;\n } else {\n return item;\n }\n });\n\n let trackingNo = '';\n _.map(itemList, (item, i) => {\n if (i !== itemList.length - 1) {\n trackingNo += item.tracking_no + ',';\n } else {\n trackingNo += item.tracking_no;\n }\n });\n\n const url = window.location.href;\n if (url.includes('janio-shipper.herokuapp.com') || url.includes('merchant.janio.asia')) {\n window.open(`https://tracker.janio.asia/${trackingNo}`);\n } else if (url.includes('janio-shipper-int.herokuapp.com')) {\n window.open(`https://janio-tracker-int.herokuapp.com/${trackingNo}`);\n } else {\n window.open(`https://janio-tracker-demo.herokuapp.com/${trackingNo}`);\n }\n }\n } else {\n // checked one\n if (this.state.selectedDataList.length > 0) {\n let trackingNo = '';\n _.map(this.state.selectedDataList, (item, i) => {\n if (i !== this.state.selectedDataList.length - 1) {\n trackingNo += item.tracking_no + ',';\n } else {\n trackingNo += item.tracking_no;\n }\n });\n\n const url = window.location.href;\n if (url.includes('janio-shipper.herokuapp.com') || url.includes('merchant.janio.asia')) {\n window.open(`https://tracker.janio.asia/${trackingNo}`);\n } else if (url.includes('janio-shipper-int.herokuapp.com')) {\n window.open(`https://janio-tracker-int.herokuapp.com/${trackingNo}`);\n } else {\n window.open(`https://janio-tracker-demo.herokuapp.com/${trackingNo}`);\n }\n }\n }\n }\n\n handleOnChange = (e) => {\n const { name, value, checked } = e.target;\n if (e.target.type === 'checkbox') {\n this.setState({ [name]: checked });\n } else {\n let newDataObj = {};\n newDataObj[name] = value;\n\n const location = window.location.search\n let queries = queryString.parse(location)\n if (value) {\n queries[name] = value.match(/[A-Za-z0-9-]+/g).join(',')\n } else {\n delete queries[name]\n if (name === 'shipperOrderId') {\n delete queries['ids[]']\n }\n }\n\n const stringified = queryString.stringify(queries)\n const url = `${window.location.pathname}?${stringified}`\n window.history.pushState({}, '', url);\n\n this.setState({ [name]: value });\n }\n }\n\n handlePreviousButton = () => {\n this.props.clearOrderErrors();\n\n if (this.state.page > 1) {\n this.setState({\n loading: true\n });\n this.resetToggleSelectAll();\n\n this.setState({\n page: this.state.page - 1\n }, () => { this.debouncedFetch() });\n }\n }\n\n handleNextButton = () => {\n this.props.clearOrderErrors();\n\n if (this.state.page < this.props.totalPages) {\n this.setState({\n loading: true\n });\n this.resetToggleSelectAll();\n\n this.setState({\n page: this.state.page + 1\n }, () => { this.debouncedFetch() });\n }\n }\n\n handlePageClick = (e) => {\n this.props.clearOrderErrors();\n\n this.setState({\n loading: true\n });\n this.resetToggleSelectAll();\n\n this.setState({\n page: parseInt(e.target.innerHTML, 10)\n }, () => { this.debouncedFetch() });\n }\n\n handleShowAllPageNums = (e) => {\n this.setState({\n showAllPageNums: true,\n });\n this.resetToggleSelectAll();\n }\n\n handlePaginationChanges = (page, pageSize) => {\n this.props.clearOrderErrors();\n\n this.setState({\n page, pageSize,\n loading: true\n }, () => { this.debouncedFetch() })\n\n this.resetToggleSelectAll();\n }\n\n render() {\n const columns = [\n {\n id: \"checkbox\",\n accessor: \"\",\n width: 50,\n Cell: ({ row, value }) => {\n return (\n
this.handleCheckboxChange(e, value)}\n />\n );\n },\n Header: (row) => {\n const selectedAllDataList = row.data;\n return (\n this.toggleSelectAll(selectedAllDataList)}\n />\n );\n },\n show: true\n },\n {\n Header: 'Shipper order id',\n accessor: 'shipper_order_id',\n Cell: (props) => {\n const shipperOrderId = props.original.shipper_order_id;\n return shipperOrderId !== null && shipperOrderId.length > 0 ? shipperOrderId : 'N/A';\n },\n show: this.state.shipperOrderIdStatus\n },\n {\n Header: 'Type',\n accessor: 'is_return_order',\n Cell: ({ value }) => {\n return value ?\n \n
\n )\n }\n return value\n }\n },\n {\n Header: 'Status code',\n accessor: 'public_tracker_status_v2',\n show: this.state.statusCodeStatus,\n Cell: ({ value, row }) => capitalizeUnderscore(value || row._original.tracker_status_code)\n },\n {\n Header: 'Consignee name',\n accessor: 'consignee_name',\n show: this.state.consigneeNameStatus\n },\n {\n Header: 'Consignee email',\n accessor: 'consignee_email',\n show: this.state.consigneeEmailStatus\n },\n {\n Header: 'Pickup country',\n accessor: 'pickup_country',\n show: this.state.pickupCountryStatus\n },\n {\n Header: 'Consignee country',\n accessor: 'consignee_country',\n show: this.state.consigneeCountryStatus\n },\n {\n Header: 'Consignee address',\n accessor: 'consignee_address',\n show: this.state.consigneeAddressStatus\n },\n {\n Header: 'Upload batch no',\n accessor: 'upload_batch_no',\n show: this.state.uploadBatchNoStatus\n },\n {\n Header: 'Phone Number',\n accessor: 'consignee_number',\n show: this.state.phoneNumberStatus\n },\n {\n Header: 'Forward/Return Link',\n accessor: 'forward_order_id',\n show: this.state.forwardTrackingNoStatus,\n Cell: ({ value, original }) => {\n if (original.forward_tracking_no) {\n return (\n \n {original.forward_tracking_no} \n
\n )\n } else if (original.return_tracking_no) {\n return (\n \n {original.return_tracking_no} \n
\n )\n } else {\n return 'N/A'\n }\n },\n },\n {\n Header: 'Scheduled Pickup Date',\n accessor: 'pickup_date',\n Cell: (props) => {\n return props.value ? moment(props.value).format('DD/MM/YY') : props.value;\n },\n show: this.state.pickupDateStatus\n },\n {\n Header: 'Created on',\n accessor: 'created_on',\n Cell: (props) => {\n return moment(props.value).format('DD/MM/YY HHmm[HRS]');\n },\n show: this.state.createdOnStatus\n },\n {\n Header: 'Consignee Customs Document',\n accessor: 'customs_documents_status',\n Cell: (props) => {\n let fontColor = '#000000'\n switch(props.value){\n case 'Pending Documents': \n fontColor = '#FF8900';\n break;\n case 'Documents Uploaded':\n fontColor = '#27AE60';\n break;\n default:\n return\n }\n \n let label = (\n {props.value} \n )\n return props.value ? label : 'N/A';\n },\n show: this.state.consigneeCustomsDocuments\n },\n\n {\n Header: 'Identification Document Name',\n accessor: 'identification_document_name',\n show: this.state.identification_document_name,\n Cell: ({ value }) => value || 'N/A'\n },\n {\n Header: 'Identification Number',\n accessor: 'consignee_identifcation_number',\n show: this.state.consignee_identifcation_number,\n Cell: ({ value }) => value || 'N/A'\n },\n \n {\n id: \"button\",\n Header: 'Action',\n accessor: \"\",\n width: 260,\n Cell: ({ row, value }) => {\n const orderId = value.order_id;\n const trackingNo = value.tracking_no;\n const isProcessing = value.is_processing\n let printButton = this.renderSinglePrintButton(value)\n let cancelButton = this.renderCancelButton(value)\n let actionView = null;\n if (isProcessing) {\n actionView = (\n \n
\n )\n } else {\n actionView = \n this.handleViewButton(orderId)}>\n \n this.handleTrackButton(trackingNo)}>\n \n {printButton}\n {cancelButton}\n
;\n }\n\n return actionView;\n },\n show: true\n },\n ];\n\n _.filter(columns, (item, i) => {\n return item.show;\n });\n\n const pagination = !!this.state.data ? (\n \n
this.handlePaginationChanges(this.state.page, size)}\n />\n {this.state.totalOrders} Orders \n \n {this.renderFilters()}\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {pagination}\n
\n {pagination}\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {this.renderOrderActions()}\n\n {this.renderFixedBottomButton()}\n\n
\n
\n {this.renderPartnerLogo()}\n
\n
\n
\n
\n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, agentAppDetails, order }) {\n return ({\n error: order.error,\n shipperDetails: shipperDetails.shipperDetails,\n message: order.message,\n publicStatuses: order.publicStatuses,\n countries: order.countries,\n uploadBatchNo: order.updateBatchNo,\n service: order.service,\n data: order.orders,\n totalOrders: order.totalOrders,\n totalPages: order.totalPages,\n lastUpdated: order.lastUpdated,\n queryId: order.queryId\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchService,\n fetchStatuses,\n fetchAllCountries,\n fetchPrevious,\n fetchNext,\n fetchOrderByFilter,\n deleteOrder,\n clearOrderErrors\n }),\n withStyles(styles),\n withTranslation('common')\n)(ViewOrders);\n","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { ClipLoader } from 'react-spinners';\nimport { connect } from \"react-redux\";\nimport _ from 'lodash';\nimport moment from 'moment';\nimport { validate } from '../../utils/validatorUtils';\nimport { history } from '../../utils/historyUtils';\nimport compose from 'recompose/compose';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n editOrder,\n fetchOrderDetails,\n clearOrderErrors\n} from '../../actions/orderActions';\n\nimport InputField from '../common/InputField';\n\nimport TrackingUpdates from './trackingUpdates/TrackingUpdates'\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass ViewOrderDetails extends Component {\n constructor() {\n console.log('ViewOrderDetails render')\n super();\n this.state = {\n error: true,\n fetched: false,\n updatedStatus: false,\n secretKey: '',\n serviceId: 0,\n currentOrderId: null,\n orderDetails: null,\n anchorEl: null,\n\n trackingNo: '',\n consigneeName: '',\n consigneeAddress: '',\n consigneePostal: '',\n consigneeCountry: '',\n consigneeState: '',\n consigneeCity: '',\n consigneeProvince: '',\n consigneeNumber: '',\n consigneeEmail: '',\n shipperOrderId: '',\n orderLength: 0,\n orderWidth: 0,\n orderHeight: 0,\n orderWeight: 0,\n pickupCountry: '',\n pickupState: '',\n pickupCity: '',\n pickupProvince: '',\n pickupAddress: '',\n pickupPostal: '',\n pickupDate: '',\n pickupNotes: '',\n pickupContactName: '',\n pickupContactNumber: '',\n paymentType: '',\n codAmountToCollect: 0,\n itemsList: [],\n weightReconRecordList: []\n };\n }\n\n componentDidMount() {\n window.scrollTo(0, 0);\n\n this.props.fetchShipperDetails();\n }\n\n componentDidUpdate() {\n const currentOrderId = parseInt(window.location.href.substr(window.location.href.lastIndexOf('/') + 1), 10);\n\n if (this.props.error !== this.state.error) {\n if (this.state.secretKey.length > 0) {\n this.props.fetchOrderDetails(this.state.secretKey, currentOrderId);\n this.setState({\n error: this.props.error\n });\n }\n }\n\n if (this.state.currentOrderId === null) {\n this.setState({\n currentOrderId: currentOrderId\n });\n }\n\n if (this.props.orderDetails !== undefined) {\n if (this.props.orderDetails !== this.state.orderDetails && this.state.currentOrderId === this.props.orderDetails.order_id) {\n this.setState({\n orderDetails: this.props.orderDetails\n });\n }\n }\n\n if (!_.isEmpty(this.state.orderDetails) && !this.state.fetched) {\n this.setState({\n trackingNo: this.state.orderDetails.tracking_no || '',\n consigneeName: this.state.orderDetails.consignee_name || '',\n consigneeAddress: this.state.orderDetails.consignee_address || '',\n consigneePostal: this.state.orderDetails.consignee_postal || '',\n consigneeCountry: this.state.orderDetails.consignee_country || '',\n consigneeState: this.state.orderDetails.consignee_state || '',\n consigneeCity: this.state.orderDetails.consignee_city || '',\n consigneeProvince: this.state.orderDetails.consignee_province || '',\n consigneeNumber: this.state.orderDetails.consignee_number || '',\n consigneeEmail: this.state.orderDetails.consignee_email || '',\n shipperOrderId: this.state.orderDetails.shipper_order_id || '',\n orderLength: this.state.orderDetails.order_length || 0,\n orderWidth: this.state.orderDetails.order_width || 0,\n orderHeight: this.state.orderDetails.order_height || 0,\n orderWeight: this.state.orderDetails.order_weight || 0,\n pickupAddress: this.state.orderDetails.pickup_address || '',\n pickupPostal: this.state.orderDetails.pickup_postal || '',\n pickupDate: this.state.orderDetails.pickup_date || '',\n pickupNotes: this.state.orderDetails.pickup_notes || '',\n pickupContactName: this.state.orderDetails.pickup_contact_name || '',\n pickupContactNumber: this.state.orderDetails.pickup_contact_number || '',\n pickupCountry: this.state.orderDetails.pickup_country || '',\n pickupState: this.state.orderDetails.pickup_state || '',\n pickupCity: this.state.orderDetails.pickup_city || '',\n pickupProvince: this.state.orderDetails.pickup_province || '',\n paymentType: this.state.orderDetails.payment_type || '',\n codAmountToCollect: this.state.orderDetails.cod_amt_to_collect || 0,\n itemsList: this.state.orderDetails.items || [],\n weightReconRecordList: this.state.orderDetails.weight_recon_records || [],\n fetched: true\n });\n\n _.map(this.state.itemsList, (item, i) => {\n let index = (i + 1);\n\n document.querySelector('#itemDesc' + index).value = item.item_desc !== null ? item.item_desc : '';\n document.querySelector('#itemQuantity' + index).value = item.item_quantity !== null ? item.item_quantity : '';\n document.querySelector('#itemProductId' + index).value = item.item_product_id !== null ? item.item_product_id : '';\n document.querySelector('#itemSku' + index).value = item.item_sku !== null ? item.item_sku : '';\n document.querySelector('#itemCategory' + index).value = item.item_category !== null ? item.item_category : '';\n document.querySelector('#itemPriceValue' + index).value = item.price_value !== null ? item.price_value : '';\n document.querySelector('#itemPriceCurrency' + index).value = item.item_price_currency !== null ? item.item_price_currency : '';\n });\n }\n\n const { shipperDetails } = this.props\n if (shipperDetails && shipperDetails.hasOwnProperty('agent_application_secret_key') && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n shouldRenderWeightReconciliation = () => {\n let hasNonOriginalRecord = this.state.weightReconRecordList.findIndex((record) => {\n return record.source !== 'Order'\n }) !== -1\n return this.state.weightReconRecordList.length > 0 && hasNonOriginalRecord\n }\n\n renderWeightReconciliation = () => {\n let sortedWeightReconRecordList = [...this.state.weightReconRecordList]\n sortedWeightReconRecordList.sort((a, b) => a.created_on > b.created_on ? 1 : -1)\n\n let originalRecord = sortedWeightReconRecordList.find((record) => {\n return record.source === 'Order'\n })\n let latestRecord = sortedWeightReconRecordList[sortedWeightReconRecordList.length - 1]\n\n return \n
\n
\n
\n
Original Weight
\n {\n originalRecord\n ?\n
\n
\n
\n Order Length (Cm) \n
\n
\n Order Width (Cm) \n
\n
\n Order Height (Cm) \n
\n
\n Order Weight (Kg) \n
\n
\n
\n :\n
Not found
\n }\n
\n
\n
Reconciliation Weight
\n {\n latestRecord\n ?\n
\n
\n
\n Order Length (Cm) \n
\n
\n Order Width (Cm) \n
\n
\n Order Height (Cm) \n
\n
\n Order Weight (Kg) \n
\n
\n
\n :\n
Not found
\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
\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 */}\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 renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n />\n
\n );\n }\n\n renderTextarea = (fieldName, name, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)} />\n
\n );\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n handleDeleteItem = () => {\n this.props.clearOrderErrors();\n\n if (this.state.itemsList.length > 0) {\n this.state.itemsList.pop();\n }\n }\n\n handleOnChange(e, type) {\n this.props.clearOrderErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n if (name === \"pickupDate\") {\n this.setState({ [name]: moment(value).format(\"YYYY-MM-DD\") })\n } else {\n this.setState({ [name]: value });\n }\n \n }\n\n handleEdit = () => {\n this.props.clearOrderErrors();\n\n const validatorList = [\n { fieldName: 'consigneeName', optional: false, type: 'text' },\n { fieldName: 'consigneeAddress', optional: false, type: 'text' },\n { fieldName: 'consigneePostal', optional: false, type: 'text' },\n { fieldName: 'consigneeCountry', optional: false, type: 'text' },\n { fieldName: 'consigneeCity', optional: false, type: 'text' },\n { fieldName: 'consigneeState', optional: false, type: 'text' },\n { fieldName: 'consigneeProvince', optional: true, type: 'text' },\n { fieldName: 'consigneeNumber', optional: false, type: 'text' },\n { fieldName: 'shipperOrderId', optional: true, type: 'text' },\n { fieldName: 'consigneeEmail', optional: true, type: 'email' },\n { fieldName: 'orderLength', optional: false, type: 'number' },\n { fieldName: 'orderWidth', optional: false, type: 'number' },\n { fieldName: 'orderHeight', optional: false, type: 'number' },\n { fieldName: 'orderWeight', optional: false, type: 'number' },\n { fieldName: 'pickupCountry', optional: false, type: 'text' },\n { fieldName: 'pickupAddress', optional: false, type: 'text' },\n { fieldName: 'pickupPostal', optional: false, type: 'text' },\n { fieldName: 'pickupDate', optional: false, type: 'date' },\n { fieldName: 'pickupNotes', optional: false, type: 'textarea' },\n { fieldName: 'pickupContactName', optional: false, type: 'text' },\n { fieldName: 'pickupContactNumber', optional: false, type: 'text' },\n { fieldName: 'paymentType', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, false);\n console.log(canSubmit);\n\n if (canSubmit) {\n let itemsList = [];\n let allowSubmit = false;\n\n _.map(this.state.itemsList, (item, i) => {\n const index = (i + 1);\n const itemDescValue = document.querySelector('#itemDesc' + index).value !== null ? document.querySelector('#itemDesc' + index).value : '';\n const itemQuantityValue = document.querySelector('#itemQuantity' + index).value !== null ? document.querySelector('#itemQuantity' + index).value : '';\n const itemProductIdValue = document.querySelector('#itemProductId' + index).value !== null ? document.querySelector('#itemProductId' + index).value : '';\n const itemSkuValue = document.querySelector('#itemSku' + index).value !== null ? document.querySelector('#itemSku' + index).value : null;\n const itemCategoryValue = document.querySelector('#itemCategory' + index).value !== null ? document.querySelector('#itemCategory' + index).value : '';\n const itemPriceValueValue = document.querySelector('#itemPriceValue' + index).value !== null ? document.querySelector('#itemPriceValue' + index).value : '';\n const itemPriceCurrencyValue = document.querySelector('#itemPriceCurrency' + index).value !== null ? document.querySelector('#itemPriceCurrency' + index).value : '';\n\n let data = {\n \"item_desc\": itemDescValue,\n \"item_quantity\": parseInt(itemQuantityValue, 10),\n \"item_product_id\": itemProductIdValue,\n \"item_sku\": itemSkuValue,\n \"item_category\": itemCategoryValue,\n \"item_price_value\": parseFloat(parseFloat(itemPriceValueValue, 10).toFixed(2)),\n \"item_price_currency\": itemPriceCurrencyValue\n };\n itemsList.push(data);\n });\n\n _.map(itemsList, (item, i) => {\n if (item.item_quantity > 0) {\n allowSubmit = true;\n }\n });\n\n if (allowSubmit) {\n const currentOrderId = parseInt(window.location.href.substr(window.location.href.lastIndexOf('/') + 1), 10);\n this.props.editOrder(\n currentOrderId, this.state.secretKey, this.state.serviceId,\n this.state.consigneeName, this.state.consigneeAddress, this.state.consigneePostal,\n this.state.consigneeCountry, this.state.consigneeCity, this.state.consigneeState,\n this.state.consigneeProvince, this.state.consigneeNumber, this.state.shipperOrderId,\n this.state.consigneeEmail, parseFloat(parseFloat(this.state.orderLength, 10).toFixed(2)), parseFloat(parseFloat(this.state.orderWidth, 10).toFixed(2)),\n parseFloat(parseFloat(this.state.orderHeight, 10).toFixed(2)), parseFloat(parseFloat(this.state.orderWeight, 10).toFixed(2)), this.state.pickupCountry,\n this.state.pickupAddress, this.state.pickupPostal, this.state.pickupNotes, this.state.pickupDate, this.state.paymentType, itemsList\n );\n this.setState({\n updatedStatus: false\n });\n }\n }\n }\n\n handleBackManageOrders = () => {\n history.push('/view-orders');\n }\n\n render() {\n const { classes } = this.props;\n const { anchorEl } = this.state;\n const open = Boolean(anchorEl);\n\n let renderDiv = null;\n if (_.isEmpty(this.state.orderDetails)) {\n renderDiv = ;\n } else {\n renderDiv = \n
\n
\n\n
\n
\n
Status Updates
\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n\n {this.shouldRenderWeightReconciliation() &&\n
\n
Weight Reconciliation
\n {this.renderWeightReconciliation()}\n
\n }\n\n
\n
\n {this.renderItem(classes, anchorEl, open)}\n\n {\n this.state.error === false ?\n
\n
\n :\n null\n }\n\n {/*
\n Edit\n */}\n \n \n
\n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, order }) {\n return ({\n shipperDetails: shipperDetails.shipperDetails,\n error: order.error,\n orderDetails: order.orderDetails\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n editOrder,\n fetchOrderDetails,\n clearOrderErrors\n }),\n withStyles(styles),\n withTranslation('common')\n)(ViewOrderDetails);\n","import axios from 'axios';\nimport {\n FETCH_ITEM_DETAILS_WITH_FITLER,\n FETCH_ITEM_DETAILS_BY_ID,\n ADD_ITEM_DETAILS,\n UPDATE_ITEM_DETAILS_BY_ID,\n DELETE_ITEM_DETAILS_BY_ID,\n GET_ITEM_DETAILS_CSV,\n CLEAR_ITEM_DETAILS_ERRORS\n} from './types';\nimport { ROOT_URL } from './index';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchItemDetailsWithFilter(secretKey, shipperProfile, itemDesc,\n itemCategory, itemProductId, itemSku,\n itemPriceValue, itemPriceCurrency, page) {\n console.log('fetching item details by filter [secretKey=%s shipperProfile=%s itemDesc=%s itemCategory=%s itemProductId=%s itemSku=%s itemPriceValue=%s itemPriceCurrency=%s page=%s]...',\n secretKey, shipperProfile, itemDesc, itemCategory, itemProductId, itemSku, itemPriceValue, itemPriceCurrency, page);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.get(`${ROOT_URL}/shipper/item-details/`,\n {\n params: {\n secret_key: secretKey,\n shipper_profile: shipperProfile,\n item_desc: itemDesc,\n item_category: itemCategory,\n item_product_id: itemProductId,\n item_sku: itemSku,\n item_price_value: itemPriceValue,\n item_price_currency: itemPriceCurrency,\n page: page\n }\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_ITEM_DETAILS_WITH_FITLER,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: FETCH_ITEM_DETAILS_WITH_FITLER,\n errorData: error.data\n });\n });\n }\n}\n\nexport function fetchItemDetailsById(secretKey, itemDetailsId) {\n console.log('fetching item details by id ' + itemDetailsId + '...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.get(`${ROOT_URL}/shipper/item-details/${itemDetailsId}/`,\n {\n params: {\n \"secret_key\": secretKey\n }\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_ITEM_DETAILS_BY_ID,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: FETCH_ITEM_DETAILS_BY_ID,\n errorData: error.data\n });\n });\n }\n}\n\nexport function addItemDetails(data) {\n console.log('adding item details...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.post(`${ROOT_URL}/shipper/item-details/`,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: ADD_ITEM_DETAILS,\n payload: false\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: ADD_ITEM_DETAILS,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function updateItemDetailsById(itemDetailsId, data) {\n console.log('updating item details by id ' + itemDetailsId + '...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.patch(`${ROOT_URL}/shipper/item-details/${itemDetailsId}/`,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: UPDATE_ITEM_DETAILS_BY_ID,\n payload: false\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: UPDATE_ITEM_DETAILS_BY_ID,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function deleteItemDetailsById(secretKey, itemDetailsId) {\n console.log('deleting item details by id ' + itemDetailsId + '...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.delete(`${ROOT_URL}/shipper/item-details/${itemDetailsId}/`,\n {\n params: {\n \"secret_key\": secretKey\n }\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: DELETE_ITEM_DETAILS_BY_ID,\n payload: false,\n status: response.status\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: DELETE_ITEM_DETAILS_BY_ID,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function getItemDetailsCSV(secretKey, shipperProfile, itemDesc,\n itemCategory, itemProductId, itemSku,\n itemPriceValue, itemPriceCurrency) {\n console.log('getting item details csv [secretKey=%s shipperProfile=%s itemDesc=%s itemCategory=%s itemProductId=%s itemSku=%s itemPriceValue=%s itemPriceCurrency=%s]...',\n secretKey, shipperProfile, itemDesc, itemCategory, itemProductId, itemSku, itemPriceValue, itemPriceCurrency);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.get(`${ROOT_URL}/shipper/item-details/csv/`,\n {\n params: {\n \"secret_key\": secretKey,\n \"shipper_profile\": shipperProfile,\n \"item_desc\": itemDesc,\n \"item_category\": itemCategory,\n \"item_product_id\": itemProductId,\n \"item_sku\": itemSku,\n \"item_price_value\": itemPriceValue,\n \"item_price_currency\": itemPriceCurrency\n }\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: GET_ITEM_DETAILS_CSV,\n itemDetailsCSV: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: GET_ITEM_DETAILS_CSV,\n errorData: error.data\n });\n });\n }\n}\n\nexport function clearItemDetailsErrors() {\n console.log('clearing item details errors...');\n return {\n type: CLEAR_ITEM_DETAILS_ERRORS\n }\n}\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { Component } from \"react\";\nimport { LinkContainer } from 'react-router-bootstrap';\nimport { Jumbotron } from 'react-bootstrap';\nimport { ClipLoader } from 'react-spinners';\nimport { CSVLink } from 'react-csv';\nimport { connect } from \"react-redux\";\nimport moment from 'moment';\nimport momenttz from 'moment-timezone';\nimport ReactTable from \"react-table\";\nimport \"react-table/react-table.css\";\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { history } from \"../../utils/historyUtils\";\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n fetchItemCategory,\n fetchItemPriceCurrency\n} from '../../actions/orderActions';\nimport {\n fetchItemDetailsWithFilter,\n getItemDetailsCSV,\n deleteItemDetailsById,\n clearItemDetailsErrors\n} from '../../actions/itemDetailsActions';\n\nclass ViewItemDetails extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n errorData: null,\n secretKey: '',\n fetchedItemDetails: false,\n status: null,\n refetched: false,\n\n shipperProfile: '',\n itemDesc: '',\n itemCategory: '',\n itemProductId: '',\n itemSku: '',\n itemPriceValue: '',\n itemPriceCurrency: '',\n itemDetailsCSV: [],\n\n selectAll: false,\n page: 1,\n selectedDataList: [],\n selectedAllDataList: [],\n lastUpdated: moment(),\n loading: false,\n showAllPageNums: false\n };\n\n this.throttledFetch = _.throttle(this.fetchItemDetails, 3000, { 'trailing': true });\n }\n\n componentDidMount() {\n this.props.fetchShipperDetails();\n if (this.props.itemCategory === undefined) {\n this.props.fetchItemCategory();\n }\n if (this.props.itemPriceCurrency === undefined) {\n this.props.fetchItemPriceCurrency();\n }\n }\n\n componentDidUpdate() {\n if (this.state.secretKey && !this.state.fetchedItemDetails) {\n this.fetchItemDetails();\n this.setState({\n fetchedItemDetails: true\n });\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.errorData !== this.state.errorData) {\n this.setState({\n errorData: this.props.errorData\n });\n }\n\n if (this.props.status !== this.state.status) {\n this.setState({\n status: this.props.status\n });\n }\n\n if (this.state.status === 204 && !this.state.refetched) {\n this.fetchItemDetails();\n this.setState({\n refetched: true\n });\n }\n\n if (this.props.itemDetailsCSV !== this.state.itemDetailsCSV) {\n this.setState({\n itemDetailsCSV: this.props.itemDetailsCSV\n });\n }\n\n if (this.props.lastUpdated && this.state.lastUpdated) {\n if ((this.props.lastUpdated.valueOf() > this.state.lastUpdated.valueOf()) && this.state.loading) {\n this.setState({\n loading: false\n });\n }\n }\n\n if (this.props.lastUpdated > this.state.lastUpdated) {\n this.setState({\n lastUpdated: this.props.lastUpdated\n });\n }\n\n if (this.props.shipperDetails !== undefined && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n componentWillUnmount() {\n this.props.clearItemDetailsErrors();\n }\n\n renderItemCategory = () => {\n let options = [select one... ];\n\n _.map(this.props.itemCategory, (item, i) => {\n options.push({item} );\n });\n\n return options;\n }\n\n renderItemPriceCurrency = () => {\n let options = [select one... ];\n\n _.map(this.props.itemPriceCurrency, (item, i) => {\n options.push({item} );\n });\n\n return options;\n }\n\n renderPageNumbers = () => {\n const { page, showAllPageNums } = this.state;\n let pageNumberDivs = [];\n let counter = 1;\n const { totalPages } = this.props;\n const that = this;\n\n if(totalPages <= 10 || showAllPageNums) {\n _.times(totalPages, () => {\n pageNumberDivs.push(\n \n );\n counter++;\n });\n } else {\n _.times(5, () => {\n pageNumberDivs.push(\n \n );\n counter++;\n });\n pageNumberDivs.push(\n that.handleShowAllPageNums(e)} key=\"...\">\n
\n \n .....\n \n \n
\n \n \n )\n }\n\n renderFilters = () => {\n let filters = null;\n\n if (this.state.secretKey.length > 0 && this.props.data !== undefined) {\n filters = \n
\n
\n\n
\n\n
\n {\n this.state.itemDetailsCSV !== undefined && this.state.itemDetailsCSV.length > 0 ?\n
\n \n \n
\n }\n \n\n
\n
\n \n
\n
\n
this.handleOnChange(e)}\n />\n \n\n
\n
\n
this.handleOnChange(e)}\n />\n \n\n
\n
\n
this.handleDropdownChange(e, 'itemCategory')}\n >\n { this.renderItemCategory() }\n \n \n\n
\n
\n
this.handleOnChange(e)}\n />\n \n\n
\n
\n
this.handleOnChange(e)}\n />\n \n\n
\n
\n
this.handleOnChange(e)}\n />\n \n\n
\n
\n
this.handleDropdownChange(e, 'itemPriceCurrency')}\n >\n { this.renderItemPriceCurrency() }\n \n \n\n
\n \n
\n
\n
\n
this.handleCheckboxChange(e, value)}\n />\n );\n },\n Header: (row) => {\n const selectedAllDataList = row.data;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t this.toggleSelectAll(selectedAllDataList)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n },\n {\n Header: 'Shipper profile',\n accessor: 'shipper_profile'\n },\n {\n Header: 'Item desc',\n accessor: 'item_desc'\n },\n {\n Header: 'Item category',\n accessor: 'item_category'\n },\n {\n Header: 'Item product id',\n accessor: 'item_product_id'\n },\n {\n Header: 'Item sku',\n accessor: 'item_sku'\n },\n {\n Header: 'Item price value',\n accessor: 'item_price_value'\n },\n {\n Header: 'Item price currency',\n accessor: 'item_price_currency'\n },\n {\n Header: 'Created',\n accessor: 'created',\n Cell: (props) => {\n return moment(props.value).format('DD/MM/YY HHmm[HRS]');\n }\n },\n {\n id: \"button\",\n Header: 'Action',\n accessor: \"\",\n width: 130,\n Cell: ({row, value}) => {\n const itemDetailsId = value.id;\n return (\n \n this.handleViewButton(itemDetailsId)}>View \n this.handleDeleteButton(itemDetailsId)}>Delete \n
\n );\n }\n },\n ];\n\n let renderDiv = null;\n if ((this.state.secretKey.length === 0 && this.props.data === undefined) ||\n (this.state.secretKey.length > 0 && this.props.data === undefined)) {\n renderDiv = \n
{ this.renderFilters() }
\n
\n
\n { this.renderFilters() }\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {\n this.state.status === 204 ?\n
\n :\n null\n }\n\n { this.renderPagination() }\n\n
\n // String(row[filter.id]).toUpperCase().includes(filter.value.toUpperCase())\n // }\n />\n\n { this.renderPagination() }\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {\n this.state.status === 204 ?\n
\n :\n null\n }\n\n \n
;\n }\n\n return (\n \n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, order, itemDetails }) {\n return ({\n error: itemDetails.error,\n errorData: itemDetails.errorData,\n shipperDetails: shipperDetails.shipperDetails,\n itemCategory: order.itemCategory,\n itemPriceCurrency: order.itemPriceCurrency,\n data: itemDetails.itemDetails,\n status: itemDetails.status,\n itemDetailsCSV: itemDetails.itemDetailsCSV,\n totalItemDetails: itemDetails.totalItemDetails,\n totalPages: itemDetails.totalPages,\n lastUpdated: itemDetails.lastUpdated\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchItemCategory,\n fetchItemPriceCurrency,\n fetchItemDetailsWithFilter,\n getItemDetailsCSV,\n deleteItemDetailsById,\n clearItemDetailsErrors\n }),\n withTranslation('common')\n)(ViewItemDetails);\n","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport { validate } from '../../utils/validatorUtils';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport momenttz from 'moment-timezone';\nimport DatePicker from 'react-datepicker';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport compose from 'recompose/compose';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { history } from \"../../utils/historyUtils\";\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n fetchItemCategory,\n fetchItemPriceCurrency\n} from '../../actions/orderActions';\nimport {\n fetchItemDetailsById,\n updateItemDetailsById,\n clearItemDetailsErrors\n} from '../../actions/itemDetailsActions';\n\nimport InputField from '../common/InputField';\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass ViewItemDetailsById extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n errorData: null,\n updatedStatus: false,\n currentItemDetailsId: null,\n fetched: false,\n added: false,\n anchorEl: null,\n\n secretKey: '',\n itemDetail: null,\n\n shipperProfile: '',\n itemDesc: '',\n itemCategory: '',\n itemProductId: '',\n itemSku: '',\n itemPriceValue: '',\n itemPriceCurrency: '',\n updated: moment()\n };\n }\n\n componentDidMount() {\n const datePickerWrapperList = document.querySelectorAll('.react-datepicker-wrapper');\n datePickerWrapperList.forEach((item) => {\n item.setAttribute('class', 'w-100');\n item.parentNode.setAttribute('class', 'w-100');\n });\n\n const datePickerList = document.querySelectorAll('.react-datepicker__input-container');\n datePickerList.forEach((item) => {\n item.setAttribute('class', 'w-100');\n });\n\n this.props.fetchShipperDetails();\n if (this.props.itemCategory === undefined) {\n this.props.fetchItemCategory();\n }\n if (this.props.itemPriceCurrency === undefined) {\n this.props.fetchItemPriceCurrency();\n }\n }\n\n componentWillUnmount() {\n this.props.clearItemDetailsErrors();\n }\n\n componentDidUpdate() {\n const currentItemDetailsId = parseInt(window.location.href.substr(window.location.href.lastIndexOf('/') + 1), 10);\n if (this.props.shipperDetails !== undefined && !this.state.fetched) {\n this.props.fetchItemDetailsById(this.props.shipperDetails.agent_application_secret_key, currentItemDetailsId);\n this.setState({\n currentItemDetailsId: currentItemDetailsId,\n fetched: true\n });\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.errorData !== this.state.errorData) {\n this.setState({\n errorData: this.props.errorData\n });\n }\n\n if (this.props.itemDetail !== undefined) {\n if (this.props.itemDetail !== this.state.itemDetail && this.state.currentItemDetailsId === this.props.itemDetail.id) {\n this.setState({\n itemDetail: this.props.itemDetail\n });\n }\n }\n\n if (!_.isEmpty(this.state.itemDetail) && !this.state.added) {\n this.setState({\n shipperProfile: this.state.itemDetail.shipper_profile ? this.state.itemDetail.shipper_profile : '',\n itemDesc: this.state.itemDetail.item_desc ? this.state.itemDetail.item_desc : '',\n itemCategory: this.state.itemDetail.item_category ? this.state.itemDetail.item_category : '',\n itemProductId: this.state.itemDetail.item_product_id ? this.state.itemDetail.item_product_id : '',\n itemSku: this.state.itemDetail.item_sku ? this.state.itemDetail.item_sku : '',\n itemPriceValue: this.state.itemDetail.item_price_value ? this.state.itemDetail.item_price_value : '',\n itemPriceCurrency: this.state.itemDetail.item_price_currency ? this.state.itemDetail.item_price_currency : '',\n added: true\n });\n }\n\n if (this.props.shipperDetails.hasOwnProperty('shipperDetails') && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n renderItemCategory = () => {\n let options = [select one... ];\n\n _.map(this.props.itemCategory, (item, i) => {\n options.push({item} );\n });\n\n return options;\n }\n\n renderItemPriceCurrency = () => {\n let options = [select one... ];\n\n _.map(this.props.itemPriceCurrency, (item, i) => {\n options.push({item} );\n });\n\n return options;\n }\n\n handleOnChange(e) {\n this.props.clearItemDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleDropdownChange = (e) => {\n this.props.clearItemDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleDateChange = (e, fieldName) => {\n this.props.clearItemDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n this.setState({ [fieldName]: e });\n }\n\n handleEdit = () => {\n this.props.clearItemDetailsErrors();\n\n const validatorList = [\n { fieldName: 'shipperProfile', optional: false, type: 'number' },\n { fieldName: 'itemDesc', optional: false, type: 'text' },\n { fieldName: 'itemCategory', optional: false, type: 'text' },\n { fieldName: 'itemProductId', optional: false, type: 'number' },\n { fieldName: 'itemSku', optional: false, type: 'text' },\n { fieldName: 'itemPriceValue', optional: false, type: 'number' },\n { fieldName: 'itemPriceCurrency', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, false);\n console.log(canSubmit);\n\n if (canSubmit) {\n const currentItemDetailsId = parseInt(window.location.href.substr(window.location.href.lastIndexOf('/') + 1), 10);\n const userTimezone = momenttz.tz.guess();\n const updated = moment(this.state.updated).tz(userTimezone).format();\n const data = {\n \"secret_key\": this.props.shipperDetails.agent_application_secret_key,\n \"shipper_profile\": this.state.shipperProfile ? parseInt(this.state.shipperProfile, 10) : '',\n \"item_desc\": this.state.itemDesc,\n \"item_category\": this.state.itemCategory,\n \"item_product_id\": this.state.itemProductId ? parseInt(this.state.itemProductId, 10) : '',\n \"item_sku\": this.state.itemSku,\n \"item_price_value\": this.state.itemPriceValue ? parseFloat(parseFloat(this.state.itemPriceValue, 10).toFixed(2)) : '',\n \"item_price_currency\": this.state.itemPriceCurrency,\n \"updated\": updated\n };\n this.props.updateItemDetailsById(currentItemDetailsId, data);\n\n this.setState({\n updatedStatus: false\n });\n }\n }\n\n handleBackViewAllItemDetails = () => {\n history.push('/view-item-details');\n }\n\n render() {\n // const { classes } = this.props;\n // const { anchorEl } = this.state;\n // const open = Boolean(anchorEl);\n\n return (\n \n
\n
\n this.handleDropdownChange(e)}\n >\n { this.renderItemCategory() }\n \n this.handleDropdownChange(e)}\n >\n { this.renderItemPriceCurrency() }\n \n \n
\n
this.handleDateChange(e, 'updated')}\n showTimeSelect\n dateFormat=\"DD/MM/YY HH:mm\"\n timeFormat=\"HH:mm\"\n timeIntervals={30}\n timeCaption=\"time\"\n locale=\"en-gb\"\n todayButton={\"Today\"}\n // readOnly={true}\n />\n \n
\n :\n null\n }\n\n {\n this.state.errorData ?\n \n
\n { JSON.stringify(this.state.errorData) }\n
\n \n \n
\n
\n
Error \n
\n \n
\n :\n null\n }\n\n {\n this.state.updatedStatus ?\n \n \n :\n \n \n }\n\n {\n this.state.error === false ?\n \n
\n :\n null\n }\n\n { this.renderErrorAlert() }\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {\n this.state.updatedStatus && !this.state.loading ?\n \n \n
\n :\n \n \n
\n }\n \n
\n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, itemDetails }) {\n return ({\n error: itemDetails.error,\n errorData: itemDetails.errorData,\n shipperDetails: shipperDetails.shipperDetails,\n lastUpdated: itemDetails.lastUpdated\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n addItemDetails,\n clearItemDetailsErrors\n }),\n withTranslation('common')\n)(AddItemDetails);\n","import axios from 'axios';\nimport {\n UNAUTH_USER,\n FETCH_ORDERS_IN_CSV,\n FETCH_TRACKER_UPDATES_IN_CSV,\n CLEAR_REPORT_ERRORS\n} from './types';\nimport { ROOT_URL } from './index';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchOrdersInCSV(filters) {\n const token = localStorage.getItem('token');\n const {\n secretKey, serviceId, pickupCountry,\n consigneeCountry, uploadBatchNo,\n dateFrom, dateTo, trackingNo,\n emails, public_status_v2_shipper, public_status\n } = filters\n\n return function(dispatch) {\n axios.post(`${ROOT_URL}/order/fetch-orders-in-csv/`,\n {\n secret_key: secretKey,\n service_id: serviceId,\n pickup_country: pickupCountry,\n consignee_country: consigneeCountry,\n upload_batch_no: uploadBatchNo,\n date_from: dateFrom,\n date_to: dateTo,\n tracking_nos: trackingNo,\n emails: emails,\n public_status_v2_shipper, public_status\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_ORDERS_IN_CSV,\n payload: response.data,\n emailsMessage: response.data.message\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n });\n }\n}\n\nexport function fetchTrackerUpdatesInCSV(filters) {\n const token = localStorage.getItem('token');\n const {\n secretKey, serviceId, pickupCountry,\n consigneeCountry, uploadBatchNo,\n dateFrom, dateTo, trackingNo,\n emails, public_status_v2_shipper, public_status\n } = filters\n\n\n return function(dispatch) {\n axios.post(`${ROOT_URL}/order/fetch-tracker-updates-in-csv/`,\n {\n secret_key: secretKey,\n service_id: serviceId,\n pickup_country: pickupCountry,\n consignee_country: consigneeCountry,\n upload_batch_no: uploadBatchNo,\n date_from: dateFrom,\n date_to: dateTo,\n tracking_nos: trackingNo,\n emails: emails,\n public_status_v2_shipper, public_status\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_TRACKER_UPDATES_IN_CSV,\n payload: response.data,\n emailsMessage: response.data.message\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n });\n }\n}\n\nexport function clearReportErrors() {\n console.log('clearing report errors...');\n return {\n type: CLEAR_REPORT_ERRORS\n }\n}\n","import React, { useMemo } from 'react'\nimport Select from 'react-select'\n\n\nconst SelectDropdown = props => {\n const { dropdownClassName, labelClassName, textLabel, groupedOptions } = props\n \n const renderItems = useMemo(() => {\n if (!!groupedOptions) {\n return groupedOptions\n }\n let options = [{\n value: '',\n label: props.placeholder\n }]\n if (!props.options) return options\n\n props.options.forEach(item => {\n let obj = props.optionObject ? props.optionObject(item): {value: item, label: item}\n options.push(obj)\n })\n return options\n }, [props.options, groupedOptions])\n\n return useMemo(() =>\n \n {\n textLabel ?\n {textLabel} \n :\n null\n }\n
,\n [props.value, props.options, groupedOptions]\n )\n}\n\nexport default SelectDropdown","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport DatePicker from 'react-datepicker';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { CSVLink } from 'react-csv';\nimport moment from 'moment';\nimport momenttz from 'moment-timezone';\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n fetchAllCountries\n} from '../../actions/orderActions';\nimport {\n fetchOrdersInCSV,\n fetchTrackerUpdatesInCSV,\n clearReportErrors\n} from '../../actions/reportsActions';\nimport {\n fetchService,\n fetchStatuses,\n} from '../../actions/orderActions';\n\nimport SelectDropdown from \"../common/SelectDropdown\";\nimport { capitalizeUnderscore } from \"../../utils\";\nimport { ROOT_URL } from '../../actions/index';\nimport axios from 'axios';\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass Reports extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n fetched: false,\n anchorEl: null,\n\n secretKey: '',\n serviceId: null,\n pickupCountry: '',\n consigneeCountry: '',\n uploadBatchNo: '',\n dateFrom: moment().subtract(2, 'months').startOf('days'),\n dateTo: moment(),\n trackingNo: '',\n emails: '',\n\n ordersInCSV: [],\n trackerUpdatesInCSV: [],\n\n ordersForDownloadInCSV: [],\n trackerUpdatesForDownloadInCSV: [],\n downloadOrdersCompleted: \"\",\n downloadTrackerUpdatesCompleted: \"\",\n\n emailsMessage: null,\n\n lastUpdatedFetchOrdersDetails: moment(),\n lastUpdatedFetchTrackerUpdates: moment(),\n loadingFetchOrdersDetails: false,\n enableFetchOrdersDetails: true,\n loadingFetchTrackerUpdates: false,\n enableFetchTrackerUpdates: true,\n showFetchOrdersDetails: true,\n showFetchTrackerUpdates: true,\n selectedService: null,\n selected_consigneeCountry: null,\n selected_pickupCountry: null,\n selected_statusCode: null,\n\n public_status_v2_shipper: \"\",\n public_status: \"\",\n };\n }\n\n downloadOrdersCsvLink = React.createRef();\n downloadTrackerUpdatesCsvLink = React.createRef();\n\n componentDidMount() {\n const datePickerWrapperList = document.querySelectorAll('.react-datepicker-wrapper');\n datePickerWrapperList.forEach((item) => {\n item.setAttribute('class', 'w-100');\n item.parentNode.setAttribute('class', 'w-100');\n });\n\n const datePickerList = document.querySelectorAll('.react-datepicker__input-container');\n datePickerList.forEach((item) => {\n item.setAttribute('class', 'w-100');\n });\n\n this.props.fetchShipperDetails();\n if (this.props.countries === undefined) {\n this.props.fetchAllCountries();\n }\n if (this.props.publicStatuses === undefined) {\n this.props.fetchStatuses();\n }\n }\n\n componentWillUnmount() {\n this.props.clearReportErrors();\n }\n\n componentDidUpdate() {\n if (this.props.service === undefined && this.state.secretKey.length > 0 && !this.state.fetched) {\n this.props.fetchService(this.state.secretKey);\n this.setState({\n fetched: true\n });\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.ordersInCSV !== this.state.ordersInCSV && this.props.ordersInCSV) {\n this.setState({\n ordersInCSV: this.props.ordersInCSV\n });\n }\n\n if (this.props.trackerUpdatesInCSV !== this.state.trackerUpdatesInCSV) {\n this.setState({\n trackerUpdatesInCSV: this.props.trackerUpdatesInCSV\n }); \n }\n\n if (this.props.emailsMessage !== this.state.emailsMessage) {\n this.setState({\n emailsMessage: this.props.emailsMessage\n });\n }\n\n if (this.props.lastUpdatedFetchOrdersDetails && this.state.lastUpdatedFetchOrdersDetails) {\n if ((this.props.lastUpdatedFetchOrdersDetails.valueOf() > this.state.lastUpdatedFetchOrdersDetails.valueOf()) && this.state.loadingFetchOrdersDetails) {\n this.setState({\n loadingFetchOrdersDetails: false\n });\n }\n }\n\n if (this.props.lastUpdatedFetchOrdersDetails > this.state.lastUpdatedFetchOrdersDetails) {\n this.setState({\n lastUpdatedFetchOrdersDetails: this.props.lastUpdatedFetchOrdersDetails\n });\n }\n\n if (this.props.lastUpdatedFetchTrackerUpdates && this.state.lastUpdatedFetchTrackerUpdates) {\n if ((this.props.lastUpdatedFetchTrackerUpdates.valueOf() > this.state.lastUpdatedFetchTrackerUpdates.valueOf()) && this.state.loadingFetchTrackerUpdates) {\n this.setState({\n loadingFetchTrackerUpdates: false\n });\n }\n }\n\n if (this.props.lastUpdatedFetchTrackerUpdates > this.state.lastUpdatedFetchTrackerUpdates) {\n this.setState({\n lastUpdatedFetchTrackerUpdates: this.props.lastUpdatedFetchTrackerUpdates\n });\n }\n\n const { shipperDetails } = this.props\n if (shipperDetails && shipperDetails.hasOwnProperty('agent_application_secret_key') && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n handleDateChange = (e, fieldName) => {\n this.props.clearReportErrors();\n this.setState({\n enableFetchOrdersDetails: true,\n enableFetchTrackerUpdates: true,\n showFetchOrdersDetails: true,\n showFetchTrackerUpdates: true,\n });\n\n this.setState({ [fieldName]: e });\n }\n\n handleDropdownChange = (e, type) => {\n this.props.clearReportErrors();\n this.setState({\n enableFetchOrdersDetails: true,\n enableFetchTrackerUpdates: true,\n showFetchOrdersDetails: true,\n showFetchTrackerUpdates: true,\n });\n\n if (type === \"statusCode\") {\n const publicStatusJoined = e.filter(item => item.value.includes(\"v2\")).map(item => item.value.split(\"-\")[0]).join(\",\")\n const publicStatusOldJoined = e.filter(item => item.value.includes(\"v1\")).map(item => item.value.split(\"-\")[0]).join(\",\")\n console.log({publicStatusJoined, publicStatusOldJoined})\n const updateState = {\n [`selected_${type}`]: e,\n public_status_v2_shipper: publicStatusJoined || \"\",\n public_status: publicStatusOldJoined || \"\",\n }\n \n this.setState(updateState);\n return\n }\n\n if (e.length === 1) {\n if (type === 'service') {\n const serviceId = e[0].serviceId;\n\n if (serviceId !== undefined) {\n this.setState({\n serviceId: serviceId,\n selectedService: e\n });\n } else {\n this.setState({\n serviceId: null,\n selectedService: null\n });\n }\n } else {\n this.setState({ [type]: e[0].value, [`selected_${type}`]: e });\n }\n } else {\n if (type === 'service') {\n const serviceIdList = _.map(e, (item, i) => {\n return item.serviceId;\n });\n const serviceId = serviceIdList.join(',');\n\n if (serviceId !== undefined) {\n this.setState({\n serviceId: serviceId,\n selectedService: e\n });\n } else {\n this.setState({\n serviceId: null,\n selectedService: null\n });\n }\n } else {\n const valueList = _.map(e, (item, i) => {\n return item.value;\n });\n const value = valueList.join(',');\n\n this.setState({\n [type]: value,\n [`selected_${type}`]: e\n });\n }\n }\n }\n\n handleOnChange(e) {\n this.props.clearReportErrors();\n this.setState({\n enableFetchOrdersDetails: true,\n enableFetchTrackerUpdates: true,\n showFetchOrdersDetails: true,\n showFetchTrackerUpdates: true,\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleFetchOrdersDetails = (obj) => {\n if(!obj) {\n obj = {};\n }\n\n this.props.clearReportErrors();\n\n if(!obj.downloadOnly) {\n this.setState({\n loadingFetchOrdersDetails: true,\n enableFetchOrdersDetails: false,\n showFetchOrdersDetails: true,\n showFetchTrackerUpdates: false,\n ordersInCSV: []\n });\n } else {\n this.setState({\n downloadOrdersCompleted: false\n })\n }\n if (this.state.secretKey.length > 0 && this.state.dateFrom !== null && this.state.dateTo !== null) {\n const userTimezone = momenttz.tz.guess();\n const dateFrom = moment(this.state.dateFrom).tz(userTimezone).format();\n const dateTo = moment(this.state.dateTo).tz(userTimezone).format();\n\n var {\n secretKey,\n serviceId,\n pickupCountry,\n consigneeCountry,\n uploadBatchNo,\n publicStatusCode,\n trackingNo,\n emails,\n public_status_v2_shipper, public_status\n } = this.state\n\n if(obj.downloadOnly) {\n emails = \"\";\n }\n\n const filters = {\n dateFrom, dateTo,\n secretKey,\n serviceId,\n pickupCountry,\n consigneeCountry,\n uploadBatchNo,\n publicStatusCode,\n trackingNo,\n emails,\n public_status_v2_shipper, public_status\n }\n if(obj.downloadOnly) {\n this.getOrdersForDownload(filters);\n } else {\n this.props.fetchOrdersInCSV(filters);\n }\n }\n }\n\n handleFetchTrackerUpdates = (obj) => {\n if(!obj) {\n obj = {};\n }\n\n this.props.clearReportErrors();\n\n if(!obj.downloadOnly) {\n this.props.clearReportErrors();\n this.setState({\n loadingFetchTrackerUpdates: true,\n enableFetchTrackerUpdates: false,\n showFetchOrdersDetails: false,\n showFetchTrackerUpdates: true,\n trackerUpdatesInCSV: []\n });\n } else {\n this.setState({\n downloadTrackerUpdatesCompleted: false\n }) \n }\n\n if (this.state.secretKey.length > 0 && this.state.dateFrom !== null && this.state.dateTo !== null) {\n const userTimezone = momenttz.tz.guess();\n const dateFrom = moment(this.state.dateFrom).tz(userTimezone).format();\n const dateTo = moment(this.state.dateTo).tz(userTimezone).format();\n\n var {\n secretKey,\n serviceId,\n pickupCountry,\n consigneeCountry,\n uploadBatchNo,\n publicStatusCode,\n trackingNo,\n emails,\n public_status_v2_shipper, public_status\n } = this.state\n\n if(obj.downloadOnly) {\n emails = \"\";\n }\n\n const filters = {\n dateFrom, dateTo,\n secretKey,\n serviceId,\n pickupCountry,\n consigneeCountry,\n uploadBatchNo,\n publicStatusCode,\n trackingNo,\n emails,\n public_status_v2_shipper, public_status\n }\n\n if(obj.downloadOnly) {\n this.getTrackerUpdatesForDownloadInCSV(filters);\n } else {\n this.props.fetchTrackerUpdatesInCSV(filters);\n } \n }\n }\n\n renderDownloadOrdersAlert = () => {\n if(this.state.downloadOrdersCompleted === false) {\n return \n Please wait while we fetch the data.....\n
\n } \n return \"\";\n }\n\n renderDownloadTrackerUpdatesAlert = () => {\n if(this.state.downloadTrackerUpdatesCompleted === false) {\n return \n Please wait while we fetch the data.....\n
\n } \n return \"\";\n } \n\n renderPleaseEnterYourEmailAlert = () => {\n let pleaseEnterYourEmailAlert = null;\n\n if (this.state.emails.length === 0) {\n pleaseEnterYourEmailAlert = \n
;\n } else {\n const emailValid = this.validateStrIsEmail(this.state.emails);\n if (!emailValid) {\n pleaseEnterYourEmailAlert = \n
;\n }\n }\n\n return pleaseEnterYourEmailAlert;\n }\n\n validateStrIsEmail = (email) => {\n let result = null;\n\n if (!email.includes(',')) {\n const regex = /(\\S+@\\S+\\.\\S+)/g;\n result = regex.test(email);\n } else {\n let str = \"(\\\\S+@\\\\S+\\\\.\\\\S+)\";\n const commaCount = email.match(/,/g).length;\n for (let i = 0; i < commaCount; i++) {\n str += \",(\\\\S+@\\\\S+\\\\.\\\\S+)\";\n }\n const regex = new RegExp(str);\n result = regex.test(email);\n }\n\n return result;\n }\n\n renderFetchOrdersDetailsButton = () => {\n let button = null;\n\n const emailValid = this.validateStrIsEmail(this.state.emails);\n\n if (this.state.secretKey.length > 0 && !this.state.loadingFetchOrdersDetails && this.state.enableFetchOrdersDetails &&\n this.state.emails.length > 0 && emailValid) {\n if (this.state.showFetchOrdersDetails) {\n button = \n \n
;\n }\n } else {\n button = \n \n
;\n }\n\n return button;\n }\n\n isValidCsv = (data) => {\n if(Object.prototype.toString.call(data) === \"[object Array]\") {\n return true;\n } \n return false;\n }\n\n getOrdersForDownload = (filters) => {\n const token = localStorage.getItem('token');\n const {\n secretKey, serviceId, pickupCountry,\n consigneeCountry, uploadBatchNo,\n dateFrom, dateTo, trackingNo,\n emails, public_status_v2_shipper, public_status\n } = filters;\n\n axios.post(`${ROOT_URL}/order/fetch-orders-in-csv/`,\n {\n secret_key: secretKey,\n service_id: serviceId,\n pickup_country: pickupCountry,\n consignee_country: consigneeCountry,\n upload_batch_no: uploadBatchNo,\n date_from: dateFrom,\n date_to: dateTo,\n tracking_nos: trackingNo,\n emails: emails,\n public_status_v2_shipper, public_status\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n this.setState({\n ordersForDownloadInCSV: response.data,\n downloadOrdersCompleted: true\n })\n var that = this;\n setTimeout(() => {\n if(that.downloadOrdersCsvLink.current) {\n that.downloadOrdersCsvLink.current.link.click();\n }\n }, 500); \n })\n .catch((error) => {\n console.log(error);\n this.setState({\n downloadOrdersCompleted: true\n }) \n }); \n }\n\n getTrackerUpdatesForDownloadInCSV = (filters) => {\n const token = localStorage.getItem('token');\n const {\n secretKey, serviceId, pickupCountry,\n consigneeCountry, uploadBatchNo,\n dateFrom, dateTo, trackingNo,\n emails, public_status_v2_shipper, public_status\n } = filters\n \n \n axios.post(`${ROOT_URL}/order/fetch-tracker-updates-in-csv/`,\n {\n secret_key: secretKey,\n service_id: serviceId,\n pickup_country: pickupCountry,\n consignee_country: consigneeCountry,\n upload_batch_no: uploadBatchNo,\n date_from: dateFrom,\n date_to: dateTo,\n tracking_nos: trackingNo,\n emails: emails,\n public_status_v2_shipper, public_status\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n this.setState({\n trackerUpdatesForDownloadInCSV: response.data,\n downloadTrackerUpdatesCompleted: true\n })\n var that = this;\n setTimeout(() => {\n if(that.downloadTrackerUpdatesCsvLink.current) {\n that.downloadTrackerUpdatesCsvLink.current.link.click();\n }\n }, 500); \n })\n .catch((error) => {\n console.log(error);\n this.setState({\n downloadTrackerUpdatesCompleted: true\n }) \n }); \n }\n\n renderDownloadsOrdersDetailsButton = () => {\n return {\n this.handleFetchOrdersDetails({downloadOnly: true});\n }}>\n {\n this.handleFetchTrackerUpdates({downloadOnly: true});\n }}>\n \n \n
;\n }\n } else {\n button = \n \n
;\n }\n\n return button;\n }\n\n getDateFrom = () => {\n const userTimezone = momenttz.tz.guess();\n const dateFrom = moment(this.state.dateFrom).tz(userTimezone).format('YYYYMMDDHHmm');\n return dateFrom;\n }\n\n getDateTo = () => {\n const userTimezone = momenttz.tz.guess();\n const dateTo = moment(this.state.dateTo).tz(userTimezone).format('YYYYMMDDHHmm');\n return dateTo;\n }\n\n getPublicStatusOptions = () => {\n if (!this.props.publicStatuses) return []\n\n const { public_statuses, public_statuses_v2 } = this.props.publicStatuses\n const groupedOptions = []\n if (public_statuses_v2 && !!public_statuses_v2.length) {\n groupedOptions.push({\n label: \"Public Statuses\",\n options: public_statuses_v2.map(s => ({\n label: capitalizeUnderscore(s),\n value: `${s}-v2`,\n }))\n })\n }\n if (public_statuses && !!public_statuses.length) {\n groupedOptions.push({\n label: \"Old Public Statuses\",\n options: public_statuses.map(s => ({\n label: s,\n value: `${s}-v1`,\n }))\n })\n }\n return groupedOptions\n }\n\n render() {\n return (\n \n
\n
\n \n
\n \n this.handleDropdownChange(e, 'service')}\n isMulti={true}\n options={this.props.service}\n optionObject={item => ({\n serviceId: item.service_id,\n value: item.service_name,\n label: item.service_name\n })} />\n \n\n \n
\n \n this.handleDropdownChange(e, 'pickupCountry')}\n value={this.state.selected_pickupCountry}\n options={this.props.countries}/>\n \n\n \n
\n \n this.handleDropdownChange(e, 'consigneeCountry')}\n value={this.state.selected_consigneeCountry}\n options={this.props.countries}\n />\n \n\n \n
\n \n \n
\n \n\n this.handleDropdownChange(e, 'statusCode')}\n value={this.state.selected_statusCode}\n groupedOptions={this.getPublicStatusOptions()}\n formatGroupLabel={data => (\n {data.label} \n )}\n />\n \n\n \n
\n \n this.handleDateChange(e, 'dateFrom')}\n showTimeSelect\n dateFormat=\"DD/MM/YY HH:mm\"\n timeFormat=\"HH:mm\"\n timeIntervals={30}\n timeCaption=\"time\"\n locale=\"en-gb\"\n todayButton={\"Today\"}\n // readOnly={true}\n />\n \n\n \n
\n \n this.handleDateChange(e, 'dateTo')}\n showTimeSelect\n dateFormat=\"DD/MM/YY HH:mm\"\n timeFormat=\"HH:mm\"\n timeIntervals={30}\n timeCaption=\"time\"\n locale=\"en-gb\"\n todayButton={\"Today\"}\n // readOnly={true}\n />\n \n\n \n\n \n
\n \n \n
\n :\n null\n }\n\n {\n this.state.emailsMessage ?\n \n {this.state.emailsMessage}\n
\n :\n null\n }\n\n {this.renderPleaseEnterYourEmailAlert()}\n\n {this.renderFetchOrdersDetailsButton()}\n\n {this.renderFetchTrackerUpdatesButton()}\n\n -------------- OR --------------
\n\n {this.renderDownloadOrdersAlert()}\n {this.renderDownloadsOrdersDetailsButton()}\n\n {this.renderDownloadTrackerUpdatesAlert()}\n {this.renderDownloadsTrackerUpdatesButton()}\n\n {this.isValidCsv(this.state.ordersForDownloadInCSV)?\n \n \n
\n
All Statuses ]\n _.forEach(this.props.statuses, (item, i) => {\n toReturn.push({item} );\n });\n return toReturn;\n }\n\n renderPageNumbers = () => {\n const { page, showAllPageNums } = this.state;\n let pageNumberDivs = [];\n let counter = 1;\n const { totalPages } = this.props;\n const that = this;\n\n if (totalPages <= 10 || showAllPageNums) {\n _.times(totalPages, () => {\n pageNumberDivs.push(\n \n );\n counter++;\n });\n } else {\n _.times(5, () => {\n pageNumberDivs.push(\n \n );\n counter++;\n });\n pageNumberDivs.push(\n that.handleShowAllPageNums(e)} key=\"...\">\n
\n \n .....\n \n \n
\n \n \n )\n }\n\n renderFilters = () => {\n let filters = null;\n\n if (this.state.secretKey.length > 0 && this.props.data !== undefined) {\n filters = \n
\n
\n
\n \n
\n
\n
this.handleOnChange(e)}\n />\n \n
\n
\n
this.handleDropdownChange(e)}\n >\n {this.renderStatuses()}\n \n \n
\n \n
\n
\n
\n
this.handleCheckboxChange(e, value)}\n />\n );\n },\n Header: (row) => {\n const selectedAllDataList = row.data;\n return (\n this.toggleSelectAll(selectedAllDataList)}\n />\n );\n },\n },\n {\n Header: 'Invoice number',\n accessor: 'InvoiceNumber'\n },\n {\n Header: 'Status',\n accessor: 'Status'\n },\n {\n Header: 'Date',\n accessor: 'DateString'\n },\n ...(this.shouldShowTotal() ? [{\n Header: 'Total',\n accessor: 'Total',\n show: true\n }] : []),\n {\n Header: 'Currency code',\n accessor: 'CurrencyCode'\n },\n {\n id: \"button\",\n Header: 'Action',\n accessor: \"\",\n width: 95,\n Cell: ({ row, value }) => {\n const invoiceId = value.InvoiceID;\n return (\n \n this.handleViewPdf(invoiceId)}>View PDF \n {/* this.handleMakePayment()}>Make Payment */}\n
\n );\n }\n },\n ];\n\n let renderDiv = null;\n if ((this.state.secretKey.length === 0 && this.props.data === undefined) ||\n (this.state.secretKey.length > 0 && this.props.data === undefined)) {\n if (!this.state.errorData) {\n renderDiv = \n
{this.renderFilters()}
\n
\n
\n
\n {this.state.errorData.message ? this.state.errorData.message: JSON.stringify(this.state.errorData)}\n
\n
\n {this.renderFilters()}\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {this.renderPagination()}\n\n
\n // String(row[filter.id]).toUpperCase().includes(filter.value.toUpperCase())\n // }\n />\n\n {this.renderPagination()}\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n
\n \n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ invoices, shipperDetails, agentAppDetails }) {\n return ({\n error: invoices.error,\n errorData: invoices.errorData,\n shipperDetails: shipperDetails.shipperDetails,\n agentAppDetails: agentAppDetails,\n message: invoices.message,\n statuses: invoices.statuses,\n data: invoices.invoices,\n invoicesPdf: invoices.invoicesPdf,\n invoicesPdfStatus: invoices.invoicesPdfStatus,\n totalInvoices: invoices.totalInvoices,\n totalPages: invoices.totalPages,\n lastUpdated: invoices.lastUpdated\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchInvoicesWithFilter,\n fetchInvoicesPdf,\n fetchStatuses,\n clearInvoiceErrors\n }),\n withTranslation('common')\n)(Invoices);\n","import axios from 'axios'\n\nexport const updateLabelPreferenceApi = async (agentAppId, secretKey, labelType) => {\n try {\n const response = await axios.put(`/api/order/shipper-agent-app/${agentAppId}/`, {\n 'secret_key': secretKey,\n 'label_preference': labelType\n })\n return response.data\n } catch(err) {\n const response = (err.response && err.response.data) || {}\n response.isError = true\n return response\n }\n}\n\nexport const updateReturnConsolidationPeriodApi = async (agentAppId, secretKey, period) => {\n try {\n const response = await axios.put(`/api/order/shipper-agent-app/${agentAppId}/`, {\n 'secret_key': secretKey,\n 'default_returns_consolidation_period': period\n })\n return response.data\n } catch(err) {\n const response = (err.response && err.response.data) || {}\n response.isError = true\n return response\n }\n}\n\n\nexport const displayShipperAddressOnShippingLabelApi = async (agentAppId, secretKey, showLabelShipperAddress) => {\n try {\n const response = await axios.put(`/api/order/shipper-agent-app/${agentAppId}/`, {\n 'secret_key': secretKey,\n 'label_shipper_address': showLabelShipperAddress\n })\n return response.data\n } catch(err) {\n const response = (err.response && err.response.data) || {}\n response.isError = true\n return response\n }\n}","import React, { useState, useEffect } from 'react'\nimport { Jumbotron } from 'react-bootstrap'\nimport { Radio } from 'antd'\nimport { withTranslation, Trans } from 'react-i18next'\nimport compose from 'recompose/compose'\nimport { connect } from \"react-redux\"\nimport { updateLabelPreferenceApi } from './changeLabelApi'\nimport { updateAgentAppLabelPreference } from '../../actions/agentAppInfoActions';\nimport './changeLabelType.scss'\n\n\nconst ChangeLabelType = ({ agentAppDetails, updateAgentAppLabelPreference, onChange }) => {\n const [selectedLabel, setselectedLabel] = useState('default')\n const [showSuccess, setshowSuccess] = useState(false)\n const [showError, setshowError] = useState(false)\n const [loading, setloading] = useState(false)\n\n useEffect(() => {\n if (!!agentAppDetails.label_preference && agentAppDetails.label_preference !== selectedLabel) {\n setselectedLabel(agentAppDetails.label_preference)\n }\n }, [agentAppDetails.label_preference, selectedLabel])\n\n const saveLabelPreference = async () => {\n setshowSuccess(false)\n setshowError(false)\n setloading(true)\n const data = await updateLabelPreferenceApi(\n agentAppDetails.agent_application_id,\n agentAppDetails.agent_application_secret_key,\n selectedLabel\n )\n if (!data.isError) {\n updateAgentAppLabelPreference({\n label_preference: selectedLabel\n })\n setshowSuccess(true)\n } else {\n setshowError(true)\n }\n setloading(false)\n }\n \n if (!Object.entries(agentAppDetails).length) {\n return Loading label preference... \n }\n\n return (\n \n
\n {setselectedLabel(e.target.value)}}>\n \n \n \n \n {\n showSuccess &&\n Update label preference success!
\n }\n {\n showError &&\n Error
\n }\n \n \n {loading ? 'Saving...': \n )\n}\n\nconst mapStateToProps = ({ agentAppDetails }) => ({\n agentAppDetails\n});\n\nexport default compose(\n connect(mapStateToProps, {\n updateAgentAppLabelPreference\n }),\n withTranslation('common')\n)(ChangeLabelType);\n","import React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport { Jumbotron } from 'react-bootstrap'\nimport { Radio } from 'antd'\nimport { Trans } from 'react-i18next'\nimport { updateAgentAppLabelPreference } from '../../actions/agentAppInfoActions';\nimport { updateReturnConsolidationPeriodApi } from './changeLabelApi'\n\nconst ReturnConsolidation = ({ agentAppDetails, updateAgentAppLabelPreference }) => {\n const [consolidationValue, setConsolidationValue] = useState()\n const [, setshowSuccess] = useState(false)\n const [, setshowError] = useState(false)\n const [loading, setloading] = useState(false)\n\n const handleChange = e => {\n let { value } = e.target\n setConsolidationValue(value)\n }\n\n const handleSave = async () => {\n setshowSuccess(false)\n setshowError(false)\n setloading(true)\n const data = await updateReturnConsolidationPeriodApi(\n agentAppDetails.agent_application_id,\n agentAppDetails.agent_application_secret_key,\n consolidationValue\n )\n if (!data.isError) {\n updateAgentAppLabelPreference({\n default_returns_consolidation_period: consolidationValue\n })\n setshowSuccess(true)\n } else {\n setshowError(true)\n }\n setloading(false)\n }\n\n useEffect(() => {\n if (\n !!agentAppDetails.default_returns_consolidation_period\n && agentAppDetails.default_returns_consolidation_period !== consolidationValue) {\n setConsolidationValue(agentAppDetails.default_returns_consolidation_period)\n }\n }, [agentAppDetails.default_returns_consolidation_period]) \n\n return (\n \n Return Consolidation
\n Only applies to cross-border shipping
\n \n \n Weekly \n Bi-Weekly \n Monthly \n No Consolidation \n \n
\n\n \n {loading ? 'Saving...': \n )\n}\n\nconst mapState = ({ agentAppDetails }) => ({\n agentAppDetails\n})\n\nexport default connect(\n mapState, {\n updateAgentAppLabelPreference: updateAgentAppLabelPreference\n }\n)(ReturnConsolidation)","import React, { useState } from 'react'\nimport { Jumbotron } from 'react-bootstrap'\nimport { Trans } from 'react-i18next'\nimport axios from 'axios';\nimport { Checkbox } from 'antd'\n\nconst UserNotificationSettings = ({ agentAppDetails, ...props }) => {\n const [state, setState] = useState({\n sendNotificationEmail: agentAppDetails.send_notification_email,\n sendNotificationSms: agentAppDetails.send_notification_sms,\n loading: false,\n showSuccess: false,\n showError: false,\n });\n\n const handleSave = async () => {\n setState({\n ...state,\n loading: true,\n showSuccess: false,\n showError: false\n })\n try {\n await axios.put(`/api/order/shipper-agent-app/${agentAppDetails.agent_application_id}/`, {\n 'secret_key': agentAppDetails.agent_application_secret_key,\n 'send_notification_email': state.sendNotificationEmail,\n 'send_notification_sms': state.sendNotificationSms\n })\n setState({\n ...state,\n showError: false,\n showSuccess: true,\n loading: false\n }); \n } catch(err) {\n // const response = (err.response && err.response.data) || {}\n setState({\n ...state,\n showError: true,\n showSuccess: false,\n loading: false\n });\n }\n\n\n }\n\n const isFormChanged = () => {\n if(state.sendNotificationEmail === agentAppDetails.send_notification_email &&\n state.sendNotificationSms === agentAppDetails.send_notification_sms) {\n return false\n }\n return true;\n }\n\n return (\n \n Notification Settings
\n {\n setState({...state, sendNotificationEmail: e.target.checked});\n }} >Email notifications
\n {\n setState({...state, sendNotificationSms: e.target.checked});\n\n }} >SMS notifications
\n\n \n {state.loading ? 'Saving...': \n )\n}\n\nexport default UserNotificationSettings;","import React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport { Jumbotron } from 'react-bootstrap'\nimport { Radio } from 'antd'\nimport { Trans } from 'react-i18next'\nimport { showLabelShipperAddressAction } from '../../actions/agentAppInfoActions';\nimport { displayShipperAddressOnShippingLabelApi } from './changeLabelApi'\n\nconst DisplayShipperAddress = ({ agentAppDetails, showLabelShipperAddressAction }) => {\n const [showShipperAddress, setShowShipperAddress] = useState();\n const [loading, setloading] = useState(false);\n\n const handleChange = e => {\n let { value } = e.target\n setShowShipperAddress(value)\n };\n\n const handleSave = async () => {\n setloading(true);\n const data = await displayShipperAddressOnShippingLabelApi(\n agentAppDetails.agent_application_id,\n agentAppDetails.agent_application_secret_key,\n showShipperAddress\n );\n if (!data.isError) {\n showLabelShipperAddressAction({\n label_shipper_address: showShipperAddress\n });\n }\n setloading(false);\n }\n\n useEffect(() => {\n if (agentAppDetails.label_shipper_address !== showShipperAddress) {\n setShowShipperAddress(agentAppDetails.label_shipper_address)\n };\n }, [agentAppDetails.label_shipper_address]) \n\n return (\n \n Display Shipper Address On Shipping Label
\n \n \n Show \n Hide \n \n
\n\n \n {loading ? 'Saving...': \n )\n}\n\nconst mapState = ({ agentAppDetails }) => ({\n agentAppDetails\n})\n\nexport default connect(\n mapState, {\n showLabelShipperAddressAction: showLabelShipperAddressAction\n }\n)(DisplayShipperAddress)","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { ClipLoader } from 'react-spinners';\nimport { connect } from \"react-redux\";\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\nimport ChangeLabelType from './ChangeLabelType'\nimport _ from 'lodash';\nimport { Alert } from 'antd'\n\nimport {\n fetchSignedInUser,\n editSignedInUser,\n changePassword,\n clearAuthErrors\n} from '../../actions/authActions';\nimport { validate } from '../../utils/validatorUtils';\n\nimport InputField from '../common/InputField';\nimport { SeenOnce } from \"../common/NewFeature\";\nimport ReturnConsolidation from \"./ReturnConsolidation\";\nimport UserNotificationSettings from \"./UserNotificationSettings\";\nimport DisplayShipperAddress from \"./DisplayShipperAddress\";\n\nclass User extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n errorData: null,\n editType: null,\n updatedStatus: false,\n email: '',\n name: '',\n isFirstMile: false,\n isShipper: false,\n\n changePasswordUpdatedStatus: false,\n diffPasswordStatus: false,\n currentPassword: '',\n newPassword: '',\n retypePassword: '',\n labelPreference: '',\n };\n }\n\n componentDidMount() {\n this.props.fetchSignedInUser();\n }\n\n componentDidUpdate() {\n if (this.props.user && !this.state.email) {\n this.setState({\n email: this.props.user.email,\n name: this.props.user.name,\n isFirstMile: this.props.user.is_first_mile,\n isShipper: this.props.user.is_shipper\n })\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.errorData !== this.state.errorData) {\n this.setState({\n errorData: this.props.errorData\n });\n }\n\n if (this.props.editType !== this.state.editType) {\n this.setState({\n editType: this.props.editType\n });\n }\n\n if (this.props.agentAppDetails && this.props.agentAppDetails.hasOwnProperty('label_preference') && !this.state.labelPreference) {\n console.log('this.props.agentAppDetails', this.props.agentAppDetails)\n this.setState({\n labelPreference: this.props.agentAppDetails.label_preference\n })\n }\n }\n\n setLabelPreference(labelPreference) {\n this.setState({\n labelPreference\n })\n }\n\n componentWillUnmount() {\n this.props.clearAuthErrors();\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n type={type}\n className=\"form-control\"\n id={id}\n placeholder={placeholder}\n />\n
\n );\n }\n\n renderCheckbox = (name, stateValue) => {\n return (\n \n \n this.handleToggleCheckbox(e)} />\n {name}\n \n
\n );\n }\n\n handleOnChange(e) {\n this.props.clearAuthErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handlePasswordOnChange(e) {\n this.props.clearAuthErrors();\n this.setState({\n changePasswordUpdatedStatus: true,\n diffPasswordStatus: false\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleToggleCheckbox = (e) => {\n this.props.clearAuthErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { id } = e.target;\n this.setState({ [id]: !this.state[id] });\n }\n\n handleSubmit = () => {\n this.props.clearAuthErrors();\n\n const validatorList = [\n { fieldName: 'email', optional: false, type: 'email' },\n { fieldName: 'name', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, true);\n console.log(canSubmit);\n\n if (canSubmit) {\n const { user } = this.props;\n const { name, email } = this.state;\n\n this.props.editSignedInUser(user.id, email, name);\n this.setState({\n updatedStatus: false\n });\n }\n }\n\n handleChangePassword = () => {\n this.props.clearAuthErrors();\n\n const validatorList = [\n { fieldName: 'currentPassword', optional: false, type: 'text' },\n { fieldName: 'newPassword', optional: false, type: 'text' },\n { fieldName: 'retypePassword', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, false);\n console.log(canSubmit);\n\n if (canSubmit) {\n const { user } = this.props;\n const { currentPassword, newPassword, retypePassword } = this.state;\n\n if (newPassword === retypePassword) {\n this.props.changePassword(user.id, currentPassword, newPassword);\n this.setState({\n changePasswordUpdatedStatus: false\n });\n } else {\n this.setState({\n diffPasswordStatus: true\n });\n }\n }\n }\n\n renderChangePasswordErrorAlert = () => {\n let errorDataDiv = null;\n\n if (this.state.errorData !== undefined && !_.isEmpty(this.state.errorData) && this.state.error) {\n let errorMessage = [];\n _.forEach(this.state.errorData, (error) => {\n if (Object.keys(error).length > 0) {\n let fieldNames = Object.keys(error)\n for (const fieldName of fieldNames) {\n errorMessage.push({error[fieldName]}
)\n }\n }\n });\n\n errorDataDiv = \n
Error \n
\n \n\n
\n \n
\n :\n null\n }\n\n {\n this.props.editType === 'user' && !_.isEmpty(this.state.errorData) ?\n \n
\n \n\n
\n \n
\n :\n null\n }\n\n {\n this.state.diffPasswordStatus ?\n \n
\n :\n null\n }\n\n {\n this.props.editType === 'changePassword' && !_.isEmpty(this.state.errorData) ?\n this.renderChangePasswordErrorAlert()\n :\n null\n }\n\n \n \n\n
\n
\n
\n
\n
\n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ auth, shipperDetails, agentAppDetails }) {\n return ({\n error: auth.error,\n errorData: auth.errorData,\n user: auth.user,\n editType: auth.editType,\n shipperDetails: shipperDetails.shipperDetails,\n agentAppDetails,\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchSignedInUser,\n editSignedInUser,\n changePassword,\n clearAuthErrors\n }),\n withTranslation('common')\n)(User);\n","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport {\n fetchSignedInUser,\n changePassword,\n clearAuthErrors\n} from '../../actions/authActions';\nimport { validate } from '../../utils/validatorUtils';\n\nimport InputField from '../common/InputField';\n\nclass ChangePassword extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n updatedStatus: false,\n diffPasswordStatus: false,\n newPassword: '',\n retypePassword: ''\n };\n }\n\n componentDidMount() {\n this.props.fetchSignedInUser();\n }\n\n componentDidUpdate() {\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n }\n\n componentWillUnmount() {\n this.props.clearAuthErrors();\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n onKeyUp={(e) => this.handleKeyUp(e)}\n type={type}\n className=\"form-control\"\n id={id}\n placeholder={placeholder}\n />\n
\n );\n }\n\n handleOnChange(e) {\n this.props.clearAuthErrors();\n this.setState({\n updatedStatus: true,\n diffPasswordStatus: false\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleKeyUp(e) {\n if (e.keyCode === 13 || e.which === 13) {\n if (this.state.newPassword.length > 0 && this.state.retypePassword.length > 0) {\n this.handleSubmit();\n }\n }\n }\n\n handleSubmit = () => {\n this.props.clearAuthErrors();\n\n const validatorList = [\n { fieldName: 'newPassword', optional: false, type: 'text' },\n { fieldName: 'retypePassword', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, false);\n console.log(canSubmit);\n\n if (canSubmit) {\n const { user } = this.props;\n const { newPassword, retypePassword } = this.state;\n\n if (newPassword === retypePassword) {\n this.props.changePassword(user.id, newPassword);\n this.setState({\n updatedStatus: false\n });\n } else {\n this.setState({\n diffPasswordStatus: true\n });\n }\n }\n }\n\n render() {\n return (\n \n
\n
\n \n
\n :\n null\n }\n\n {\n this.state.diffPasswordStatus ?\n \n
\n :\n null\n }\n\n \n \n
\n
\n
\n \n
\n \n
\n
this.handleDropdownChange(e)}\n >\n {this.props.t('data.privilege.manager')} \n {this.props.t('data.privilege.creator')} \n {this.props.t('data.privilege.viewer')} \n \n
\n :\n null\n }\n\n {\n this.state.error === false && this.state.isEditSubProfile ?\n \n
\n :\n null\n }\n\n {\n this.state.errorData ?\n \n
\n { JSON.stringify(this.state.errorData) }\n
\n \n \n
\n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, subProfiles }) {\n return ({\n shipperDetails: shipperDetails.shipperDetails,\n error: subProfiles.error,\n errorData: subProfiles.errorData,\n subProfile: subProfiles.subProfile,\n lastUpdated: subProfiles.lastUpdated\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchSubProfilesById,\n editSubProfile,\n deleteSubProfile,\n clearSubProfilesErrors\n }),\n withStyles(styles),\n withTranslation('common')\n)(ViewSubProfile);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport SubmitSuccessMessage from '../common/SubmitSuccessMessage';\n\nclass AddSubProfileSuccess extends Component {\n constructor(props) {\n super(props);\n this.state = {\n\n };\n }\n\n render() {\n const title = \"Add Sub Profile Success!\";\n\n const subTitleList = [\n ''\n ];\n\n const mainButtonList = [\n {\n link: '/sub-profiles/',\n text: 'View all sub profiles'\n }\n ];\n\n return (\n \n
\n );\n }\n}\n\nfunction mapStateToProps() {\n return ({\n\n });\n}\n\nexport default connect(mapStateToProps, {})(AddSubProfileSuccess);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport SubmitSuccessMessage from '../common/SubmitSuccessMessage';\n\nclass DeleteSubProfileSuccess extends Component {\n constructor(props) {\n super(props);\n this.state = {\n\n };\n }\n\n render() {\n const title = \"Sub Profile Deleted!\";\n\n const subTitleList = [\n ''\n ];\n\n const mainButtonList = [\n {\n link: '/sub-profiles/',\n text: 'View all sub profiles'\n }\n ];\n\n return (\n \n
\n );\n }\n}\n\nfunction mapStateToProps() {\n return ({\n\n });\n}\n\nexport default connect(mapStateToProps, {})(DeleteSubProfileSuccess);\n","import React, { Component } from \"react\";\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport { history } from '../../utils/historyUtils';\nimport { validate } from '../../utils/validatorUtils';\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n addSubProfile,\n clearSubProfilesErrors\n} from '../../actions/subProfilesActions';\n\nimport InputField from '../common/InputField';\nimport DropdownField from '../common/DropdownField';\n\nclass AddSubProfile extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n errorData: null,\n updatedStatus: false,\n\n subProfileName: '',\n subProfileContactPerson: '',\n subProfileNumber: '',\n subProfileEmail: '',\n password: '',\n privilege: ''\n };\n }\n\n componentDidMount() {\n this.props.fetchShipperDetails();\n }\n\n componentWillUnmount() {\n this.props.clearSubProfilesErrors();\n }\n\n componentDidUpdate() {\n if (this.props.error === false) {\n history.push('/add-sub-profile/success');\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.errorData !== this.state.errorData) {\n this.setState({\n errorData: this.props.errorData\n });\n }\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n />\n
\n );\n }\n\n renderPrivilege = () => {\n let options = [{\n value: 'select one...',\n label: this.props.t('data.selectOne')\n }];\n\n const privilegeList = ['manager', 'creator', 'viewer'];\n _.map(privilegeList, (item, i) => {\n let data = {\n value: item,\n label: this.props.t(`data.privilege.${item}`)\n };\n options.push(data);\n });\n\n return options;\n }\n\n handlePrivilegeChange = (e) => {\n this.props.clearSubProfilesErrors();\n this.setState({\n updatedStatus: true\n });\n\n const selectedValue = e.value;\n console.log(selectedValue);\n\n if (selectedValue !== 'select one...') {\n this.setState({\n privilege: selectedValue\n });\n } else {\n this.setState({\n privilege: ''\n });\n }\n }\n\n handleOnChange(e) {\n this.props.clearSubProfilesErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleSubmit = () => {\n this.props.clearSubProfilesErrors();\n\n const validatorList = [\n { fieldName: 'subProfileName', optional: false, type: 'text' },\n { fieldName: 'subProfileContactPerson', optional: false, type: 'text' },\n { fieldName: 'subProfileNumber', optional: false, type: 'text' },\n { fieldName: 'subProfileEmail', optional: false, type: 'email' },\n { fieldName: 'password', optional: true, type: 'password' },\n { fieldName: 'privilege', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, true);\n console.log(canSubmit);\n\n if (canSubmit) {\n this.props.addSubProfile(this.props.shipperDetails.agent_application_secret_key, this.state.subProfileName, this.state.subProfileContactPerson,\n this.state.subProfileNumber, this.state.subProfileEmail, this.state.password,\n this.state.privilege);\n this.setState({\n updatedStatus: false\n });\n }\n }\n\n render() {\n return (\n \n
\n
\n this.handlePrivilegeChange(e)} renderItems={this.renderPrivilege()} />\n {\n this.state.error === false ?\n \n
\n :\n null\n }\n\n {\n this.state.errorData ?\n \n
\n {JSON.stringify(this.state.errorData)}\n
\n \n
\n
this.handleCheckboxChange(e, value)}\n />\n );\n },\n Header: (row) => {\n const selectedAllDataList = row.data;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t this.toggleSelectAll(selectedAllDataList)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n },\n {\n Header: 'Sub Profile Name',\n accessor: 'agent_application_name'\n },\n {\n Header: 'Sub Profile Email',\n accessor: 'agent_application_email'\n },\n {\n Header: 'Privilege',\n accessor: 'privilege'\n },\n {\n id: \"button\",\n Header: 'Action',\n accessor: \"\",\n width: 120,\n Cell: ({row, value}) => {\n const agentApplicationId = value.agent_application_id;\n return (\n \n this.handleEditButton(agentApplicationId)}>Edit \n
\n );\n }\n },\n ];\n\n let renderDiv = null;\n if (this.props.data === undefined) {\n renderDiv = ;\n } else {\n renderDiv = \n
\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n
\n // String(row[filter.id]).toUpperCase().includes(filter.value.toUpperCase())\n // }\n />\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n \n
;\n }\n\n return (\n \n {renderDiv}\n
\n );\n }\n}\n\nfunction mapStateToProps({ shipperDetails, subProfiles }) {\n return ({\n error: subProfiles.error,\n shipperDetails: shipperDetails.shipperDetails,\n data: subProfiles.subProfiles,\n totalUsers: subProfiles.totalUsers,\n totalPages: subProfiles.totalPages,\n lastUpdated: subProfiles.lastUpdated\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchSubProfiles,\n clearSubProfilesErrors\n }),\n withTranslation('common')\n)(SubProfiles);\n","import React, { Component } from 'react';\nimport { Jumbotron } from 'react-bootstrap';\nimport { ClipLoader } from 'react-spinners';\nimport { connect } from \"react-redux\";\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport {\n fetchShipperDetails,\n fetchLanguages,\n editShipperDetails,\n clearShipperDetailsErrors\n} from '../../actions/shipperDetailsActions';\nimport { validate } from '../../utils/validatorUtils';\n\nimport InputField from '../common/InputField';\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass ShipperDetails extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n updatedStatus: false,\n anchorEl: null,\n\n userId: 0,\n shipperName: '',\n shipperEmail: '',\n shipperNumber: '',\n isActive: false,\n enableSMS: false,\n enableEmail: false,\n privilege: '',\n language: '',\n extraData: {}\n };\n }\n\n componentDidMount() {\n this.props.fetchShipperDetails();\n if (this.props.languages === undefined) {\n this.props.fetchLanguages();\n }\n }\n\n componentDidUpdate() {\n if (this.state.error === false) {\n setTimeout(() => {\n localStorage.setItem(\"lang\", this.state.language)\n window.location.reload();\n }, 1500);\n }\n\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n const { shipperDetails } = this.props\n if (shipperDetails && shipperDetails.hasOwnProperty('user_id') && !this.state.userId) {\n this.setState({\n userId: shipperDetails.user_id,\n shipperName: shipperDetails.shipper_name,\n shipperEmail: shipperDetails.shipper_email,\n shipperNumber: shipperDetails.shipper_number,\n isActive: shipperDetails.is_active,\n enableSMS: shipperDetails.enable_sms,\n enableEmail: shipperDetails.enable_email,\n privilege: shipperDetails.privilege,\n language: shipperDetails.language,\n extraData: shipperDetails.extra_data\n });\n }\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n />\n
\n );\n }\n\n renderCheckbox = (name, id, stateValue) => {\n return (\n \n \n this.handleToggleCheckbox(e)}\n />\n {name}\n \n
\n );\n }\n\n renderLanguages = () => {\n let option = [];\n\n let lang_mapping = {\n 'chi': 'Chinese (Simplified)',\n 'cht': 'Chinese (Traditional)',\n 'ind': 'Bahasa Indonesia',\n 'eng': 'English'\n }\n\n _.map(this.props.languages, (item, i) => {\n option.push({lang_mapping[item]} );\n });\n\n return option;\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n handleOnChange(e) {\n this.props.clearShipperDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleDropdownChange = (e) => {\n this.props.clearShipperDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleToggleCheckbox = (e) => {\n this.props.clearShipperDetailsErrors();\n this.setState({\n updatedStatus: true\n });\n\n const { id } = e.target;\n this.setState({ [id]: !this.state[id] });\n }\n\n handleSubmit = () => {\n this.props.clearShipperDetailsErrors();\n\n const validatorList = [\n { fieldName: 'shipperName', optional: false, type: 'text' },\n { fieldName: 'shipperEmail', optional: false, type: 'email' },\n { fieldName: 'shipperNumber', optional: false, type: 'number' },\n { fieldName: 'language', optional: false, type: 'text' },\n ];\n const canSubmit = validate(validatorList, this.state, true);\n console.log(canSubmit);\n\n if (canSubmit) {\n if (this.state.enableSMS !== null && this.state.enableEmail !== null) {\n this.props.editShipperDetails(this.state.userId, this.state.shipperName, this.state.shipperEmail,\n this.state.shipperNumber, this.state.enableSMS, this.state.enableEmail,\n this.state.language);\n this.setState({\n updatedStatus: false\n });\n }\n }\n }\n\n render() {\n // const { classes } = this.props;\n // const { anchorEl } = this.state;\n // const open = Boolean(anchorEl);\n\n let renderDiv = null;\n if (this.props.shipperDetails === undefined) {\n renderDiv = ;\n } else {\n renderDiv = \n
\n
\n \n
\n
this.handleDropdownChange(e)}\n >\n { this.renderLanguages() }\n \n \n
\n :\n null\n }\n\n \n \n
\n {renderDiv}\n
\n )\n }\n}\n\nfunction mapStateToProps({ shipperDetails }) {\n return ({\n shipperDetails: shipperDetails.shipperDetails,\n languages: shipperDetails.languages,\n error: shipperDetails.error\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchShipperDetails,\n fetchLanguages,\n editShipperDetails,\n clearShipperDetailsErrors\n }),\n withStyles(styles),\n withTranslation('common')\n)(ShipperDetails);\n","import axios from 'axios';\nimport {\n UNAUTH_USER,\n FETCH_SHOPIFY_SHOPS,\n FETCH_SHOPIFY_ORDERS,\n CLEAR_SUBMIT_SHOPIFY_ORDERS_ERRORS\n} from './types';\nimport { ROOT_URL } from './index';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchShopifyShops(secretKey) {\n console.log('fetching shopify shops...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.get(`${ROOT_URL}/shopify/get-shopify-shops/`,\n {\n params: {\n 'secret_key': secretKey\n }\n },\n { headers: { 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_SHOPIFY_SHOPS,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n });;\n }\n}\n\nexport function fetchShopifyOrders(shop) {\n console.log('fetching shopify orders...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.get(`${ROOT_URL}/shopify/get-orders/`,\n {\n params: {\n 'shop': shop\n }\n },\n { headers: { 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_SHOPIFY_ORDERS,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n });;\n }\n}\n\nexport function clearSubmitShopifyOrdersErrors() {\n console.log('clearing submit shopify orders errors...');\n return {\n type: CLEAR_SUBMIT_SHOPIFY_ORDERS_ERRORS\n }\n}\n\n// Post shopify url\nexport function postShopifyUrl(domain, secretKey) {\n console.log('submit shopify domain URL');\n const token = localStorage.getItem('token');\n return axios.post(`${ROOT_URL}/shopify/app/connect/`,\n {\n 'secret_key': secretKey,\n 'shop': domain,\n 'added_from_portal': true\n },\n { headers: { 'Authorization': 'Token ' + token } }\n ).then(res => {\n return res\n })\n}","import React, { useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport compose from \"recompose/compose\";\nimport shopifyLogo from \"../../images/shopify_logo_black.svg\";\nimport {\n fetchShopifyShops,\n postShopifyUrl\n} from \"../../actions/submitShopifyOrdersActions\";\n\nfunction ConnectAStore(props) {\n const [showShopifyForm, setShowShopifyForm] = useState(false);\n const [domain, setDomain] = useState(\"\");\n const [secretKey, setSecretKey] = useState();\n\n if (\n !secretKey &&\n props.shipperDetails &&\n props.shipperDetails.agent_application_secret_key\n ) {\n setSecretKey(props.shipperDetails.agent_application_secret_key);\n props.fetchShopifyShops(props.shipperDetails.agent_application_secret_key);\n }\n\n function handleSubmit(e) {\n e.preventDefault();\n redirectToShopify(domain);\n return false;\n }\n\n function redirectToShopify(params) {\n postShopifyUrl(params, secretKey)\n .then(response => {\n if (response.status === 200) {\n window.location = response.data.redirect_url;\n }\n })\n .catch(error => {\n console.log(error);\n });\n }\n\n return (\n \n {!showShopifyForm && (\n
\n
\n
Select a store to connect
\n
\n
setShowShopifyForm(true)}\n alt=\"shopify logo\"\n />\n \n
\n
\n )}\n\n {showShopifyForm && (\n <>\n
\n
\n
\n {props.shopifyShops &&\n props.shopifyShops.map((item, i) => {\n return (\n
redirectToShopify(item.name)}\n >\n {item.name}\n \n );\n })}\n
\n
\n
\n );\n }\n}\n\nfunction mapStateToProps({ pickupPoint }) {\n return ({\n address_added_type: pickupPoint.address_added_type || \"pickup\"\n });\n}\n\nexport default connect(mapStateToProps, {})(AddPickupPointSuccess);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n\nimport SubmitSuccessMessage from '../common/SubmitSuccessMessage';\n\nclass DeletePickupPointSuccess extends Component {\n constructor(props) {\n super(props);\n this.state = {\n\n };\n }\n\n render() {\n const title = \"Delete Pickup Point Success!\";\n\n const subTitleList = [\n ''\n ];\n\n const mainButtonList = [\n {\n link: '/pickup-points/',\n text: 'View Pickup Points / Pickup Point'\n }\n ];\n\n return (\n \n
\n );\n }\n}\n\nfunction mapStateToProps() {\n return ({\n\n });\n}\n\nexport default connect(mapStateToProps, {})(DeletePickupPointSuccess);\n","import axios from 'axios';\nimport { queryCache } from \"react-query\"\nimport {\n UNAUTH_USER,\n\n FETCH_PICKUP_POINT,\n FETCH_PICKUP_POINT_BY_ID,\n ADD_PICKUP_POINT,\n EDIT_PICKUP_POINT,\n DELETE_PICKUP_POINT,\n CLEAR_PICKUP_POINT_ERRORS,\n\n FETCH_RETURN_POINT,\n FETCH_RETURN_POINT_BY_ID,\n ADD_RETURN_POINT,\n EDIT_RETURN_POINT,\n DELETE_RETURN_POINT,\n CLEAR_RETURN_POINT_ERRORS,\n\n ADDRESS_ADDED_TYPE\n} from './types';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchPickupPoint(type=\"pickup\") {\n /**\n * param type:\n * \"pickup\": \"return\"\n */\n console.log(`fetching ${type} point...`);\n\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n const url = `/api/shipper/${type}-point/`\n axios.get(url,\n { headers: { 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: type === \"pickup\" ? FETCH_PICKUP_POINT:FETCH_RETURN_POINT,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n })\n }\n}\n\nexport function fetchPickupPointById(id, type=\"pickup\") {\n console.log(`fetching ${type} point by id ${id}`);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n const url = `/api/shipper/${type}-point/${id}/`\n axios.get(url,\n { headers: { 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: type === \"pickup\" ? FETCH_PICKUP_POINT_BY_ID:FETCH_RETURN_POINT_BY_ID,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n })\n }\n}\n\nexport function addPickupPoint(data, type=\"pickup\") {\n console.log(`adding ${type} point...`);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n const url = `/api/shipper/${type}-point/`\n axios.post(url,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: type === \"pickup\" ? ADD_PICKUP_POINT:ADD_RETURN_POINT,\n payload: false\n });\n dispatch({\n type: ADDRESS_ADDED_TYPE,\n payload: type\n })\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: type === \"pickup\" ? ADD_PICKUP_POINT:ADD_RETURN_POINT,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function editPickupPoint(pickupPointId, data, type=\"pickup\") {\n console.log(`editing ${type} point by ${pickupPointId}`);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n const url = `/api/shipper/${type}-point/${pickupPointId}/`\n axios.patch(url,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n queryCache.invalidateQueries(\"return-points\")\n dispatch({\n type: type === \"pickup\" ? EDIT_PICKUP_POINT:EDIT_RETURN_POINT,\n payload: false\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: type === \"pickup\" ? EDIT_PICKUP_POINT:EDIT_RETURN_POINT,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function deletePickupPoint(pickupPointId, type=\"pickup\") {\n console.log(`deleting ${type} point by ${pickupPointId}`);\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n const url = `/api/shipper/${type}-point/${pickupPointId}/`\n axios.delete(url,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: type === \"pickup\" ? DELETE_PICKUP_POINT:DELETE_RETURN_POINT,\n payload: false,\n status: response.status\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: type === \"pickup\" ? DELETE_PICKUP_POINT:DELETE_RETURN_POINT,\n payload: true\n });\n });\n }\n}\n\nexport function clearPickupPointErrors(type=\"pickup\") {\n console.log('clearing pickup point errors...');\n return {\n type: type === \"pickup\" ? CLEAR_PICKUP_POINT_ERRORS:CLEAR_RETURN_POINT_ERRORS\n }\n}\n","import React, { Component } from \"react\";\nimport axios from 'axios'\nimport {ROOT_URL} from '../../actions'\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { history } from '../../utils/historyUtils';\nimport { validate } from '../../utils/validatorUtils';\nimport { Checkbox } from 'antd'\n\nimport {\n fetchAllCountries\n} from '../../actions/orderActions';\nimport { addPickupPoint, clearPickupPointErrors } from '../../actions/pickupPointActions';\n\nimport InputField from '../common/InputField';\nimport DropdownField from '../common/DropdownField';\nimport { withRouter } from \"react-router\";\n\nclass AddPickupPoint extends Component {\n constructor(props) {\n super(props);\n const { match: { path } } = props\n this.state = {\n pointType: path.includes(\"pickup\") ? \"pickup\":\"return\",\n error: true,\n errorData: null,\n states: ['pick one...'],\n cities: ['pick one...'],\n stateLoading: false,\n cityLoading: false,\n countryCodeLoading: false,\n\n pickupPointName: '',\n pickupPointAddress: '',\n pickupPointCountry: '',\n pickupPointState: '',\n pickupPointCity: '',\n pickupPointProvince: '',\n pickupPointPostal: '',\n pickupPointContactPerson: '',\n pickupPointNumber: '',\n pickupPointNote: '',\n pickupPointEmail: '',\n countryCode: null,\n setAsDefault: false,\n };\n }\n\n componentDidMount() {\n if (this.props.countries === undefined) {\n this.props.fetchAllCountries();\n }\n }\n\n componentWillUnmount() {\n this.props.clearPickupPointErrors(this.state.pointType);\n }\n\n componentDidUpdate() {\n let error, errorData\n if (this.state.pointType === \"pickup\") {\n error = this.props.error\n errorData = this.props.errorData\n } else {\n error = this.props.errorReturn\n errorData = this.props.errorDataReturn\n }\n if (error === false) {\n if (this.props.onSuccess) {\n this.props.onSuccess()\n return\n }\n history.push('/add-address/success');\n }\n\n if (error !== this.state.error) {\n this.setState({\n error: error\n });\n }\n\n if (errorData !== this.state.errorData) {\n this.setState({\n errorData: errorData\n });\n }\n }\n\n renderCountries = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.props.countries, (item, i) => {\n let data = {\n value: item,\n label: item\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderStates = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.state.states, (item, i) => {\n let data = {\n value: item.state_name,\n label: item.state_name\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderCities = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.state.cities, (item, i) => {\n let data = {\n value: item.city_name,\n label: item.display_name\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n />\n
\n );\n }\n\n fetchStates = () =>{\n this.setState({stateLoading: true})\n console.log(this.state.pickupPointCountry)\n const url = `${ROOT_URL}/location/states/`\n axios.get(`${url}?countries=${this.state.pickupPointCountry}`)\n .then((response) => {\n this.setState({stateLoading: false})\n console.log(response)\n this.setState({states: response.data})\n })\n .catch((error) => {\n this.setState({stateLoading: false})\n console.log(error.response.data)\n });\n }\n\n fetchCities = () =>{\n this.setState({cityLoading: true})\n const url = '/api/location/cities/'\n axios.get(`${url}?countries=${this.state.pickupPointCountry}&states=${this.state.pickupPointState}`)\n .then((response) => {\n this.setState({cityLoading: false})\n console.log(response)\n this.setState({cities: response.data})\n })\n .catch((error) => {\n this.setState({cityLoading: false})\n console.log(error.response.data)\n });\n }\n\n fetchCountryCode = () => {\n this.setState({ countryCodeLoading: true })\n const url = `/api/data/phone-number/country-codes/?country=${this.state.pickupPointCountry}`\n axios.get(url)\n .then((response) => {\n const countryCode = response.data[0]\n this.setState({ countryCode, countryCodeLoading: false })\n })\n .catch((error) => {\n this.setState({ cityLoading: false })\n console.log(error.response.data)\n })\n .finally(() => {\n this.setState({ countryCodeLoading: false })\n })\n }\n\n handleDropdownChange = (e, type) => {\n if (type === 'pickupPointCountry') {\n this.setState({\n pickupPointState: '',\n pickupPointCity: ''\n })\n const selectedPickupPointCountry = e.value;\n\n if (selectedPickupPointCountry !== 'select one...') {\n this.setState({\n pickupPointCountry: selectedPickupPointCountry,\n updated: true\n }, () => {\n this.fetchStates()\n this.fetchCountryCode()\n });\n } else {\n this.setState({\n pickupPointCountry: '',\n updated: true\n });\n }\n }\n else if (type === 'pickupPointState') {\n this.setState({\n pickupPointCity: ''\n })\n const selectedPickupPointState = e.value;\n console.log(selectedPickupPointState)\n\n if (selectedPickupPointState !== 'select one...') {\n this.setState({\n pickupPointState: selectedPickupPointState,\n updated: true\n }, this.fetchCities);\n } else {\n this.setState({\n pickupPointState: '',\n updated: true\n });\n }\n }\n else {\n const selectedPickupPointCity = e.value;\n\n if (selectedPickupPointCity !== 'select one...') {\n this.setState({\n pickupPointCity: selectedPickupPointCity,\n updated: true\n });\n } else {\n this.setState({\n pickupPointCity: '',\n updated: true\n });\n }\n }\n }\n\n handleOnChange(e) {\n this.props.clearPickupPointErrors(this.state.pointType);\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleSubmit = () => {\n this.props.clearPickupPointErrors(this.state.pointType);\n\n const validatorList = [\n { fieldName: 'pickupPointName', optional: false, type: 'text' },\n { fieldName: 'pickupPointAddress', optional: false, type: 'text' },\n { fieldName: 'pickupPointCountry', optional: false, type: 'text' },\n { fieldName: 'pickupPointState', optional: false, type: 'text' },\n { fieldName: 'pickupPointCity', optional: false, type: 'text' },\n { fieldName: 'pickupPointProvince', optional: false, type: 'text' },\n { fieldName: 'pickupPointPostal', optional: false, type: 'text' },\n { fieldName: 'pickupPointContactPerson', optional: false, type: 'text' },\n { fieldName: 'pickupPointNumber', optional: false, type: 'text' },\n { fieldName: 'pickupPointNote', optional: true, type: 'text' },\n { fieldName: 'pickupPointEmail', optional: false, type: 'email' },\n ];\n const canSubmit = validate(validatorList, this.state, true);\n console.log(canSubmit);\n\n if (canSubmit) {\n let data\n if (this.state.pointType === \"pickup\") {\n data = {\n 'pickup_point_name': this.state.pickupPointName,\n 'pickup_point_address': this.state.pickupPointAddress,\n 'pickup_point_country': this.state.pickupPointCountry,\n 'pickup_point_state': this.state.pickupPointState,\n 'pickup_point_city': this.state.pickupPointCity,\n 'pickup_point_province': this.state.pickupPointProvince,\n 'pickup_point_postal': this.state.pickupPointPostal,\n 'pickup_point_contact_person': this.state.pickupPointContactPerson,\n 'pickup_point_number': this.state.countryCode.country_calling_code + this.state.pickupPointNumber,\n 'pickup_point_notes': this.state.pickupPointNote,\n 'pickup_point_email': this.state.pickupPointEmail\n };\n } else {\n data = {\n 'return_point_name': this.state.pickupPointName,\n 'address': this.state.pickupPointAddress,\n 'country': this.state.pickupPointCountry,\n 'state': this.state.pickupPointState,\n 'city': this.state.pickupPointCity,\n 'province': this.state.pickupPointProvince,\n 'postal': this.state.pickupPointPostal,\n\n 'contact_name': this.state.pickupPointContactPerson,\n 'contact_number': this.state.countryCode.country_calling_code + this.state.pickupPointNumber,\n 'contact_email': this.state.pickupPointEmail,\n 'notes': this.state.pickupPointNote,\n 'default': this.state.setAsDefault\n };\n }\n this.props.addPickupPoint(data, this.state.pointType);\n }\n }\n\n render() {\n const isDisabled = !(\n this.state.pickupPointName &&\n this.state.pickupPointAddress &&\n this.state.pickupPointCountry &&\n this.state.pickupPointState &&\n this.state.pickupPointCity &&\n this.state.pickupPointPostal &&\n this.state.pickupPointContactPerson &&\n this.state.pickupPointNumber &&\n this.state.pickupPointEmail)\n \n let error, errorData\n let formDiv\n if (this.state.pointType === \"pickup\") {\n error = this.props.error\n errorData = this.props.errorData\n formDiv = (\n \n this.handleDropdownChange(e, 'pickupPointCountry')} renderItems={this.renderCountries()} />\n this.handleDropdownChange(e, 'pickupPointState')} renderItems={this.renderStates()} />\n this.handleDropdownChange(e, 'pickupPointCity')} renderItems={this.renderCities()} />\n {/* \n
\n :\n null\n }\n\n {\n errorData ?\n \n
\n {JSON.stringify(errorData)}\n
\n \n )\n } else {\n error = this.props.errorReturn\n errorData = this.props.errorDataReturn\n formDiv = (\n \n this.handleDropdownChange(e, 'pickupPointCountry')} renderItems={this.renderCountries()} />\n this.handleDropdownChange(e, 'pickupPointState')} renderItems={this.renderStates()} />\n this.handleDropdownChange(e, 'pickupPointCity')} renderItems={this.renderCities()} />\n {/* \n {\n this.setState({setAsDefault: e.target.checked})\n }}>\n \n
\n \n {\n error === false ?\n \n
\n :\n null\n }\n \n {\n errorData ?\n \n
\n {JSON.stringify(errorData)}\n
\n \n )\n }\n \n return (\n \n );\n }\n}\n\nfunction mapStateToProps({ pickupPoint, order, returnPoint}) {\n return ({\n error: pickupPoint.error,\n errorData: pickupPoint.errorData,\n errorReturn: returnPoint.error,\n errorDataReturn: returnPoint.errorData,\n countries: order.countries,\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchAllCountries,\n addPickupPoint,\n clearPickupPointErrors\n }),\n withRouter,\n withTranslation('common'),\n)(AddPickupPoint);\n","import axios from 'axios';\nimport {\n UNAUTH_USER,\n FETCH_CONSIGNEE_ADDRESS,\n FETCH_CONSIGNEE_ADDRESS_BY_ID,\n ADD_CONSIGNEE_ADDRESS,\n EDIT_CONSIGNEE_ADDRESS,\n CLEAR_CONSIGNEE_ADDRESS_ERRORS\n} from './types';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchConsigneeAddress() {\n const token = localStorage.getItem('token');\n\n return function (dispatch) {\n const url = `/api/shipper/consignee-address/`\n axios.get(url,\n { headers: { 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n dispatch({\n type: FETCH_CONSIGNEE_ADDRESS,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n })\n }\n}\n\nexport function fetchConsigneeAddressById(id) {\n const token = localStorage.getItem('token');\n\n return function (dispatch) {\n const url = `/api/shipper/consignee-address/${id}/`\n axios.get(url,\n { headers: { 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_CONSIGNEE_ADDRESS_BY_ID,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({ type: UNAUTH_USER });\n })\n }\n}\n\nexport function addConsigneeAddress(data) {\n const token = localStorage.getItem('token');\n\n return function (dispatch) {\n const url = `/api/shipper/consignee-address/`\n axios.post(url,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n dispatch({\n type: ADD_CONSIGNEE_ADDRESS,\n payload: false\n });\n })\n .catch((error) => {\n dispatch({\n type: ADD_CONSIGNEE_ADDRESS,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function editConsigneeAddress(consigneeAddressId, data) {\n const token = localStorage.getItem('token');\n\n return function (dispatch) {\n const url = `/api/shipper/consignee-address/${consigneeAddressId}/`\n axios.patch(url,\n data,\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n .then((response) => {\n dispatch({\n type: EDIT_CONSIGNEE_ADDRESS,\n payload: false\n });\n })\n .catch((error) => {\n dispatch({\n type: EDIT_CONSIGNEE_ADDRESS,\n payload: true,\n errorData: error.data\n });\n });\n }\n}\n\nexport function clearConsigneeErrors() {\n return {\n type: CLEAR_CONSIGNEE_ADDRESS_ERRORS\n }\n}\n","import React, { Component } from \"react\";\nimport axios from 'axios'\nimport { ROOT_URL } from '../../actions'\nimport { Jumbotron } from 'react-bootstrap';\nimport { connect } from \"react-redux\";\nimport compose from 'recompose/compose';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { history } from '../../utils/historyUtils';\nimport { validate } from '../../utils/validatorUtils';\nimport { fetchAllCountries } from '../../actions/orderActions';\nimport { addConsigneeAddress, clearConsigneeErrors } from '../../actions/consigneeAddressActions';\nimport InputField from '../common/InputField';\nimport DropdownField from '../common/DropdownField';\nimport { withRouter } from \"react-router\";\nimport _ from 'lodash';\n\n\nclass AddConsigneeAddress extends Component {\n constructor(props) {\n super(props);\n this.state = {\n error: true,\n errorData: null,\n states: ['pick one...'],\n cities: ['pick one...'],\n stateLoading: false,\n cityLoading: false,\n\n consigneeName: '',\n consigneeEmail: '',\n consigneeNumber: '',\n consigneeAddress: '',\n consigneeCountry: '',\n consigneeState: '',\n consigneeCity: '',\n consigneePostal: ''\n };\n }\n\n componentDidMount() {\n if (this.props.countries === undefined) {\n this.props.fetchAllCountries();\n }\n }\n\n componentWillUnmount() {\n this.props.clearConsigneeErrors();\n }\n\n componentDidUpdate() {\n let error, errorData\n error = this.props.error;\n errorData = this.props.errorData;\n\n if (error === false) {\n if (this.props.onSuccess) {\n this.props.onSuccess()\n return;\n }\n history.push('/add-consignee-point/success');\n }\n\n if (error !== this.state.error) {\n this.setState({\n error: error\n });\n }\n\n if (errorData !== this.state.errorData) {\n this.setState({\n errorData: errorData\n });\n }\n }\n\n renderCountries = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.props.countries, (item, i) => {\n let data = {\n value: item,\n label: item\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderStates = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.state.states, (item, i) => {\n let data = {\n value: item.state_name,\n label: item.state_name\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderCities = () => {\n let option = [{\n value: 'select one...',\n label: 'select one...'\n }];\n\n _.map(this.state.cities, (item, i) => {\n let data = {\n value: item.city_name,\n label: item.display_name\n }\n option.push(data);\n });\n\n return option;\n }\n\n renderField = (fieldName, name, type, id, placeholder, stateValue) => {\n return (\n \n {fieldName} \n this.handleOnChange(e)}\n />\n
\n );\n }\n\n fetchStates = () => {\n this.setState({ stateLoading: true });\n const url = `${ROOT_URL}/location/states/`\n axios.get(`${url}?countries=${this.state.consigneeCountry}`)\n .then((response) => {\n this.setState({ stateLoading: false });\n this.setState({ states: response.data });\n })\n .catch((error) => {\n this.setState({ stateLoading: false });\n });\n }\n\n fetchCities = () => {\n this.setState({ cityLoading: true })\n const url = '/api/location/cities/'\n axios.get(`${url}?countries=${this.state.consigneeCountry}&states=${this.state.consigneeState}`)\n .then((response) => {\n this.setState({ cityLoading: false });\n this.setState({ cities: response.data });\n })\n .catch((error) => {\n this.setState({ cityLoading: false });\n });\n }\n\n handleDropdownChange = (e, type) => {\n if (type === 'consigneeCountry') {\n this.setState({\n consigneeState: '',\n consigneeCity: ''\n })\n const selectedPickupPointCountry = e.value;\n\n if (selectedPickupPointCountry !== 'select one...') {\n this.setState({\n consigneeCountry: selectedPickupPointCountry,\n updated: true\n }, () => {\n this.fetchStates()\n });\n } else {\n this.setState({\n consigneeCountry: '',\n updated: true\n });\n }\n }\n else if (type === 'consigneeState') {\n this.setState({\n consigneeCity: ''\n })\n const selectedPickupPointState = e.value;\n\n if (selectedPickupPointState !== 'select one...') {\n this.setState({\n consigneeState: selectedPickupPointState,\n updated: true\n }, this.fetchCities);\n } else {\n this.setState({\n consigneeState: '',\n updated: true\n });\n }\n }\n else {\n const selectedPickupPointCity = e.value;\n\n if (selectedPickupPointCity !== 'select one...') {\n this.setState({\n consigneeCity: selectedPickupPointCity,\n updated: true\n });\n } else {\n this.setState({\n consigneeCity: '',\n updated: true\n });\n }\n }\n }\n\n handleOnChange(e) {\n this.props.clearConsigneeErrors();\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleSubmit = () => {\n this.props.clearConsigneeErrors();\n const validatorList = [\n { fieldName: 'consigneeName', optional: false, type: 'text' },\n { fieldName: 'consigneeAddress', optional: false, type: 'text' },\n { fieldName: 'consigneeCountry', optional: false, type: 'text' },\n { fieldName: 'consigneeState', optional: false, type: 'text' },\n { fieldName: 'consigneeCity', optional: false, type: 'text' },\n { fieldName: 'consigneePostal', optional: false, type: 'text' },\n { fieldName: 'consigneeEmail', optional: false, type: 'email' },\n { fieldName: 'consigneeNumber', optional: false, type: 'number' },\n ];\n const canSubmit = validate(validatorList, this.state, true);\n\n if (canSubmit) {\n let data = {\n 'name': this.state.consigneeName,\n 'contact_name': this.state.consigneeName,\n 'contact_number': this.state.consigneeNumber,\n 'contact_phone': this.state.consigneeNumber,\n 'contact_email': this.state.consigneeEmail,\n 'address': this.state.consigneeAddress,\n 'country': this.state.consigneeCountry,\n 'state': this.state.consigneeState,\n 'city': this.state.consigneeCity,\n 'postal': this.state.consigneePostal,\n };\n this.props.addConsigneeAddress(data);\n }\n }\n\n render() {\n const isDisabled = !(\n this.state.consigneeName &&\n this.state.consigneeAddress &&\n this.state.consigneeNumber &&\n this.state.consigneeCountry &&\n this.state.consigneeState &&\n this.state.consigneeCity &&\n this.state.consigneePostal &&\n this.state.consigneeEmail)\n\n let error, errorData\n let formDiv;\n\n error = this.props.error\n errorData = this.props.errorData\n formDiv = (\n \n
\n this.handleDropdownChange(e, 'consigneeCountry')} renderItems={this.renderCountries()} />\n this.handleDropdownChange(e, 'consigneeState')} renderItems={this.renderStates()} />\n this.handleDropdownChange(e, 'consigneeCity')} renderItems={this.renderCities()} />\n \n {this.props.message}\n
\n :\n null\n }\n\n {\n errorData ?\n \n
\n {JSON.stringify(errorData)}\n
\n \n
\n
\n this.handleDropdownChange(e, 'pickupPointCountry')} renderItems={this.renderCountries()} />\n this.handleDropdownChange(e, 'pickupPointState')} renderItems={this.renderStates()} />\n this.handleDropdownChange(e, 'pickupPointCity')} renderItems={this.renderCities()} />\n {/* \n { this.props.message }\n
\n :\n null\n }\n\n {\n errorData ?\n \n
\n { JSON.stringify(errorData) }\n
\n \n \n
\n
\n this.handleDropdownChange(e, 'pickupPointCountry')} renderItems={this.renderCountries()} />\n this.handleDropdownChange(e, 'pickupPointState')} renderItems={this.renderStates()} />\n this.handleDropdownChange(e, 'pickupPointCity')} renderItems={this.renderCities()} />\n {/* \n {\n this.setState({setAsDefault: e.target.checked})\n }}>\n \n
\n\n {\n error === false ?\n \n { this.props.message || this.props.messageReturn }\n
\n :\n null\n }\n\n {\n errorData ?\n \n
\n { JSON.stringify(errorData) }\n
\n \n \n
\n {renderDiv}\n
\n )\n }\n}\n\nfunction mapStateToProps({ pickupPoint, order, returnPoint }) {\n return ({\n error: pickupPoint.error,\n errorData: pickupPoint.errorData,\n errorReturn: returnPoint.error,\n errorDataReturn: returnPoint.errorData,\n\n pickupPoint: pickupPoint.pickupPoint,\n returnPoint: returnPoint.returnPoint,\n\n countries: order.countries,\n message: pickupPoint.message,\n messageReturn: returnPoint.message,\n status: pickupPoint.status\n });\n}\n\nexport default compose(\n connect(mapStateToProps, {\n fetchAllCountries,\n fetchPickupPointById,\n editPickupPoint,\n deletePickupPoint,\n clearPickupPointErrors\n }),\n withStyles(styles),\n withTranslation('common')\n)(EditPickupPoint);\n","import axios from 'axios';\nimport {\n FETCH_POSTAL_SEARCH,\n CLEAR_SEARCH_POSTAL_CODE_ERRORS\n} from './types';\nimport { ROOT_URL } from './index';\n\naxios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\nconst defaultToken = localStorage.getItem('token');\nif (defaultToken) {\n axios.defaults.headers.common['Authorization'] = 'Token ' + defaultToken;\n}\n\nexport function fetchPostalSearch(secretKey, postalCode, country) {\n console.log('fetching postal search...');\n const token = localStorage.getItem('token');\n\n return function(dispatch) {\n axios.post(`${ROOT_URL}/data/postal-search/`,\n {\n secret_key: secretKey,\n postal_code: postalCode,\n country: country\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token }}\n )\n .then((response) => {\n console.log(response);\n dispatch({\n type: FETCH_POSTAL_SEARCH,\n payload: response.data\n });\n })\n .catch((error) => {\n console.log(error);\n dispatch({\n type: FETCH_POSTAL_SEARCH,\n errorData: error.data\n });\n });\n }\n}\n\nexport function clearSearchPostalCodeErrors() {\n console.log('clearing search postal code errors...');\n return {\n type: CLEAR_SEARCH_POSTAL_CODE_ERRORS\n }\n}\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport moment from 'moment';\nimport _ from 'lodash';\nimport compose from 'recompose/compose';\n// import Popover from '@material-ui/core/Popover';\nimport { withStyles } from '@material-ui/core/styles';\nimport { withTranslation, Trans } from 'react-i18next';\n\nimport { fetchShipperDetails } from '../../actions/shipperDetailsActions';\nimport {\n fetchAllCountries\n} from '../../actions/orderActions';\nimport {\n fetchPostalSearch,\n clearSearchPostalCodeErrors\n} from '../../actions/searchPostalCodeActions';\n\nimport DropdownField from '../common/DropdownField';\n\nconst styles = (theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing.unit,\n },\n});\n\nclass SearchPostalCode extends Component {\n constructor() {\n super();\n this.state = {\n error: true,\n anchorEl: null,\n\n secretKey: '',\n country: '',\n postalCode: '',\n lastUpdated: moment(),\n loading: false,\n postalSearch: []\n };\n }\n\n componentDidMount() {\n this.props.fetchShipperDetails();\n if (this.props.countries === undefined) {\n this.props.fetchAllCountries();\n }\n }\n\n componentDidUpdate() {\n if (this.props.error !== this.state.error) {\n this.setState({\n error: this.props.error\n });\n }\n\n if (this.props.postalSearch !== this.state.postalSearch) {\n this.setState({\n postalSearch: this.props.postalSearch\n });\n }\n\n if (this.props.lastUpdated && this.state.lastUpdated) {\n if ((this.props.lastUpdated.valueOf() > this.state.lastUpdated.valueOf()) && this.state.loading) {\n this.setState({\n loading: false\n });\n }\n }\n\n if (this.props.lastUpdated > this.state.lastUpdated) {\n this.setState({\n lastUpdated: this.props.lastUpdated\n });\n }\n\n if (this.props.shipperDetails !== undefined && this.state.secretKey.length === 0) {\n this.setState({\n secretKey: this.props.shipperDetails.agent_application_secret_key\n });\n }\n }\n\n componentWillUnmount() {\n this.props.clearSearchPostalCodeErrors();\n }\n\n renderCountry = () => {\n let options = [{\n value: '',\n label: 'All Countries'\n }];\n\n _.forEach(this.props.countries, (item, i) => {\n let data = {\n value: item,\n label: item\n }\n options.push(data);\n });\n\n return options;\n }\n\n handlePopoverOpen = (e) => {\n this.setState({\n anchorEl: e.currentTarget\n });\n };\n\n handlePopoverClose = () => {\n this.setState({\n anchorEl: null\n });\n };\n\n handleDropdownChange = (e, type) => {\n this.props.clearSearchPostalCodeErrors();\n\n if (type === 'country') {\n const country = e.value;\n if (country !== undefined) {\n this.setState({\n country: country\n });\n } else {\n this.setState({\n country: ''\n });\n }\n }\n\n this.setState({ [type]: e.value });\n }\n\n handleOnChange(e) {\n this.props.clearSearchPostalCodeErrors();\n\n const { name, value } = e.target;\n this.setState({ [name]: value });\n }\n\n handleKeyUp(e) {\n if (e.keyCode === 13 || e.which === 13) {\n this.handleSubmit();\n }\n }\n\n handleSubmit = () => {\n this.props.clearSearchPostalCodeErrors();\n this.setState({\n loading: true\n });\n\n if (this.state.secretKey.length > 0 && this.state.postalCode && this.state.country) {\n this.props.fetchPostalSearch(this.state.secretKey, this.state.postalCode, this.state.country);\n }\n }\n\n renderPostalCodeList = () => {\n let postalCodeList = null;\n\n if (!_.isEmpty(this.state.postalSearch)) {\n let results = [];\n _.map(this.state.postalSearch, (item, i) => {\n const postalCode = item.postal_code;\n const country = item.country;\n const state = item.state;\n const city = item.city;\n const province = item.province;\n results.push(\n {`Postal code: ${postalCode}`} {`Country: ${country}`} {`State: ${state}`} {`City: ${city}`} {`Province: ${province}`}
\n );\n });\n\n postalCodeList = \n
\n
;\n }\n\n return postalCodeList;\n }\n\n render() {\n // const { classes } = this.props;\n // const { anchorEl } = this.state;\n // const open = Boolean(anchorEl);\n\n return (\n \n
\n
\n
\n
\n \n
\n */}\n \n
this.handleDropdownChange(e, 'country')} renderItems={this.renderCountry()} />\n \n\n
\n
\n \n
\n */}\n \n
\n
\n
\n\n {\n this.state.loading ?\n
\n :\n null\n }\n\n {\n this.state.secretKey.length > 0 && this.state.postalCode && this.state.country && !this.state.loading ?\n
\n \n
\n :\n
\n \n
\n }\n
\n\n {this.renderPostalCodeList()}\n
\n
Loading...
\n }\n return (\n \n {tncDocumentData.introduction &&\n
{tncDocumentData.introduction}
\n }\n\n {!!tncDocumentData.documents.length &&\n
\n
\n {tncDocumentData.documents.map(document => {\n return (\n \n \n \n \n )\n })}\n
\n \n \n \n
Terms of Service}\n visible={this.props.isTermsModalOpen}\n // visible={true}\n onOk={this.handleOk}\n onCancel={this.handleCancel}\n footer={[\n \n
\n I agree to the above Terms of Service\n \n \n You have to click agree in order to proceed\n
\n \n {this.props.isSubmitting ? 'Submitting...':'Submit'}\n \n \n {/*
*/}\n \n
\n {this.state.countByStatus[status] || 0}\n \n {capitalizeUnderscore(status)} \n \n {/* */}\n
\n {/*
\n
\n
\n
\n
\n
this.handleDropdownChange(e, 'pickupCountry')} renderItems={this.renderCountries()} />\n
\n this.handleDropdownChange(e, 'consigneeCountry')} renderItems={this.renderCountries()} />\n \n\n
\n
\n {this.renderStatBox()}\n
\n
\n
\n
\n
*/}\n\n
\n
\n {/*
*/}\n
{this.props.t('stats.orders')}
\n
\n
\n
\n {this.props.t('stats.manageOrders')}
\n \n
\n {this.props.t('common:stats.submitSingleOrder')}
\n \n
\n {this.props.t('common:stats.submitBulkOrders')}
\n \n
\n
\n\n
\n
\n
\n {/*
\n
\n */}\n
\n
\n \n \n {!isAgentApp(['iexpress'], this.props.agentAppDetails) &&\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
\n {/*
\n
\n
\n
\n
\n
this.handleDropdownChange(e, 'pickupCountry')} renderItems={this.renderCountries()} />\n
\n this.handleDropdownChange(e, 'consigneeCountry')} renderItems={this.renderCountries()} />\n \n\n
\n
\n {this.renderStatBox()}\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
\n {/*
\n
\n
\n
\n
\n
this.handleDropdownChange(e, 'pickupCountry')} renderItems={this.renderCountries()} />\n
\n this.handleDropdownChange(e, 'consigneeCountry')} renderItems={this.renderCountries()} />\n \n\n
\n
\n {this.renderStatBox()}\n
\n
\n
\n
\n
*/}\n\n
\n\n
\n
\n
\n
\n
}\n type=\"info\"\n />\n
\n {this.renderBoxes()}\n\n
\n
\n
\n \n You may now see the entire shipping timeline of orders in our merchant dashboard.\n Simply head over to
\n \n {/*
\n )\n }\n}\n\nfunction mapState({ terms }) {\n return {\n tncDocumentData: terms.data\n }\n}\n\nexport default connect(mapState, {\n fetchShipperDetails\n})(Terms)\n","import {\n FETCH_ORDER_DEFAULT_VALUES,\n FETCH_ORDER_DEFAULT_VALUES_SUCCESS,\n FETCH_ORDER_DEFAULT_VALUES_ERROR,\n ORDER_DEFAULT_VALUES_ADD,\n ORDER_DEFAULT_VALUES_ADD_ERROR,\n ORDER_DEFAULT_VALUES_CLEAR,\n ORDER_DEFAULT_VALUES_DELETE,\n ORDER_DEFAULT_VALUES_UPDATE\n} from '../actions/types'\n\nconst initialState = {\n isLoading: false,\n isError: false,\n error: null,\n fetched: false,\n addError: null,\n data: []\n}\n\nexport default (state=initialState, action) => {\n let oldData\n let clonedData\n \n switch(action.type) {\n case FETCH_ORDER_DEFAULT_VALUES:\n return {...state, isLoading: true}\n case FETCH_ORDER_DEFAULT_VALUES_SUCCESS:\n return {...state, isLoading: false, isError: false, error: null, data: action.payload, fetched: true}\n case FETCH_ORDER_DEFAULT_VALUES_ERROR:\n return {...state, isLoading: false, error: action.error, isError: true, fetched: true}\n case ORDER_DEFAULT_VALUES_ADD:\n oldData = [...state.data]\n let updatedData = oldData.push(action.payload)\n return {...state, data: updatedData, addSuccess: true, addError: null}\n case ORDER_DEFAULT_VALUES_ADD_ERROR:\n return {...state, addError: action.payload, addSuccess: false}\n case ORDER_DEFAULT_VALUES_CLEAR:\n return {...state, addError: null, addSuccess: false}\n case ORDER_DEFAULT_VALUES_DELETE:\n let afterDelete = [...state.data].filter(o => o.id !== action.payload)\n return {...state, data: afterDelete}\n case ORDER_DEFAULT_VALUES_UPDATE:\n clonedData = [...state.data]\n const newData = action.payload\n const index = clonedData.findIndex(d => d.id === newData.id)\n clonedData[index] = newData\n return {...state, data: clonedData, addSuccess: true, addError: null}\n default:\n return state\n }\n}\n","import axios from \"axios\";\nimport { ROOT_URL } from \"../../actions/index\";\n\nexport function getDraftOrders(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/draft-orders/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function applySyncRule(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/api/channel/draft-order-rules/sync_all_rules?secret_key=${secretKey}`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getDraftOrderDetail(secretKey, { orderId }) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/draft-orders/${orderId}/`,\n {\n params: { secret_key: secretKey },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function validateDraftOrder(secretKey, { orderId, params }) {\n const token = localStorage.getItem(\"token\");\n\n return axios.post(\n `${ROOT_URL}/channel/draft-orders/${orderId}/validate/`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function createShipment(secretKey, { orderId, params }) {\n const token = localStorage.getItem(\"token\");\n\n return axios.post(\n `${ROOT_URL}/channel/draft-orders/${orderId}/create_order/`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function deleteDraftOrders(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.post(\n `${ROOT_URL}/channel/draft-orders/delete-selected/`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function createShipments(secretKey, { params }) {\n const token = localStorage.getItem(\"token\");\n\n return axios.post(\n `${ROOT_URL}/channel/draft-orders/create-shipments/`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getChannels(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/channels/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getFilterData(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/data/filters/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getLaneConfigs(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/lane-configs/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function createLaneConfigs(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.post(\n `${ROOT_URL}/channel/lane-configs/`,\n { secret_key: secretKey, ...params },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getLaneConfigDetail(secretKey, id, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/lane-configs/${id}/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function updateLaneConfig(secretKey, id, params) {\n const token = localStorage.getItem(\"token\");\n return axios.put(\n `${ROOT_URL}/channel/lane-configs/${id}/`,\n { secret_key: secretKey, ...params },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getShipmentRules(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/draft-order-rules/`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function getShipmentRuleById(secretKey, id, params) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `${ROOT_URL}/channel/draft-order-rules/${id}`,\n {\n params: { secret_key: secretKey, ...params },\n },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function createShipmentRules(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.post(\n `${ROOT_URL}/channel/draft-order-rules/?secret_key=${secretKey}`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function updateShipmentRules(secretKey, id, params) {\n const token = localStorage.getItem(\"token\");\n return axios.put(\n `${ROOT_URL}/channel/draft-order-rules/${id}/?secret_key=${secretKey}`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function updateShipmentRulesOrder(secretKey, idTop, idBottom, params) {\n const token = localStorage.getItem(\"token\");\n return axios.put(\n `${ROOT_URL}/channel/draft-order-rules/${idTop}/swap-sequence/${idBottom}/?secret_key=${secretKey}`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function deleteShipmentRules(secretKey, id) {\n const token = localStorage.getItem(\"token\");\n return axios.delete(\n `${ROOT_URL}/channel/draft-order-rules/${id}/?secret_key=${secretKey}`,\n {},\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function checkRuleConflict(secretKey, params) {\n const token = localStorage.getItem(\"token\");\n return axios.post(\n `${ROOT_URL}/channel/draft-order-rules/check_rule_conflict/?secret_key=${secretKey}`,\n { ...params, secret_key: secretKey },\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function fetchShopeeAuthUrl() {\n const token = localStorage.getItem(\"token\");\n return axios.get(\"/api/channel/shopee/auth/\", {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n });\n}\n\nexport function onboardShopee(code, shop_id, shop_name, shop_country) {\n const token = localStorage.getItem(\"token\");\n return axios.get(\n `/api/channel/shopee/onboard/?code=${code}&shop_id=${shop_id}&shop_name=${shop_name}&shop_country=${shop_country}`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n\nexport function fetchLazadaAuthUrl() {\n const token = localStorage.getItem(\"token\");\n return axios.get(\"/api/channel/lazada/auth/\", {\n Headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n });\n}\n\nexport function onboardLazada(code, shop_id, shop_name, shop_country) {\n const token = localStorage.getItem(\"token\");\n return axios.post(\n `/api/channel/lazada/onboard/`,\n {\n code,\n shop_id,\n shop_name,\n shop_country,\n },\n {\n Headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Token \" + token,\n },\n }\n );\n}\n","import { createSlice } from '@reduxjs/toolkit';\nimport * as api from './api';\nimport _ from 'lodash';\n\nconst initialState = {\n entries: {\n data: [],\n pagination: {\n totalCount: 0,\n next: null,\n prev: null,\n },\n loading: false\n },\n detail: {\n data: {},\n loading: true,\n },\n isValidating: false,\n validationErrors: null,\n createShipments: {\n isLoading: false,\n result: {\n hasResult: false,\n successCount: 0,\n failedCount: 0,\n }\n },\n showSyncModal: true\n};\n\nconst slice = createSlice({\n name: 'draft-orders',\n initialState: initialState,\n reducers: {\n resetDraftOrderFieldError: (state, action) => {\n delete state.detail.data.validation_result.errors[action.payload];\n },\n resetDraftOrderItemsFieldError: (state, action) => {\n delete state.detail.data.validation_result.errors['items'][action.payload['index']][action.payload['fieldName']];\n },\n fetchDraftOrders: (state, action) => {\n state.entries.loading = true;\n },\n setEntries: (state, action) => {\n state.entries.loading = false;\n state.entries.data = action.payload.entries;\n state.entries.pagination.totalCount = action.payload.totalCount;\n },\n fetchDetailOrder: (state, action) => {\n state.detail.loading = true;\n },\n setDetailOrder: (state, action) => {\n state.detail.loading = false;\n state.detail.data = action.payload.data;\n },\n startOrderValidation: (state, action) => {\n state.isValidating = true;\n },\n stopOrderValidation: (state, action) => {\n state.isValidating = false;\n },\n setValidationError: (state, action) => {\n state.isValidating = false;\n state.validationErrors = action.payload\n },\n resetCreateShipments: (state, action) => {\n state.createShipments = initialState.createShipments\n },\n startCreateShipments: (state, action) => {\n state.createShipments.isLoading = true\n state.createShipments.result.hasResult = false\n },\n stopCreateShipments: (state, action) => {\n state.createShipments.isLoading = false\n state.createShipments.result.hasResult = true\n state.createShipments.result.successCount = action.payload.successCount\n state.createShipments.result.failedCount = action.payload.failedCount\n },\n }\n});\n\nexport const getDraftOrderDetail = (secretKey, {orderId}) => async (dispatch) => {\n dispatch(slice.actions.fetchDetailOrder());\n\n api.getDraftOrderDetail(secretKey, {orderId})\n .then(({data: draftOrder}) => {\n dispatch(slice.actions.setDetailOrder({\n data: draftOrder\n }));\n });\n}\n\nexport const getDraftOrders = (secretKey, params) => async (dispatch) => {\n dispatch(slice.actions.fetchDraftOrders());\n\n api.getDraftOrders(secretKey, params)\n .then(({data: {results, count, next, previous}}) => {\n dispatch(slice.actions.setEntries({\n entries: results,\n totalCount: count\n }));\n });\n};\n\nexport const deleteDraftOrders = (secretKey, params, callback) => async (dispatch) => {\n api.deleteDraftOrders(secretKey, params)\n .then(() => {\n callback();\n });\n};\n\nexport const applySyncRule = (secretKey, params) => async(dispatch)=>{\n api.applySyncRule(secretKey, params)\n .then((data) => {\n console.log('draft orders rule synced')\n });\n}\n\nexport const validateOrder = (secretKey, {orderId, params, callback}) => async (dispatch) => {\n dispatch(slice.actions.startOrderValidation());\n\n api.validateDraftOrder(secretKey, {orderId, params})\n .then(({data: draftOrder}) => {\n dispatch(slice.actions.stopOrderValidation());\n dispatch(slice.actions.setDetailOrder({\n data: draftOrder\n }));\n\n if(callback){\n callback(draftOrder);\n }\n\n })\n .catch((error) => {\n if(error.data){\n dispatch(slice.actions.setValidationError(error.data))\n }\n });\n};\n\nexport const createShipment = (secretKey, {orderId, params}) => async (dispatch) => {\n dispatch(slice.actions.startCreateShipments());\n\n api.createShipment(secretKey, {orderId, params})\n .then(({data: draftOrder}) => {\n dispatch(slice.actions.stopOrderValidation());\n dispatch(slice.actions.setDetailOrder({\n data: draftOrder\n }));\n });\n};\n\nexport const createShipments = (secretKey, {params, callback}) => async (dispatch) => {\n dispatch(slice.actions.startCreateShipments());\n\n api.createShipments(secretKey, {params})\n .then(({data}) => {\n dispatch(slice.actions.stopCreateShipments({successCount: data.success_count, failedCount: data.failed_count}));\n if(callback){\n callback();\n }\n });\n\n}\n\nexport const resetCreateShipments = () => (dispatch) => {\n dispatch(slice.actions.resetCreateShipments())\n}\n\nexport const resetDraftOrderErrors = (fieldName) => async (dispatch) => {\n dispatch(slice.actions.resetDraftOrderFieldError(fieldName));\n};\n\nexport const resetDraftOrderItemsErrors = (fieldName, orderDetails) => async (dispatch) => {\n orderDetails.validation_result.errors['items'].forEach((item_errors, index) => {\n for(const field in item_errors){\n if(field===fieldName){\n if(!_.isEmpty(orderDetails.validation_result.errors['items'][index][fieldName])){\n let fieldData = {'fieldName': fieldName, 'index': index};\n dispatch(slice.actions.resetDraftOrderItemsFieldError(fieldData));\n }\n }\n }\n })\n};\n\nexport default slice.reducer;\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport * as api from \"./api\";\n\nconst initialState = {\n entries: {\n data: [],\n loading: false,\n loaded: false,\n },\n filterData: {\n data: null,\n loading: false,\n loaded: false,\n },\n shopeeAuth: {\n url: null,\n loading: false,\n loaded: false,\n },\n shopeeOnboard: {\n loading: false,\n loaded: false,\n validationErrors: null,\n },\n lazadaAuth: {\n url: null,\n loading: false,\n loaded: false,\n },\n lazadaOnboard: {\n loading: false,\n loaded: false,\n validationErrors: null,\n },\n};\n\nconst slice = createSlice({\n name: \"channels\",\n initialState: initialState,\n reducers: {\n fetchChannels: (state) => {\n state.entries.loaded = false;\n state.entries.loading = true;\n },\n setEntries: (state, action) => {\n state.entries.loaded = true;\n state.entries.loading = false;\n state.entries.data = action.payload.entries;\n },\n fetchFilterData: (state) => {\n state.filterData.loaded = false;\n state.filterData.loading = true;\n },\n setFilterData: (state, action) => {\n state.filterData.loaded = true;\n state.filterData.loading = false;\n state.filterData.data = action.payload.entries;\n },\n fetchShopeeAuthUrl: (state) => {\n state.shopeeAuth.loaded = false;\n state.shopeeAuth.loading = true;\n },\n setShopeeAuthurlData: (state, action) => {\n console.log(action);\n state.shopeeAuth.loaded = true;\n state.shopeeAuth.loading = false;\n state.shopeeAuth.url = action.payload.redirectUrlShopee;\n },\n onboardShopee: (state, action) => {\n state.shopeeOnboard.loaded = false;\n state.shopeeOnboard.loading = true;\n },\n setOnboardShopeeData: (state, action) => {\n state.shopeeOnboard.loaded = true;\n state.shopeeOnboard.loading = false;\n },\n setValidationErrorsForShopee: (state, action) => {\n state.shopeeOnboard.loading = false;\n state.shopeeOnboard.validationErrors = action.payload;\n },\n fetchLazadaAuthUrl: (state) => {\n state.lazadaAuth.loaded = false;\n state.lazadaAuth.loading = true;\n },\n setLazadaAuthUrlData: (state, action) => {\n state.lazadaAuth.loaded = true;\n state.lazadaAuth.loading = false;\n state.lazadaAuth.url = action.payload.redirectUrlLazada;\n },\n onboardLazada: (state, action) => {\n state.lazadaOnboard.loaded = false;\n state.lazadaOnboard.loading = true;\n },\n setOnboardLazadaData: (state, action) => {\n state.lazadaOnboard.loaded = true;\n state.lazadaOnboard.loading = false;\n },\n setValidationErrorsForLazada: (state, action) => {\n state.lazadaOnboard.loading = false;\n state.lazadaOnboard.validationErrors = action.payload;\n },\n },\n});\n\nexport const getChannels = (secretKey, params) => async (dispatch) => {\n dispatch(slice.actions.fetchChannels());\n\n api.getChannels(secretKey, params).then(({ data: { results, count, next, previous } }) => {\n dispatch(\n slice.actions.setEntries({\n entries: results,\n totalCount: count,\n })\n );\n });\n};\n\nexport const getFilterData = (secretKey, params) => async (dispatch) => {\n dispatch(slice.actions.fetchFilterData());\n\n api.getFilterData(secretKey, params).then((response) => {\n dispatch(\n slice.actions.setFilterData({\n entries: response.data,\n })\n );\n });\n};\n\nexport const handleShopeeAuth = () => async (dispatch) => {\n dispatch(slice.actions.fetchShopeeAuthUrl());\n\n api.fetchShopeeAuthUrl().then((response) => {\n console.log(response);\n dispatch(\n slice.actions.setShopeeAuthurlData({\n redirectUrlShopee: response.data.redirectUrlShopee,\n })\n );\n });\n};\n\nexport const handleShopeeOnboard = (code, shop_id, shop_name, shop_country) => async (dispatch) => {\n dispatch(slice.actions.onboardShopee());\n\n api\n .onboardShopee(code, shop_id, shop_name, shop_country)\n .then((response) => {\n dispatch(slice.actions.setOnboardShopeeData({}));\n })\n .catch((error) => {\n if (error.data) {\n dispatch(slice.actions.setValidationErrorsForShopee(error.data));\n }\n });\n};\n\nexport const handleLazadaAuth = () => async (dispatch) => {\n dispatch(slice.actions.fetchLazadaAuthUrl());\n const res = await api.fetchLazadaAuthUrl();\n dispatch(\n slice.actions.setLazadaAuthUrlData({\n redirectUrlLazada: res.data.redirectUrlLazada,\n })\n );\n};\n\nexport const handleLazadaOnboard = (code, shop_id, shop_name, shop_country) => async (dispatch) => {\n dispatch(slice.actions.onboardLazada());\n try {\n // const res = await api.onboardLazada(code, shop_id, shop_name, shop_country);\n dispatch(slice.actions.setOnboardLazadaData({}));\n } catch (err) {\n if (err.data) {\n dispatch(slice.actions.setValidationErrorsForLazada(err.data));\n }\n }\n};\n\nexport default slice.reducer;\n","import { createSlice } from '@reduxjs/toolkit';\nimport * as api from '../../draftOrder/api';\n\n\nconst initialState = {\n entries: {\n data: [],\n loading: false,\n loaded: false\n },\n createLaneConfig: {\n loading: false,\n error: null,\n result: null,\n },\n editLaneConfig: {\n loading: false,\n updating: false,\n error: null,\n result: null,\n laneConfig: null\n }\n};\n\nconst slice = createSlice({\n name: 'lane_configs',\n initialState: initialState,\n reducers: {\n fetchConfigs: (state, action) => {\n state.entries.loaded = false;\n state.entries.loading = true;\n },\n setEntries: (state, action) => {\n state.entries.loaded = true;\n state.entries.loading = false;\n state.entries.data = action.payload.entries;\n },\n startCreate: (state) => {\n state.createLaneConfig.loading = true;\n },\n stopCreate: (state) => {\n state.createLaneConfig.loading = false;\n },\n setCreateResult: (state, action) => {\n state.createLaneConfig.result = action.payload\n state.createLaneConfig.error = null\n },\n setCreateError: (state, action) => {\n state.createLaneConfig.result = null\n state.createLaneConfig.error = action.payload\n },\n fetchConfigDetail: (state) => {\n state.editLaneConfig.loading = true\n },\n setConfigDetail: (state, action) => {\n state.editLaneConfig.loading = false\n state.editLaneConfig.laneConfig = action.payload\n },\n startConfigUpdate: (state) => {\n state.editLaneConfig.updating = true\n },\n setConfigUpdateResult: (state, action) => {\n state.editLaneConfig.updating = false\n state.editLaneConfig.result = action.payload\n state.editLaneConfig.error = null\n },\n setConfigUpdateError: (state, action) => {\n state.editLaneConfig.updating = false\n state.editLaneConfig.error = action.payload\n state.editLaneConfig.result = null\n },\n }\n});\n\n\nexport const fetchLaneConfigs = (secretKey) => async (dispatch) => {\n dispatch(slice.actions.fetchConfigs());\n\n api.getLaneConfigs(secretKey, {})\n .then(({data: {results, count, next, previous}}) => {\n dispatch(slice.actions.setEntries({\n entries: results,\n totalCount: count\n }));\n });\n};\n\nexport const createNewLaneConfig = (secretKey, params) => async (dispatch) => {\n dispatch(slice.actions.startCreate())\n\n api.createLaneConfigs(secretKey, params)\n .then(({data: result}) => {\n dispatch(slice.actions.stopCreate())\n dispatch(slice.actions.setCreateResult(result))\n }).catch( e => {\n dispatch(slice.actions.stopCreate())\n dispatch(slice.actions.setCreateError(e.data))\n })\n}\n\nexport const fetchLaneConfigDetail = (secretKey, laneConfigId) => async (dispatch) => {\n dispatch(slice.actions.fetchConfigDetail());\n\n api.getLaneConfigDetail(secretKey, laneConfigId, {})\n .then(({data: result}) => {\n dispatch(slice.actions.setConfigDetail(result))\n });\n};\n\nexport const updateLaneConfig = (secretKey, laneConfigId, params) => async (dispatch) => {\n dispatch(slice.actions.startConfigUpdate())\n\n api.updateLaneConfig(secretKey, laneConfigId, params)\n .then(({data: result}) => {\n dispatch(slice.actions.setConfigUpdateResult(result))\n }).catch( e => {\n dispatch(slice.actions.setConfigUpdateError(e.data))\n })\n}\n\nexport default slice.reducer;\n","import { createSlice } from '@reduxjs/toolkit';\nimport * as api from '../../draftOrder/api';\nimport {notification} from 'antd'\n\nconst INITIAL_STATE = {\n \"dashboard\":{\n \"entries\":[\n\n ],\n \"itemCategoryDataList\" : [],\n \"serviceDataList\" : [],\n \"parcelDataList\" : [],\n \"loading\":false,\n \"isModalVisible\":false,\n \"isModalVisibleAlert\":false,\n \"multiSelectRecords\":[\n\n ]\n },\n \"itemCategoryForm\":{\n \"rule_name\":\"\",\n \"action_type\":\"ITEM_CATEGORY\",\n \"rule_source_fields\":[\n {\n \"source_field_name\":\"\",\n \"operator\":\"\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n }\n ],\n \"rule_target_fields\":[\n {\n \"target_name\":\"item_category\",\n \"target_value\":\"\"\n }\n ],\n \"itemCategorySourceFields\":{\n \"SKU (Stock Keeping Units)\":\"item_sku\",\n \"Item Title\":\"item_description\"\n },\n \"operators\":{\n \"item_sku\":{\n \"equals\":\"=\",\n \"contains\":\"in\"\n },\n \"item_description\":{\n \"equals\":\"=\",\n \"contains\":\"in\"\n }\n },\n \"apply_on_existing_order\":false,\n \"sourceFieldLabel\":{\n \"item_sku\":\"SKU (Stock Keeping Unit)\",\n \"item_description\":\"Item Name\"\n },\n \"addConditionFlag\":false,\n \"isUpdateFlag\":false\n },\n \"parcelDimensionForm\":{\n \"rule_name\":\"\",\n \"action_type\":\"DIMENSIONS\",\n \"rule_source_fields\":[\n {\n \"source_field_name\":\"\",\n \"operator\":\"\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n }\n ],\n \"rule_target_fields\":[\n {\n \"target_name\":\"draft_order.order_length\",\n \"target_value\":\"\"\n },\n {\n \"target_name\":\"draft_order.order_width\",\n \"target_value\":\"\"\n },{\n \"target_name\":\"draft_order.order_height\",\n \"target_value\":\"\"\n },\n {\n \"target_name\":\"draft_order.order_weight\",\n \"target_value\":\"\"\n }\n ],\n \"apply_on_existing_order\":false,\n \"itemCategorySourceFields\":{\n \"Item weight is\":\"draft_order.order_weight\",\n \"Item quantity is\":\"item_qty\"\n },\n \"operators\":{\n \"draft_order.order_weight\":{\n \"equals\":\"=\",\n \"less than\":\"<\",\n \"greater than\":\">\"\n },\n \"item_qty\":{\n \"equals\":\"=\",\n \"less than\":\"<\",\n \"greater than\":\">\"\n }\n },\n \"sourceFieldLabel\":{\n \"draft_order.order_weight\":\"Weight\",\n \"item_qty\":\"Quantity\"\n },\n \"addConditionFlag\":false,\n \"isUpdateFlag\":false\n },\n \"serviceTypeForm\":{\n \"rule_name\":\"\",\n \"action_type\":\"SERVICE_TYPE\",\n \"rule_source_fields\":[\n {\n \"source_field_name\":\"draft_order.pickup_country\",\n \"operator\":\"=\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n },\n {\n \"source_field_name\":\"draft_order.consignee_country\",\n \"operator\":\"=\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n }\n ],\n \"rule_target_fields\":[\n {\n \"target_name\":\"\",\n \"target_value\":\"\"\n }\n ],\n \"apply_on_existing_order\":false,\n \"addConditionFlag\":false,\n \"isUpdateFlag\":false,\n \"meta_data\":{\"serviceType\":\"\"},\n \"addressID\":\"\",\n \"targetFieldOptions\":[],\n \"conflictModalFlag\":false\n }\n }\n\n\nconst slice = createSlice({\n name: 'shipment_rule',\n initialState: INITIAL_STATE,\n reducers: {\n preFetchDashboard: (state, action) => {\n state.dashboard.loading = true\n },\n setEntries: (state, action) =>{\n state.dashboard.entries = action.payload.entries;\n state.dashboard.loading = false;\n },\n setitemCategoryEntries: (state, action) =>{\n state.dashboard.itemCategoryDataList = action.payload;\n state.dashboard.loading = false;\n },\n serviceDataEntries: (state, action) =>{\n state.dashboard.serviceDataList = action.payload;\n state.dashboard.loading = false;\n },\n parcelDataEntries: (state, action) =>{\n state.dashboard.parcelDataList = action.payload;\n state.dashboard.loading = false;\n },\n toggleModal:(state, action) =>{\n state.dashboard.isModalVisible = state.dashboard.isModalVisible?false:true\n },\n toggleModalAlert:(state, action) =>{\n state.dashboard.isModalVisibleAlert = state.dashboard.isModalVisibleAlert?false:true\n },\n addFormCondition:(state, action)=>{\n let [formType, condition] = action.payload\n state[formType].rule_source_fields.push(condition)\n },\n handleSave: (state, action)=>{\n let [formType, value] = action.payload\n state[formType].rule_source_fields[value].is_saved = true\n },\n handleDelete: (state, action)=>{\n let [formType, itemIndex] = action.payload\n let value = state[formType].rule_source_fields.filter((item, index)=>{return index!==itemIndex?item:false})\n if (value.length === 0)\n state[formType].rule_source_fields = [{\n \"source_field_name\":\"\",\n \"operator\":\"\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n }]\n else\n state[formType].rule_source_fields = value\n\n },\n handleSourceInput: (state, action)=>{\n const [formType, value, field, index] = action.payload\n state[formType].rule_source_fields[index][field] = value\n },\n handleTargetInput: (state, action)=>{\n const [formType, value, field, index] = action.payload\n state[formType].rule_target_fields[index][field] = value\n },\n handleInput: (state, action)=>{\n const [formType, value, field] = action.payload\n state[formType][field] = value\n },\n setFormData: (state, action)=>{\n let [formType, value] = action.payload\n state[formType][\"isUpdateFlag\"] = value\n },\n setFormEntry: (state, action)=>{\n let [formType, data] = action.payload\n state[formType].rule_name = data[\"rule_name\"]\n state[formType].rule_source_fields = data['rule_source_fields'].map((item)=>{item['is_saved']=true; return item})\n state[formType].rule_target_fields = data[\"rule_target_fields\"]\n state[formType][\"id\"] = data[\"id\"]\n state[formType]['meta_data'] = data[\"meta_data\"]\n state[formType]['addressID'] = data?.addressID\n },\n preStatusUpdateEntries:(state, action)=>{\n state.dashboard.entries = state.dashboard.entries.map((item)=>{ if(item.id === action.payload){item['is_active']=!item['is_active']} ;return item})\n },\n postStatusUpdateEntries: (state, action)=>{\n if (state.dashboard.entries.length>0){\n state.dashboard.entries = state.dashboard.entries.map((item)=>item.id === action.payload.id?action.payload:item)\n }\n },\n resetFormData: (state, action)=>{\n state[action.payload] = INITIAL_STATE[action.payload]\n },\n setMultiSelectRecord: (state, action)=>{\n state.dashboard.multiSelectRecords = action.payload\n },\n handleServiceTypeChoice: (state, action)=>{\n state.serviceTypeForm.meta_data.serviceType = action.payload\n },\n toggleConflictModal: (state, action)=>{\n state.serviceTypeForm.conflictModalFlag = !state.serviceTypeForm.conflictModalFlag\n }\n\n\n }\n});\n\nnotification.config({\n duration:2\n })\n\n const openNotificationWithIcon = (type, title, errorMessage) => {\n notification[type]({\n message: title,\n description:errorMessage\n\n });\n };\n\nexport const fetchShipmentRulesList = (secretKey) => async(dispatch)=>{\n dispatch(slice.actions.preFetchDashboard());\n api.getShipmentRules(secretKey, {})\n .then(({data: {results, count, next, previous}}) => {\n dispatch(slice.actions.setEntries({\n entries: results,\n totalCount: count\n }));\n });\n}\nexport const setitemCategoryDataList = (data) => async(dispatch)=>{\n dispatch(slice.actions.setitemCategoryEntries(data))\n}\nexport const setServiceDataList = (data) => async(dispatch)=>{\n dispatch(slice.actions.serviceDataEntries(data))\n}\nexport const setParcelDataList = (data) => async(dispatch)=>{\n dispatch(slice.actions.parcelDataEntries(data))\n}\n\nexport const performToggleModal = () => async(dispatch)=>{\n dispatch(slice.actions.toggleModal());\n}\nexport const performToggleModalAlert = (result) => async(dispatch)=>{\n dispatch(slice.actions.toggleModalAlert());\n}\n\nexport const addFormCondition = (formType)=>async(dispatch)=>{\n let payload = {\n \"source_field_name\":\"\",\n \"operator\":\"\",\n \"matches_to_value\":\"\",\n \"is_saved\":false\n }\n dispatch(slice.actions.addFormCondition([formType, payload]))\n}\n\nexport const handleSave = (formType, index)=>async(dispatch)=>{\n dispatch(slice.actions.handleSave([formType, index]))\n}\n\nexport const handleDelete = (formType, index)=>async(dispatch)=>{\n dispatch(slice.actions.handleDelete([formType, index]))\n}\n\nexport const handleSourceInput = (formType, value, field, index)=>async(dispatch)=>{\n dispatch(slice.actions.handleSourceInput([formType, value, field, index]))\n}\n\nexport const handleTargetInput = (formType, value, field, index)=>async(dispatch)=>{\n dispatch(slice.actions.handleTargetInput([formType, value, field, index]))\n}\n\nexport const handleInput = (formType, value, field)=>async(dispatch)=>{\n dispatch(slice.actions.handleInput([formType, value, field]))\n}\nexport const submitServiceTypeForm = (secretKey, params)=>async(dispatch)=>{\n api.createShipmentRules(secretKey, params)\n .then((data) => {\n openNotificationWithIcon('success', 'Success', 'Rule created successfully')\n window.open(\"/shipment-rules\",\"_self\");\n }).catch(error=>{\n if(error?.data?.includes('IntegrityError')){\n openNotificationWithIcon('error', 'Error', 'Rule name already exists')\n }else{\n openNotificationWithIcon('error', 'Error', 'Server error')\n }\n });\n}\n\nexport const submitForm = (secretKey, params)=>async(dispatch)=>{\n let newParams = Object.assign({}, params)\n newParams.rule_target_fields = params.rule_target_fields.filter(\n (item) => (typeof item.target_value === 'object' && item.target_value !== null) ||\n (item.target_value !== null && item.target_value.length>0) ? item : null\n )\n\n api.createShipmentRules(secretKey, newParams)\n .then((data) => {\n openNotificationWithIcon('success', 'Success', 'Rule created successfully')\n window.open(\"/shipment-rules\",\"_self\");\n }).catch(error=>{\n if(error?.data?.includes('IntegrityError')){\n openNotificationWithIcon('error', 'Error', 'Rule name already exists')\n }else{\n openNotificationWithIcon('error', 'Error', 'Server error')\n }\n });\n}\n\nexport const setFormData = (secretKey, id)=>async(dispatch)=>{\n api.getShipmentRuleById(secretKey, id, {})\n .then((data) => {\n let formType = null\n if (data.data.action_type === \"DIMENSIONS\") {\n formType = \"parcelDimensionForm\"\n if (data.data.rule_target_fields.length === 3) {\n data.data.rule_target_fields.push({\n \"target_name\": \"draft_order.order_weight\",\n \"target_value\": \"\"\n })\n }\n }\n else if (data.data.action_type === \"ITEM_CATEGORY\") {\n formType = \"itemCategoryForm\"\n } else if (data.data.action_type === \"SERVICE_TYPE\") {\n formType = \"serviceTypeForm\"\n\n }\n dispatch(slice.actions.setFormEntry([formType, data[\"data\"]]))\n }).catch(err => console.log('error', err));\n}\n\nexport const setServiceTypeFormData = (secretKey, id, getDropoffOptions, serviceDefinitions, agentApplicationName, storeAdresses)=>async(dispatch)=>{\n api.getShipmentRuleById(secretKey, id, {})\n .then((data) => {\n data = Object.assign({}, data[\"data\"])\n data[\"addressID\"] = data.rule_target_fields[1].target_value\n dispatch(slice.actions.setFormEntry([\"serviceTypeForm\", data]))\n }).catch(err => console.log('error', err));\n}\n\nexport const updateFormStatus = (secretKey, id, params)=>async(dispatch)=>{\n dispatch(slice.actions.preStatusUpdateEntries(id))\n let newParams = Object.assign({}, params)\n newParams.rule_target_fields = params.rule_target_fields.filter((item)=>(typeof item.target_value === 'object' && item.target_value !== null) || (item.target_value !== null && item.target_value.length>0) ? item:null)\n api.updateShipmentRules(secretKey, id, newParams)\n .then((data) => {\n openNotificationWithIcon('success', 'Success', 'Rule status updated successfully')\n dispatch(slice.actions.postStatusUpdateEntries(params))\n }).catch(error=>{\n openNotificationWithIcon('error', 'Error', 'Server error')\n });\n}\n\nexport const updateForm = (secretKey, id, params)=>async(dispatch)=>{\n let newParams = Object.assign({}, params)\n newParams.rule_target_fields = params.rule_target_fields.filter(\n item => item.target_value.length > 0 || (typeof item.target_value === 'object' && item.target_value !== null ? item : null))\n api.updateShipmentRules(secretKey, id, newParams)\n .then((data) => {\n openNotificationWithIcon('success', 'Success', 'Rule updated successfully')\n window.open(\"/shipment-rules\",\"_self\");\n }).catch(error=>{\n if(error.data.includes('IntegrityError')){\n openNotificationWithIcon('error', 'Error', 'Rule name already exists')\n }else{\n openNotificationWithIcon('error', 'Error', 'Server error')\n }\n });\n}\n\nexport const updateShipmentRulesOrder = (secretKey, idTop,idBottom, params)=>async(dispatch)=>{\n // dispatch(slice.actions.preStatusUpdateEntries(id))\n let newParams = Object.assign({}, params)\n // newParams.rule_target_fields = params.rule_target_fields.filter((item)=>item.target_value.length>0?item:null)\n api.updateShipmentRulesOrder(secretKey, idTop,idBottom, newParams)\n .then((data) => {\n console.log('datasucess', data)\n openNotificationWithIcon('success', 'Success', 'Rules order changed successfully')\n window.open(\"/shipment-rules\",\"_self\");\n }).catch(error=>{\n console.log('errorerror', error)\n openNotificationWithIcon('error', 'Error', 'Server error')\n window.open(\"/shipment-rules\",\"_self\");\n });\n}\n\nexport const deleteFormData = (secretKey, id)=>async(dispatch)=>{\n api.deleteShipmentRules(secretKey, id)\n .then((data) => {\n openNotificationWithIcon('success', 'Success', 'Rule deleted successfully')\n window.open(\"/shipment-rules\",\"_self\");\n });\n}\n\nexport const resetFormData = (formType)=>async(dispatch)=>{\n dispatch(slice.actions.resetFormData([formType]))\n}\n\nexport const setMultiSelectRecord = (item)=>async(dispatch)=>{\n dispatch(slice.actions.setMultiSelectRecord(item))\n}\n\nexport const mulitDeleteRecords = (secretKey, items)=>async(dispatch)=>{\n for (const record in items){\n api.deleteShipmentRules(secretKey, items[record].id)\n .then((data) => {\n window.open(\"/shipment-rules\",\"_self\");\n });\n }\n\n}\n\nexport const handleServiceTypeChoice = (value)=>async(dispatch)=>{\n dispatch(slice.actions.handleServiceTypeChoice(value))\n}\n\nexport const toggleConflictModal = (value)=>async(dispatch)=>{\n dispatch(slice.actions.toggleConflictModal())\n}\n\n\nexport default slice.reducer;\n","import { combineReducers } from 'redux';\nimport authReducer from './authReducer';\nimport statsReducer from './statsReducer';\nimport registerReducer from './registerReducer';\nimport shipperDetailsReducer from './shipperDetailsReducer';\nimport pickupPointReducer from './pickupPointReducer';\nimport consigneeAddressReducer from './consigneeAddressReducer';\nimport searchPostalCodeReducer from './searchPostalCodeReducer';\nimport storeReducer from './storeReducer';\nimport orderReducer from './orderReducer';\nimport submitShopifyOrdersReducer from './submitShopifyOrdersReducer';\nimport itemDetailsReducer from './itemDetailsReducer';\nimport reportsReducer from './reportsReducer';\nimport invoicesReducer from './invoicesReducer';\nimport subProfilesReducer from './subProfilesReducer';\nimport analyticsReducer from './analyticsReducer';\nimport orderDefaultValueRedcuer from './orderDefaultValueRedcuer'\nimport othersReducer from './othersReducer'\nimport termsReducer from './termsReducer'\nimport agentAppDetailsReducer from './agentAppDetailsReducer'\nimport returnPointReducer from './returnPointReducer';\nimport draftOrderReducers from '../components/draftOrder/store';\nimport channelReducer from '../components/draftOrder/channelStore';\nimport laneConfigReducer from '../components/channels/laneConfigs/store';\nimport shipmentRuleReducer from '../components/channels/shipmentRules/store'\n\nimport { UNAUTH_USER } from '../actions/types';\n\nconst appReducer = combineReducers({\n auth: authReducer,\n stats: statsReducer,\n register: registerReducer,\n shipperDetails: shipperDetailsReducer,\n agentAppDetails: agentAppDetailsReducer,\n pickupPoint: pickupPointReducer,\n returnPoint: returnPointReducer,\n consigneeAddress: consigneeAddressReducer,\n searchPostalCode: searchPostalCodeReducer,\n store: storeReducer,\n order: orderReducer,\n submitShopifyOrders: submitShopifyOrdersReducer,\n itemDetails: itemDetailsReducer,\n reports: reportsReducer,\n invoices: invoicesReducer,\n subProfiles: subProfilesReducer,\n analytics: analyticsReducer,\n orderDefaultValue: orderDefaultValueRedcuer,\n others: othersReducer,\n terms: termsReducer,\n draftOrders: draftOrderReducers,\n channels: channelReducer,\n laneConfigs: laneConfigReducer,\n shipmentRules:shipmentRuleReducer\n});\n\nconst rootReducer = (state, action) => {\n if (action.type === UNAUTH_USER) {\n state = {};\n }\n\n return appReducer(state, action);\n}\n\nexport default rootReducer;\n","import {\n AUTH_USER,\n UNAUTH_USER,\n AUTH_ERROR,\n FETCH_SIGNED_IN_USER,\n EDIT_SIGNED_IN_USER,\n CHANGE_PASSWORD,\n RESET_PASSWORD,\n PASSWORD_SENT,\n CLEAR_AUTH_ERRORS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch (action.type) {\n case AUTH_USER:\n return {\n ...state,\n error: null,\n authenticated: true\n };\n case UNAUTH_USER:\n return { authenticated: false };\n case AUTH_ERROR:\n return { ...state, error: true, errorData: action.errorData };\n case FETCH_SIGNED_IN_USER:\n return { ...state, user: action.payload };\n case EDIT_SIGNED_IN_USER:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n editType: action.editType\n };\n case CHANGE_PASSWORD:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n editType: action.editType\n };\n case RESET_PASSWORD:\n return { ...state, error: action.payload };\n case PASSWORD_SENT:\n return { ...state, error: action.payload };\n case CLEAR_AUTH_ERRORS:\n return { ...state, error: null, errorData: null, permissionUrl: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_STATS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_STATS:\n return { ...state, stats: action.payload };\n default:\n return state;\n }\n}\n","import {\n SUBMIT_REGISTER,\n REGISTER_ACCOUNT,\n CLEAR_REGISTER_ERRORS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch (action.type) {\n case SUBMIT_REGISTER:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData\n };\n case REGISTER_ACCOUNT:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n permissionUrl: action.permissionUrl\n };\n case CLEAR_REGISTER_ERRORS:\n return { ...state, error: null, errorData: null, permissionUrl: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_LANGUAGES,\n FETCH_SHIPPER_DETAILS,\n EDIT_SHIPPER_DETAILS,\n CLEAR_SHIPPER_DETAILS_ERRORS,\n FETCH_SHIPPER_DETAILS_LOADING\n} from '../actions/types';\nimport i18next from \"i18next\";\n\nexport default function(state = {\n loading: false\n}, action) {\n switch(action.type) {\n case FETCH_LANGUAGES:\n return { ...state, languages: action.payload, loading: false };\n case FETCH_SHIPPER_DETAILS:\n const { language } = action.payload\n if (!!language) {\n localStorage.setItem(\"lang\", language)\n i18next.changeLanguage(language)\n }\n return { ...state, shipperDetails: action.payload, loading: false };\n case FETCH_SHIPPER_DETAILS_LOADING:\n return {...state, loading: true}\n case EDIT_SHIPPER_DETAILS:\n return { ...state, error: action.payload, loading: false };\n case CLEAR_SHIPPER_DETAILS_ERRORS:\n return { ...state, error: null, loading: false };\n default:\n return state;\n }\n}\n","import {\n FETCH_AGENTAPP_DETAILS,\n EDIT_AGENTAPP_DETAILS,\n CLEAR_AGENTAPP_DETAILS,\n SHOW_LABEL_SHIPPER_ADDRESS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch (action.type) {\n case FETCH_AGENTAPP_DETAILS:\n return { ...action.payload };\n case EDIT_AGENTAPP_DETAILS:\n return { ...state, ...action.payload };\n case CLEAR_AGENTAPP_DETAILS:\n return { ...state, error: null };\n case SHOW_LABEL_SHIPPER_ADDRESS:\n return { ...state, ...action.payload };\n default:\n return state;\n }\n}\n","import {\n FETCH_PICKUP_POINT,\n FETCH_PICKUP_POINT_BY_ID,\n ADD_PICKUP_POINT,\n EDIT_PICKUP_POINT,\n DELETE_PICKUP_POINT,\n CLEAR_PICKUP_POINT_ERRORS,\n ADDRESS_ADDED_TYPE,\n SET_CURRENT_ADDRESS_TYPE\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_PICKUP_POINT:\n return { ...state, pickupPoints: action.payload };\n case FETCH_PICKUP_POINT_BY_ID:\n return { ...state, pickupPoint: action.payload };\n case ADD_PICKUP_POINT:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData\n };\n case EDIT_PICKUP_POINT:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n message: 'Update pickup point success!'\n };\n case DELETE_PICKUP_POINT:\n return {\n ...state,\n error: action.payload,\n message: 'Delete pickup point success!',\n status: action.status\n };\n case CLEAR_PICKUP_POINT_ERRORS:\n return { ...state, error: null, errorData: null, message: null, status: null };\n case ADDRESS_ADDED_TYPE:\n return {...state, address_added_type: action.payload}\n case SET_CURRENT_ADDRESS_TYPE:\n return {...state, current_address_type: action.payload}\n default:\n return state;\n }\n}\n","import {\n FETCH_RETURN_POINT,\n FETCH_RETURN_POINT_BY_ID,\n ADD_RETURN_POINT,\n EDIT_RETURN_POINT,\n DELETE_RETURN_POINT,\n CLEAR_RETURN_POINT_ERRORS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_RETURN_POINT:\n return { ...state, returnPoints: action.payload };\n case FETCH_RETURN_POINT_BY_ID:\n return { ...state, returnPoint: action.payload };\n case ADD_RETURN_POINT:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData\n };\n case EDIT_RETURN_POINT:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n message: 'Update return point success!'\n };\n case DELETE_RETURN_POINT:\n return {\n ...state,\n error: action.payload,\n message: 'Delete return point success!',\n status: action.status\n };\n case CLEAR_RETURN_POINT_ERRORS:\n return { ...state, error: null, errorData: null, message: null, status: null };\n default:\n return state;\n }\n}\n","import {\n\tFETCH_CONSIGNEE_ADDRESS,\n\tFETCH_CONSIGNEE_ADDRESS_BY_ID,\n\tADD_CONSIGNEE_ADDRESS,\n\tEDIT_CONSIGNEE_ADDRESS,\n\tCLEAR_CONSIGNEE_ADDRESS_ERRORS\n} from '../actions/types';\n\nexport default function (state = {}, action) {\n\tswitch (action.type) {\n\t\tcase FETCH_CONSIGNEE_ADDRESS:\n\t\t\treturn { ...state, consigneeAddresses: action.payload };\n\t\tcase FETCH_CONSIGNEE_ADDRESS_BY_ID:\n\t\t\treturn { ...state, consigneeAddress: action.payload };\n\t\tcase ADD_CONSIGNEE_ADDRESS:\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\terror: action.payload,\n\t\t\t\terrorData: action.errorData\n\t\t\t};\n\t\tcase EDIT_CONSIGNEE_ADDRESS:\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\terror: action.payload,\n\t\t\t\terrorData: action.errorData,\n\t\t\t\tmessage: 'Update consignee address success!'\n\t\t\t};\n\t\tcase CLEAR_CONSIGNEE_ADDRESS_ERRORS:\n\t\t\treturn { ...state, error: null, errorData: null, message: null, status: null };\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}\n","import {\n FETCH_POSTAL_SEARCH,\n CLEAR_SEARCH_POSTAL_CODE_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_POSTAL_SEARCH:\n return {\n ...state,\n postalSearch: action.payload,\n lastUpdated: moment()\n };\n case CLEAR_SEARCH_POSTAL_CODE_ERRORS:\n return { ...state, error: null, errorData: null, postalSearch: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_STORE,\n FETCH_STORE_BY_ID,\n FETCH_STORE_TYPES,\n ADD_STORE,\n DELETE_STORE,\n ACTIVATE_STORE,\n DEACTIVATE_STORE,\n FETCH_PREVIOUS,\n FETCH_NEXT,\n FETCH_STORE_ORDER_BY_FILTER,\n FETCH_STORE_ORDER_DETAILS,\n FETCH_POSTAL_IDENTIFIER,\n CLEAR_STORE_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_STORE:\n return {\n ...state,\n stores: action.payload,\n errorData: action.errorData\n };\n case FETCH_STORE_BY_ID:\n return {\n ...state,\n store: action.payload,\n errorData: action.errorData\n };\n case FETCH_STORE_TYPES:\n return { ...state, storeTypes: action.payload };\n case ADD_STORE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData\n };\n case DELETE_STORE:\n return {\n ...state,\n error: action.payload,\n status: action.status,\n lastUpdated: moment()\n };\n case ACTIVATE_STORE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n status: action.status,\n message: 'Activate store success!',\n lastUpdated: moment()\n };\n case DEACTIVATE_STORE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n status: action.status,\n message: 'Deactivate store success!',\n lastUpdated: moment()\n };\n case FETCH_PREVIOUS:\n return { ...state };\n case FETCH_NEXT:\n return { ...state };\n case FETCH_STORE_ORDER_BY_FILTER:\n return {\n ...state,\n storeOrder: action.payload,\n totalOrders: action.payload.length,\n totalPages: Math.ceil(action.payload.length/50),\n lastUpdated: moment(),\n errorData: action.errorData\n };\n case FETCH_STORE_ORDER_DETAILS:\n return {\n ...state,\n storeOrderDetails: action.payload,\n errorData: action.errorData\n };\n case FETCH_POSTAL_IDENTIFIER:\n return { ...state, postalIdentifier: action.payload };\n case CLEAR_STORE_ERRORS:\n return { ...state, error: null, errorData: null, status: null, message: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_SERVICE,\n FETCH_ALL_COUNTRIES,\n FETCH_ITEM_CATEGORY,\n FETCH_ITEM_PRICE_CURRENCY,\n FETCH_CONVERTED_VALUE,\n FETCH_STATUSES,\n FETCH_UPLOAD_BATCH_NO,\n ADD_ORDER,\n EDIT_ORDER,\n ADD_ORDERS,\n FETCH_ORDERS_BY_SECRET_KEY,\n FETCH_PREVIOUS,\n FETCH_NEXT,\n FETCH_ORDERS_BY_FILTER,\n FETCH_ORDER_DETAILS,\n DELETE_ORDER,\n ORDERS_ACTION_ERROR,\n CLEAR_ORDER_ERRORS,\n FETCH_PARKERS,\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_SERVICE:\n return { ...state, service: action.payload };\n case FETCH_PARKERS:\n return { ...state, parkers: action.payload };\n case FETCH_ALL_COUNTRIES:\n return { ...state, countries: action.payload };\n case FETCH_ITEM_CATEGORY:\n return { ...state, itemCategory: action.payload };\n case FETCH_ITEM_PRICE_CURRENCY:\n return { ...state, itemPriceCurrency: action.payload };\n case FETCH_CONVERTED_VALUE:\n return { ...state, convertedValueList: action.payload };\n case FETCH_STATUSES:\n return { ...state, publicStatuses: action.payload };\n case FETCH_UPLOAD_BATCH_NO:\n return { ...state, updateBatchNo: action.payload };\n case ADD_ORDER:\n return { ...state, error: action.payload, errorData: action.errorData };\n case EDIT_ORDER:\n return { ...state, error: action.payload };\n case ADD_ORDERS:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n status: action.status,\n lastUpdated: moment()\n };\n case FETCH_ORDERS_BY_SECRET_KEY:\n return { ...state, order: action.payload };\n case FETCH_PREVIOUS:\n return { ...state };\n case FETCH_NEXT:\n return { ...state };\n case FETCH_ORDERS_BY_FILTER:\n return {\n ...state,\n orders: action.payload.results,\n totalOrders: action.payload.count,\n totalPages: Math.ceil(action.payload.count/action.pageSize),\n lastUpdated: moment(),\n queryId: action.queryId\n };\n case FETCH_ORDER_DETAILS:\n return {\n ...state,\n orderDetails: action.payload,\n };\n case DELETE_ORDER:\n return { ...state, error: false, message: \"Order(s) successfully deleted.\" };\n case ORDERS_ACTION_ERROR:\n return { ...state, error: true, message: \"An error has occured, please try again.\" }\n case CLEAR_ORDER_ERRORS:\n return { ...state, error: null, errorData: null, message: null, status: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_SHOPIFY_SHOPS,\n FETCH_SHOPIFY_ORDERS,\n CLEAR_SUBMIT_SHOPIFY_ORDERS_ERRORS\n} from '../actions/types';\n\nexport default function(state = {}, action) {\n switch (action.type) {\n case FETCH_SHOPIFY_SHOPS:\n return { ...state, shopifyShops: action.payload };\n case FETCH_SHOPIFY_ORDERS:\n return { ...state, shopifyOrders: action.payload };\n case CLEAR_SUBMIT_SHOPIFY_ORDERS_ERRORS:\n return { ...state, error: null, errorData: null, message: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_ITEM_DETAILS_WITH_FITLER,\n FETCH_ITEM_DETAILS_BY_ID,\n ADD_ITEM_DETAILS,\n UPDATE_ITEM_DETAILS_BY_ID,\n DELETE_ITEM_DETAILS_BY_ID,\n GET_ITEM_DETAILS_CSV,\n CLEAR_ITEM_DETAILS_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_ITEM_DETAILS_WITH_FITLER:\n return {\n ...state,\n itemDetails: action.payload.results,\n totalItemDetails: action.payload.count,\n totalPages: Math.ceil(action.payload.count/50),\n lastUpdated: moment()\n };\n case FETCH_ITEM_DETAILS_BY_ID:\n return {\n ...state,\n itemDetail: action.payload\n };\n case ADD_ITEM_DETAILS:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n lastUpdated: moment()\n };\n case UPDATE_ITEM_DETAILS_BY_ID:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n lastUpdated: moment()\n };\n case DELETE_ITEM_DETAILS_BY_ID:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n status: action.status,\n lastUpdated: moment()\n };\n case GET_ITEM_DETAILS_CSV:\n return {\n ...state,\n itemDetailsCSV: action.itemDetailsCSV,\n errorData: action.errorData,\n };\n case CLEAR_ITEM_DETAILS_ERRORS:\n return { ...state, error: null, errorData: null, status: null, itemDetailsCSV: [] };\n default:\n return state;\n }\n}\n","import {\n FETCH_ORDERS_IN_CSV,\n FETCH_TRACKER_UPDATES_IN_CSV,\n CLEAR_REPORT_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch (action.type) {\n case FETCH_ORDERS_IN_CSV:\n return {\n ...state,\n ordersInCSV: action.payload,\n emailsMessage: action.emailsMessage,\n lastUpdatedFetchOrdersDetails: moment()\n };\n case FETCH_TRACKER_UPDATES_IN_CSV:\n return {\n ...state,\n trackerUpdatesInCSV: action.payload,\n emailsMessage: action.emailsMessage,\n lastUpdatedFetchTrackerUpdates: moment()\n };\n case CLEAR_REPORT_ERRORS:\n return { ...state, error: null, message: null, ordersInCSV: [], trackerUpdatesInCSV: [], emailsMessage: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_INVOICES_WITH_FITLER,\n FETCH_INVOICES_WITH_FITLER_ERRORS,\n FETCH_INVOICES_PDF,\n FETCH_STATUSES,\n CLEAR_INVOICE_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_INVOICES_WITH_FITLER:\n return {\n ...state,\n invoices: action.payload,\n totalInvoices: action.payload.length,\n totalPages: Math.ceil(action.payload.length/50),\n lastUpdated: moment()\n };\n case FETCH_INVOICES_WITH_FITLER_ERRORS:\n return {\n ...state,\n errorData: action.errorData\n };\n case FETCH_INVOICES_PDF:\n return { ...state, invoicesPdf: action.payload, invoicesPdfStatus: action.invoicesPdfStatus };\n case FETCH_STATUSES:\n return { ...state, publicStatuses: action.payload };\n case CLEAR_INVOICE_ERRORS:\n return { ...state, error: null, errorData: null, invoicesPdf: null, invoicesPdfStatus: null };\n default:\n return state;\n }\n}\n","import {\n FETCH_SUB_PROFILES,\n FETCH_SUB_PROFILE_BY_ID,\n ADD_SUB_PROFILE,\n EDIT_SUB_PROFILE,\n DELETE_SUB_PROFILE,\n CLEAR_SUB_PROFILES_ERRORS\n} from '../actions/types';\nimport moment from 'moment';\n\nexport default function(state = {}, action) {\n switch(action.type) {\n case FETCH_SUB_PROFILES:\n const length = action.payload ? action.payload.length:0\n return {\n ...state,\n errorData: action.errorData,\n subProfiles: action.payload,\n totalUsers: length,\n totalPages: Math.ceil(length/50),\n lastUpdated: moment()\n };\n case FETCH_SUB_PROFILE_BY_ID:\n return {\n ...state,\n errorData: action.errorData,\n subProfile: action.payload\n };\n case ADD_SUB_PROFILE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n lastUpdated: moment()\n };\n case EDIT_SUB_PROFILE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n lastUpdated: moment()\n };\n case DELETE_SUB_PROFILE:\n return {\n ...state,\n error: action.payload,\n errorData: action.errorData,\n lastUpdated: moment()\n };\n case CLEAR_SUB_PROFILES_ERRORS:\n return { ...state, error: null, errorData: null, subProfile: null };\n default:\n return state;\n }\n}\n","import {\n LOAD_METABASE_URL_DONE,\n LOAD_METABASE_URL_ERROR\n} from \"../actions/types\";\n\nexport default function (state = {}, action) {\n switch (action.type) {\n case LOAD_METABASE_URL_DONE:\n return { ...state, data: action.payload, loading: false, error: false };\n case LOAD_METABASE_URL_ERROR:\n return { ...state, loading: false, error: true };\n default:\n return state;\n }\n}\n","import { INIT_FRESHWIDGET, DESTROY_FRESHWIDGET } from \"../actions/types\";\n\nexport default (state={}, action) => {\n switch(action.type) {\n case INIT_FRESHWIDGET:\n if (!state.initialized) {\n const email = action.payload\n window.initFreshWidget(email)\n }\n return {...state, initialized: true}\n case DESTROY_FRESHWIDGET:\n try {\n window.fw.destroy()\n window.FreshWidget = window.fw\n } catch(e) {}\n return state\n default:\n return state\n }\n}","import {\n OPEN_TERMS_AND_CONDITIONS_MODAL,\n CLOSE_TERMS_AND_CONDITIONS_MODAL,\n CONFIRM_TERMS_AND_CONDITIONS,\n CONFIRM_TERMS_SUCCESS,\n CONFIRM_TERMS_FAILURE,\n SUBMIT_TERMS_AND_CONDITIONS,\n SET_TERMS_AND_CONDITIONS\n} from '../actions/types'\n\n\nexport default function(\n state={\n isTermsModalOpen: false,\n isLoading: false,\n isSubmitting: false,\n data: null\n },\n action\n) \n{\n switch (action.type) {\n case OPEN_TERMS_AND_CONDITIONS_MODAL:\n return {\n ...state,\n isTermsModalOpen: true,\n data: action.payload || state.data\n }\n \n case SET_TERMS_AND_CONDITIONS:\n return {\n ...state,\n data: action.payload\n }\n\n case CLOSE_TERMS_AND_CONDITIONS_MODAL:\n return {\n ...state,\n isTermsModalOpen: false,\n isSubmitting: false\n }\n \n case SUBMIT_TERMS_AND_CONDITIONS:\n return {\n ...state, isSubmitting: true\n }\n \n case CONFIRM_TERMS_AND_CONDITIONS:\n return {\n ...state,\n isLoading: true\n }\n\n case CONFIRM_TERMS_SUCCESS:\n case CONFIRM_TERMS_FAILURE:\n return {\n ...state,\n isLoading: false\n }\n \n default:\n return state;\n }\n}","import React from 'react'\nimport { Tag } from 'antd'\n\nconst statusDisplay = {\n 'NEW': 'Insufficient Info',\n 'ERROR': 'Insufficient Info',\n 'READY_TO_SHIP': 'Ready to Ship',\n 'CANCELLED': 'Cancelled',\n 'SHIPPED': 'Info pushed to Janio',\n}\n\nconst statusColors = {\n 'NEW': 'red',\n 'ERROR': 'red',\n 'READY_TO_SHIP': 'blue',\n 'CANCELLED': 'blue',\n 'SHIPPED': 'green',\n}\n\nexport const StatusTag = ({children}) => {\n const color = statusColors[children]\n const display = statusDisplay[children]\n return {display} \n}\n\n","import React, { useState } from 'react';\nimport { Modal, Steps, Button } from 'antd';\n\nimport step1Image from '../../images/draftOrder/onboard_1.png'\nimport step2Image from '../../images/draftOrder/onboard_2.png'\nimport step3Image from '../../images/draftOrder/onboard_3.png'\nimport step4Image from '../../images/draftOrder/onboard_4.png'\nimport step5Image from '../../images/draftOrder/onboard_5.png'\nimport step6Image from '../../images/draftOrder/onboard_6.png'\n\nconst stepLabels = [\n 'Import all your orders',\n 'Add pickup point',\n 'Convert orders to Ready to Ship status',\n 'Edit error in order creation',\n 'Ship orders in bulk',\n 'Print and paste labels'\n]\n\nconst stepSubtitles = [\n 'Janio imports and syncs all e-commerce your order.',\n 'Click on Manage Addresses to add your pickup point.',\n 'Go back to Shopify Page to find your orders and click on Details button to convert your shipment to Ready to Ship status.',\n 'Resolve the errors highlighted in the order creation form to proceed.',\n 'Once all your orders are inside the Ready to Ship tab, you can multi-select the orders and click on Create Shipments button.',\n 'Go to manage orders to print your labels and paste it on your parcels.'\n]\n\nconst stepImages = [\n step1Image,\n step2Image,\n step3Image,\n step4Image,\n step5Image,\n step6Image,\n]\n\nconst StepContent = ({step}) => {\n return (\n \n
\n
\n {stepLabels[step]}\n \n
\n {stepSubtitles[step]}\n
\n
\n
\n Skip tour\n \n
\n {step > 0 &&\n \n Back\n \n }\n \n {step === STEP_COUNT - 1 ? 'Close' : 'Next'}\n \n
\n
\n
\n \n \n
\n \n \n \n )\n}\n","import React from 'react';\nimport { Empty, Button } from 'antd';\nimport emptyImage from '../../../images/draftOrder/no_channel.svg'\nimport { Link } from 'react-router-dom';\n\nexport const EmptyChannel = (props) => {\n return (\n \n It seems you haven't connected our eCommerce store yet.\n \n }\n >\n Connect a store \n \n \n )\n}\n\n","import React, { useState, useEffect } from 'react';\nimport { Table, Card, Button, Modal, Tabs, Spin, Row, Col } from 'antd'\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Link, withRouter } from 'react-router-dom';\n\nimport { getDraftOrders, deleteDraftOrders, applySyncRule } from './store';\nimport { getFilterData } from './channelStore';\nimport { StatusTag } from './statusTag';\nimport { Alert } from 'antd';\nimport { WelcomeModal } from './welcomeModal';\nimport { EmptyChannel } from './components/EmptyChannel';\n\nconst COLUMNS = [\n {\n title: 'Shop Name',\n dataIndex: 'channel.channel_name',\n filters: [],\n },\n {\n title: 'Order ID',\n dataIndex: 'shipper_order_id',\n render: (text, record) => (record.shipper_order_id || record.channel_order_id || '')\n },\n {\n title: 'Consignee',\n dataIndex: 'consignee_name',\n },\n {\n title: 'Consignee Country',\n dataIndex: 'consignee_country',\n },\n {\n title: 'Shipment Type',\n dataIndex: 'service_level',\n },\n {\n title: 'Payment Status',\n dataIndex: 'payment_status',\n },\n {\n title: 'Status',\n dataIndex: 'status',\n render: (text, record) => ({text} )\n },\n {\n title: 'Action',\n key: 'action',\n render: (text, record) => {\n if(record.order_id){\n return (\n View Order \n \n );\n }\n return (\n Update Info \n \n );\n }\n }\n];\n\nconst getColumnData = (filterData, appliedFilters) => {\n let columns = COLUMNS\n columns[0].filters = filterData.channels.map(c => ({text: c.channel_name, value: c.id}))\n if(appliedFilters['channel.channel_name']){\n columns[0].filteredValue = appliedFilters['channel.channel_name']\n }\n\n columns[3].filters = filterData.countries.map(c => ({text: c, value: c}))\n if(appliedFilters['consignee_country']){\n columns[3].filteredValue = appliedFilters['consignee_country']\n }\n\n // Shipment Type\n columns[4].filters = filterData.service_levels.map(c => ({text: c, value: c}))\n if(appliedFilters['service_level']){\n columns[4].filteredValue = appliedFilters['service_level']\n }\n \n // Payment Status\n columns[5].filters = filterData.payment_statuses && filterData.payment_statuses.map(c => ({text: c, value: c}))\n if(appliedFilters['payment_status']){\n columns[5].filteredValue = appliedFilters['payment_status']\n }\n\n // Status\n columns[6].filters = filterData.other_statuses && filterData.other_statuses.map(c => ({text: c, value: c}))\n if(appliedFilters['status']){\n columns[6].filteredValue = appliedFilters['status']\n }\n return columns\n}\n\nconst constructLane = (origin, destination) => `${origin}-${destination}`\nconst encodeSelectedOrders = (orders) => {\n const lanesCounter = {};\n orders.forEach((order) => {\n const lane = constructLane(order.pickup_country, order.consignee_country)\n if(lane in lanesCounter){\n lanesCounter[lane]++\n }else{\n lanesCounter[lane] = 1\n }\n });\n\n const payload = {\n 'orderIds': orders.map(o => o.id.toString()),\n 'lanesCounter': lanesCounter\n }\n\n return btoa(JSON.stringify(payload))\n}\n\nconst tabStatusMapping = {\n 'ready': 'READY_TO_SHIP',\n 'not_ready': 'ERROR,NEW',\n 'all': null\n}\n\nconst getTableHeader = (activeTab, orders, selectedOrders, totalCount) => {\n if(activeTab === 'ready'){\n if(selectedOrders.length){\n return `${selectedOrders.length} orders selected`\n }\n return 'Select the orders to ship with Janio'\n }\n return `${totalCount} orders`\n}\n\nexport const LViewDraftOrders = ({history}) => {\n const params = new URLSearchParams(history.location.search);\n const tabParams = params.get('tab') || 'not_ready';\n\n const dispatch = useDispatch()\n const [page, setPage] = useState(1)\n const [pageSize, setPageSize] = useState(20)\n const [filters, setFilters] = useState({})\n const [selectedOrders, setSelectedOrders] = useState([])\n const [activeTab, setActiveTab] = useState(tabParams)\n const [statuses, setStatuses] = useState(tabStatusMapping[activeTab])\n const [isFromShopify, setIsFromShopfy] = useState(localStorage.getItem('from_shopify') === 'true')\n const [showSyncModal, setSyncModal] = useState(false)\n\n const onSwitchPage = (page) => {\n setPage(page);\n }\n\n const onPageSizeChange = (current, pageSize) => {\n setPage(1)\n setPageSize(pageSize)\n }\n\n const {secretKey} = useSelector( (state) => {\n if(state.shipperDetails && state.shipperDetails.shipperDetails){\n return {\n secretKey: state.shipperDetails.shipperDetails.agent_application_secret_key,\n }\n }\n return {secretKey: null};\n });\n const {entries, isLoading, totalCount} = useSelector((state) => {\n return {\n entries: state.draftOrders.entries.data,\n isLoading: state.draftOrders.entries.loading,\n totalCount: state.draftOrders.entries.pagination.totalCount,\n };\n });\n const filterData = useSelector((state) => {\n return state.channels.filterData\n });\n\n useEffect(() => {\n if(secretKey){\n const channelFilters = filters['channel.channel_name'] && filters['channel.channel_name'].join(',')\n const countryFilters = filters['consignee_country'] && filters['consignee_country'].join(',')\n const serviceLevelFilters = filters['service_level'] && filters['service_level'].join(',')\n const paymentStatusFilters = filters['payment_status'] && filters['payment_status'].join(',')\n const statusFilters = filters['status'] && filters['status'].join(',');\n const params = {\n page: page,\n page_size: pageSize,\n status: statuses,\n channel_ids: channelFilters,\n consignee_countries: countryFilters,\n service_levels: serviceLevelFilters,\n payment_statuses: paymentStatusFilters,\n other_status: statusFilters,\n }\n dispatch(getDraftOrders(secretKey, params));\n }\n\n if(secretKey && !filterData.loaded){\n dispatch(getFilterData(secretKey, {}));\n }\n }, [secretKey, filters, statuses, page, pageSize, filterData.loaded, dispatch]);\n\n const dismissWelcomeModal = () => {\n localStorage.setItem('from_shopify', 'false')\n setIsFromShopfy(false)\n }\n\n const onCreateShipmentsClick = () => {\n const payload = encodeSelectedOrders(selectedOrders)\n history.push('/create-shipments/' + payload)\n }\n\n const CreateShipmentButton = () => {\n if(activeTab === 'ready'){\n return (\n \n Ship with Janio\n \n )\n }\n return null\n }\n\n let errmsg = null;\n if (localStorage.getItem(\"shopify_err\") !== null) {\n errmsg = \n \n
\n )\n }\n\n if(filterData.loaded && filterData.data.channels.length < 1){\n return \n {setSyncModal(true)}} type=\"primary\" >Sync shipment rule \n {\n dispatch(deleteDraftOrders(\n secretKey, {\"draft_order_ids\": selectedOrders.map((order) => order.id) }, function() {\n dispatch(getDraftOrders(secretKey, {page: 1, status: \"READY_TO_SHIP\"}));\n }));\n }} type=\"danger\" style={{marginLeft: 10}}>Delete \n
\n )\n }\n\n\n const ordersTable = (\n (setSelectedOrders(selectedRows)),\n getCheckboxProps: record => ({disabled: record.status !== 'READY_TO_SHIP'})\n }}\n rowKey=\"id\"\n dataSource={entries}\n onChange={onTableChange}\n pagination={{\n onChange: onSwitchPage,\n total: totalCount,\n showSizeChanger: true,\n defaultPageSize: pageSize,\n current: page,\n pageSize: pageSize,\n onShowSizeChange: onPageSizeChange,\n pageSizeOptions: ['20', '50', '100']\n }}\n columns={getColumnData(filterData.data, filters)}\n loading={isLoading} />\n \n )\n\n return (\n <>\n {errmsg}\n {isFromShopify && }\n \n window.location.reload()}\n type=\"button\"\n className=\"btn btn-primary mb-1\">\n Refresh\n \n
\n If you run into any trouble while creating your shipments and need help, you can read up on our detailed guide here \n }/>\n \n \n {ordersTable}\n \n \n {ordersTable}\n \n \n {ordersTable}\n \n \n {setSyncModal(false)}} footer={null}>\n \n Orders will be updated with your new shipment rules \n {setSyncModal(false)}} >Cancel \n {dispatch(applySyncRule(secretKey, {}));setSyncModal(false)}}>Apply rules \n \n
\n \n \n );\n}\n\nexport const ViewDraftOrders = withRouter(LViewDraftOrders)\n","export const COUNTRY_TO_CURRENCY = {\n 'Afghanistan': 'AFN',\n 'Albania': 'ALL',\n 'Andorra': 'EUR',\n 'Argentina': 'ARS',\n 'Armenia': 'AMD',\n 'Australia': 'AUD',\n 'Azerbaijan': 'AZN',\n 'Bahrain': 'BHD',\n 'Belgium': 'EUR',\n 'Bolivia': 'BOB',\n 'Bosnia & Herzegovina': 'BAM',\n 'Brazil': 'BRL',\n 'Brunei': 'BND',\n 'Bulgaria': 'BGN',\n 'Canada': 'CAD',\n 'Canary Islands': 'EUR',\n 'Chile': 'CLP',\n 'China': 'CNY',\n 'Colombia': 'COP',\n 'Croatia': 'HRK',\n 'Cyprus': 'CYP',\n 'Czech Republic': 'CZK',\n 'Denmark': 'DKK',\n 'Ecuador': 'ECS',\n 'Egypt': 'EGP',\n 'Estonia': 'EEK',\n 'Falkland Islands': 'FKP',\n 'Faroe Islands': 'FAE',\n 'Finland': 'EUR',\n 'France': 'EUR',\n 'French Guiana': 'GNF',\n 'Georgia': 'GEL',\n 'Germany': 'EUR',\n 'Gibraltar': 'GIP',\n 'Greece': 'EUR',\n 'Greenland': 'DKK',\n 'Guernsey': 'GGP',\n 'Guyana': 'GYD',\n 'Hong Kong': 'HKD',\n 'Hungary': 'HUF',\n 'Iceland': 'ISK',\n 'India': 'INR',\n 'Indonesia': 'IDR',\n 'Ireland': 'EUR',\n 'Israel': 'ILS',\n 'Italy': 'EUR',\n 'Japan': 'JPY',\n 'Jersey': 'JMD',\n 'Jordan': 'JOD',\n 'Kazakhstan': 'KZT',\n 'Kosovo': 'EUR',\n 'Kuwait': 'KWD',\n 'Latvia': 'EUR',\n 'Libya': 'LYD',\n 'Liechtenstein': 'CHF',\n 'Lithuania': 'LVL',\n 'Luxembourg': 'EUR',\n 'Macedonia': 'MKD',\n 'Malaysia': 'MYR',\n 'Malta': 'EUR',\n 'Moldova': 'MDL',\n 'Monaco': 'EUR',\n 'Montenegro': 'EUR',\n 'Netherlands': 'EUR',\n 'New Zealand': 'NZD',\n 'Norway': 'NOK',\n 'Oman': 'OMR',\n 'Paraguay': 'PYG',\n 'Peru': 'PEN',\n 'Philippines': 'PHP',\n 'Poland': 'PLN',\n 'Portugal': 'EUR',\n 'Qatar': 'QAR',\n 'Romania': 'ROL',\n 'Saudi Arabia': 'SAR',\n 'Serbia': 'SRB',\n 'Singapore': 'SGD',\n 'Slovakia': 'EUR',\n 'Slovenia': 'EUR',\n 'South Georgia and the South Sandwich Islands': 'GBP',\n 'South Korea': 'KRW',\n 'Spain': 'EUR',\n 'Suriname': 'SRD',\n 'Sweden': 'SEK',\n 'Switzerland': 'CHF',\n 'Taiwan': 'TWD',\n 'Thailand': 'THB',\n 'Turkey': 'TRY',\n 'Turkmenistan': 'TMM',\n 'UAE': 'AED',\n 'UK': 'GBP',\n 'Uruguay': 'UYU',\n 'US': 'USD',\n 'Vatican City': 'EUR',\n 'Venezuela': 'VEB',\n 'Vietnam': 'VND'\n}","import { COUNTRY_TO_CURRENCY } from '../../utils/currency'\n\nconst FIELD_NAME_MAPPING = {\n 'tracking_no': 'Tracking Number',\n 'service_id': 'Service Type',\n 'shipper_order_id': 'Shipper Order ID',\n 'consignee_name': 'Consignee Name',\n 'consignee_address': 'Consignee Address',\n 'consignee_postal': 'Consignee Postal Code',\n 'consignee_country': 'Consignee Country',\n 'consignee_state': 'Consignee State',\n 'consignee_city': 'Consignee City',\n 'consignee_province': 'Consignee Province',\n 'consignee_number': 'Consignee Number',\n 'consignee_email': 'Consignee Email',\n 'order_length': 'Order Length',\n 'order_width': 'Order Width',\n 'order_height': 'Order Height',\n 'order_weight': 'Order Weight',\n 'pickup_contact_name': 'Pickup Contact Name',\n 'pickup_contact_number': 'Pickup Contact Number',\n 'pickup_address': 'Pickup Address',\n 'pickup_postal': 'Pickup Postal',\n 'pickup_country': 'Pickup Country',\n 'pickup_state': 'Pickup State',\n 'pickup_city': 'Pickup City',\n 'pickup_province': 'Pickup Province',\n 'payment_type': 'Payment Type',\n 'incoterm': 'Incoterm',\n 'delivery_note': 'Delivery Note',\n 'pickup_date': 'Pickup Date',\n 'cod_amt_to_collect': 'COD Amount to Collect',\n}\n\nexport const translateErrorField = (field) => {\n if( field in FIELD_NAME_MAPPING ){\n return FIELD_NAME_MAPPING[field];\n }\n\n return field.replace('_', ' ')\n}\n\nexport const translateErrorMsg = (field, errorMsg, values) => {\n if(field === 'incoterm'){\n if(errorMsg.includes('null')){\n return errorMsg.replace('null', 'None')\n }\n }\n\n if(field === 'cod_amt_to_collect'){\n if(values[field] === null && values['ref_cod_amt_to_collect']){\n const merchantCurrency = values['ref_cod_currency'];\n const merchantCodAmt = values['ref_cod_amt_to_collect']\n const localCurrency = COUNTRY_TO_CURRENCY[values.consignee_country]\n const formattedAmt = merchantCodAmt\n return `Please convert COD amount ${merchantCurrency}${formattedAmt} to local currency (${localCurrency})`\n }\n }\n\n if(field === 'payment_type'){\n if(errorMsg.includes('Payment Type of \"COD\" is not available')){\n return `Janio does not provide COD service in ${values['consignee_country']}.`\n }\n }\n\n if(field === 'service_type'){\n if(errorMsg.includes('is not available for this location')){\n return `${values[field]} service is not available. Please choose another service type.`\n }\n }\n\n return errorMsg\n}\n","import React from 'react';\nimport { getIn } from 'formik';\nimport {\n Input,\n Form as F,\n Select,\n} from 'antd';\nimport {translateErrorMsg} from '../util';\nimport _ from 'lodash';\n\nexport const FormField = (props) => {\n const {inputType, label, field, resetFieldError, draftOrder, inputProps, formikProps} = props;\n const {errors, setFieldValue} = formikProps\n\n let fieldErrors = []\n if (draftOrder && draftOrder.validation_result){\n const serverErrors = getIn(draftOrder.validation_result.errors, field.name)\n if(serverErrors){\n fieldErrors = fieldErrors.concat(serverErrors.map(e => translateErrorMsg(field.name, e, draftOrder)))\n }\n }\n\n const clientError = getIn(errors, field.name)\n if(clientError){\n fieldErrors.push(translateErrorMsg(field.name, clientError, draftOrder))\n }\n\n const onInputChange = (field) => {\n if(!_.isEmpty(draftOrder.validation_result)) {\n if(!_.isEmpty(draftOrder.validation_result.errors)) {\n resetFieldError(field.name);\n }\n }\n };\n\n if(inputType === 'select'){\n const {options} = props\n const {name, onBlur, value} = field\n\n return (\n 0 ? 'error' : ''}\n help={fieldErrors.join(',')}>\n {setFieldValue(name, val); onInputChange(field)}} onBlur={onBlur} defaultValue={value} {...inputProps}>\n {options.map(option => ({option.label} ))}\n \n \n )\n }\n return (\n 0 ? 'error' : ''}\n help={fieldErrors.join(',')}>\n \n {\n draftOrder.items && draftOrder.items.map((item, index) => (\n \n \n {({field}) => (\n \n \n \n {({field}) => (\n \n \n \n {({field}) => (\n \n \n \n {({field}) => (\n \n \n \n {({field}) => ( itemCategories ?\n ({label: i, value: i})),\n label: 'Item Category'}} />\n : Loading
\n )}\n \n \n
\n ))\n }\n \n )\n}\n","import { useEffect } from 'react'\nimport { useFetch } from 'use-http'\n\nconst token = localStorage.getItem('token')\n\nconst useServices = (secretKey) => {\n const {data, loading, get} = useFetch(\n `/api/order/service/?${new URLSearchParams({\n secret_key: secretKey,\n new: true\n })}`,\n {\n data: [],\n headers: {\n Authorization: `Token ${token}`\n }\n }\n )\n\n useEffect(() => {\n if (secretKey) {\n get()\n }\n }, [secretKey, get])\n\n return [data, loading]\n}\n\nexport default useServices","import React, { useState, useEffect, useRef, useMemo } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { Row, Col, DatePicker } from \"antd\";\nimport { Select, Form as F } from \"antd\";\n\nimport { fetchAllCountries } from \"../../../actions/orderActions\";\n\nimport useServiceDef from \"../../orderSubmitBulk/hooks/useServiceDef\";\nimport useServices from \"../../orderSubmit/hooks/useServices\";\nimport useStoreAddresses from \"../../shopifyOrders/hooks/useStoreAddresses\";\n\nexport const getDropoffOptions = (\n serviceDefinitions,\n origin,\n destination,\n agentApplicationName,\n serviceType = \"Dropoff\"\n) => {\n console.log(\"asdfasf\", serviceType);\n let exclusive = serviceDefinitions.filter(\n (serviceDef) =>\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === serviceType &&\n serviceDef.exclusive_agents.includes(agentApplicationName)\n );\n\n if (exclusive.length > 0) {\n return exclusive;\n }\n\n return serviceDefinitions.filter(\n (def) =>\n origin === def.origin_country &&\n destination === def.destination_country &&\n def.service_type === serviceType\n );\n};\n\nexport const getFilteredServiceDefinitions = (\n serviceDefinitions,\n agentApplicationName,\n origin,\n destination,\n serviceType,\n dropoffId\n) => {\n let exclusive = serviceDefinitions.filter(\n (serviceDef) =>\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === serviceType &&\n serviceDef.exclusive_agents.includes(agentApplicationName) &&\n (dropoffId ? serviceDef.dropoff_id === dropoffId : true)\n );\n if (exclusive.length > 0) {\n return exclusive;\n } else {\n return serviceDefinitions.filter(\n (serviceDef) =>\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === serviceType &&\n (dropoffId ? serviceDef.dropoff_id === dropoffId : true)\n );\n }\n};\n\nconst PickupAddressSelector = ({\n originCountry,\n onChange,\n selectedPickup,\n defaultPickupPointId,\n errors,\n pickupDate,\n onPickupDateChange,\n}) => {\n const [addresses] = useStoreAddresses();\n\n const onSelectChange = (selectedPickupPointId) => {\n const selectedAddress = addresses.filter(\n (a) => a.pickup_point_id === parseInt(selectedPickupPointId, 10)\n )[0];\n\n onChange(selectedAddress);\n };\n\n return (\n <>\n \n \n {addresses\n .filter((a) => a.pickup_point_country === originCountry)\n .map((a, i) => (\n \n {a.pickup_point_name} - {a.pickup_point_address}\n \n ))}\n \n \n \n \n \n \n \n );\n};\n\nconst DropoffSelector = ({\n originCountry,\n onChange,\n selectedDropoffService,\n dropOffServices,\n defaultDropoffId,\n errors,\n}) => {\n const onSelectChange = (selectedDropoffServiceId) => {\n const selectedService = dropOffServices.filter(\n (def) => def.dropoff_id === selectedDropoffServiceId\n )[0];\n onChange(selectedService);\n };\n\n return (\n \n \n {dropOffServices.map((def, i) => (\n \n {def.dropoff_address}\n \n ))}\n \n \n \n );\n};\n\nexport const ServiceSelector = ({\n originCountry,\n destinationCountry,\n onServiceChange,\n defaultServiceType,\n defaultPickupPointId,\n defaultDropoffId,\n errors,\n pickupDate,\n onPickupDateChange,\n onPickupCountryChange,\n}) => {\n const dispatch = useDispatch();\n const hasMounted = useRef(false);\n const { secretKey, agentApplicationName } = useSelector((state) => {\n if (state.shipperDetails && state.shipperDetails.shipperDetails) {\n return {\n secretKey:\n state.shipperDetails.shipperDetails.agent_application_secret_key,\n agentApplicationName: state.shipperDetails.shipperDetails.shipper_name,\n };\n }\n return { secretKey: null, agentApplicationName: \"\" };\n });\n\n const serviceDefFilters = useMemo(() => ({\n origin_countries: originCountry,\n destination_countries: destinationCountry\n }), [originCountry, destinationCountry])\n const [serviceDefinitions, isServicedefinitionLoading] = useServiceDef(\n secretKey,\n serviceDefFilters\n );\n console.log(serviceDefinitions)\n\n const dropOffServices = getDropoffOptions(\n serviceDefinitions,\n originCountry,\n destinationCountry,\n agentApplicationName\n );\n const [serviceType, setServiceType] = useState(defaultServiceType);\n const [pickupCountry, setPickupCountry] = useState(originCountry);\n const [selectedPickup, setSelectedPickup] = useState();\n const [selectedDropoff, setSelectedDropoff] = useState();\n\n const serviceTypes = useMemo(() => {\n const services = serviceDefinitions\n .filter(\n (def) =>\n pickupCountry === def.origin_country &&\n destinationCountry === def.destination_country\n )\n .map((serviceDef) => serviceDef.service_type)\n const uniqueServiceTypes = [...new Set(services)]\n return uniqueServiceTypes\n }, [destinationCountry, pickupCountry, serviceDefinitions])\n\n const { countries } = useSelector((state) => ({\n countries: state.order.countries,\n }));\n\n useEffect(() => {\n // To not run on first mount\n if (!hasMounted.current) {\n hasMounted.current = true;\n return;\n }\n\n let filteredServiceDef = [];\n let serviceResult;\n\n if (serviceType === \"Pickup\" && selectedPickup) {\n filteredServiceDef = getFilteredServiceDefinitions(\n serviceDefinitions,\n agentApplicationName,\n originCountry,\n destinationCountry,\n serviceType\n );\n }\n\n if (serviceType === \"Dropoff\" && selectedDropoff) {\n filteredServiceDef = getFilteredServiceDefinitions(\n serviceDefinitions,\n agentApplicationName,\n originCountry,\n destinationCountry,\n serviceType,\n selectedDropoff.dropoff_id\n );\n }\n\n if (filteredServiceDef.length < 1 && (selectedPickup || selectedDropoff)) {\n serviceResult = {\n hasService: false,\n serviceType: null,\n serviceId: null,\n serviceDefinition: null,\n };\n } else if (filteredServiceDef.length === 1) {\n const serviceDef = filteredServiceDef[0];\n serviceResult = {\n hasService: true,\n serviceType: serviceType,\n serviceId: serviceDef.service_id,\n serviceDefinition: serviceDef,\n selectedPickup: selectedPickup,\n };\n } else {\n serviceResult = {\n hasService: false,\n serviceType: serviceType,\n serviceId: null,\n serviceDefinition: null,\n };\n }\n\n onServiceChange(originCountry, destinationCountry, serviceResult);\n }, [serviceType, selectedPickup, selectedDropoff]);\n\n const onServiceTypeChange = (val) => {\n setServiceType(val);\n if (val === \"Pickup\") {\n setSelectedDropoff(null);\n } else if (val === \"Dropoff\") {\n setSelectedPickup(null);\n } else {\n //For custmos clearance\n setSelectedDropoff(null);\n setSelectedPickup(null);\n }\n };\n\n const onCountryChange = (val) => {\n setPickupCountry(val);\n onPickupCountryChange(val);\n setServiceType(undefined);\n setSelectedDropoff(undefined);\n setSelectedPickup(undefined);\n };\n\n useEffect(() => {\n dispatch(fetchAllCountries());\n }, []);\n\n return (\n \n \n \n {countries &&\n countries.map((country, i) => (\n \n {country}\n \n ))}\n \n \n \n \n \n {serviceTypes.map((serviceType, i) => (\n \n {serviceType}\n \n ))}\n \n \n \n {serviceType === \"Pickup\" && (\n
\n );\n};\n","import React from 'react';\nimport moment from 'moment';\nimport {\n Card,\n Row, Col,\n Descriptions as Desc\n} from 'antd';\nimport { ServiceSelector } from './ServiceSelector'\n\nconst LocationViewer = ({ values }) => {\n const title =\n values.service_type === \"Dropoff\" ? \"Dropoff Location\" : \"Pickup Location\";\n return (\n \n {values.pickup_contact_name} \n \n {values.pickup_contact_number}\n \n {values.pickup_address} \n {values.pickup_city} \n {values.pickup_postal} \n {values.pickup_state} \n {values.pickup_country} \n \n );\n};\n\nexport const EmbeddedServiceSelector = ({ formikProps }) => {\n const { setFieldValue, values, errors } = formikProps;\n\n const onServiceChange = (origin, dest, serviceResult) => {\n if (serviceResult.hasService) {\n setFieldValue(\"service_type\", serviceResult.serviceType);\n setFieldValue(\"service_id\", serviceResult.serviceId);\n if (serviceResult.serviceType === \"Dropoff\") {\n setFieldValue(\n \"extra_data.dropoff_id\",\n serviceResult.serviceDefinition.dropoff_id\n );\n setFieldValue(\"extra_data.pickup_point_id\", null);\n setFieldValue(\"pickup_date\", null);\n setFieldValue(\n \"pickup_contact_name\",\n serviceResult.serviceDefinition.dropoff_point_contact_person\n );\n setFieldValue(\n \"pickup_contact_number\",\n serviceResult.serviceDefinition.dropoff_point_number\n );\n setFieldValue(\n \"pickup_address\",\n serviceResult.serviceDefinition.dropoff_address\n );\n setFieldValue(\n \"pickup_postal\",\n serviceResult.serviceDefinition.dropoff_postal\n );\n setFieldValue(\n \"pickup_state\",\n serviceResult.serviceDefinition.dropoff_point_state\n );\n setFieldValue(\n \"pickup_city\",\n serviceResult.serviceDefinition.dropoff_point_city\n );\n setFieldValue(\n \"pickup_province\",\n serviceResult.serviceDefinition.dropoff_point_province\n );\n } else if (serviceResult.serviceType === \"Pickup\") {\n setFieldValue(\"extra_data.dropoff_id\", null);\n setFieldValue(\n \"extra_data.pickup_point_id\",\n serviceResult.selectedPickup.pickup_point_id\n );\n setFieldValue(\n \"pickup_contact_name\",\n serviceResult.selectedPickup.pickup_point_contact_person\n );\n setFieldValue(\n \"pickup_contact_number\",\n serviceResult.selectedPickup.pickup_point_number\n );\n setFieldValue(\n \"pickup_address\",\n serviceResult.selectedPickup.pickup_point_address\n );\n setFieldValue(\n \"pickup_postal\",\n serviceResult.selectedPickup.pickup_point_postal\n );\n setFieldValue(\n \"pickup_state\",\n serviceResult.selectedPickup.pickup_point_state\n );\n setFieldValue(\n \"pickup_city\",\n serviceResult.selectedPickup.pickup_point_city\n );\n setFieldValue(\n \"pickup_province\",\n serviceResult.selectedPickup.pickup_point_province\n );\n } else {\n setFieldValue(\"extra_data.dropoff_id\", null);\n setFieldValue(\"extra_data.pickup_point_id\", null);\n setFieldValue(\"pickup_date\", null);\n setFieldValue(\"pickup_contact_name\", null);\n setFieldValue(\"pickup_contact_number\", null);\n setFieldValue(\"pickup_address\", null);\n setFieldValue(\"pickup_postal\", null);\n setFieldValue(\"pickup_state\", null);\n setFieldValue(\"pickup_city\", null);\n setFieldValue(\"pickup_province\", null);\n }\n } else {\n setFieldValue(\"extra_data.dropoff_id\", null);\n setFieldValue(\"extra_data.pickup_point_id\", null);\n setFieldValue(\"service_type\", serviceResult.serviceType);\n setFieldValue(\"service_id\", null);\n setFieldValue(\"pickup_date\", null);\n setFieldValue(\"pickup_contact_name\", null);\n setFieldValue(\"pickup_contact_number\", null);\n setFieldValue(\"pickup_address\", null);\n setFieldValue(\"pickup_postal\", null);\n setFieldValue(\"pickup_state\", null);\n setFieldValue(\"pickup_city\", null);\n setFieldValue(\"pickup_province\", null);\n }\n };\n\n const onPickupDateChange = (val) => {\n if (val) {\n setFieldValue(\"pickup_date\", val.format(\"YYYY-MM-DD\"));\n } else {\n setFieldValue(\"pickup_date\", val);\n }\n };\n\n const onPickupCountryChange = (val) => {\n setFieldValue(\"pickup_country\", val);\n setFieldValue(\"extra_data.dropoff_id\", null);\n setFieldValue(\"extra_data.pickup_point_id\", null);\n setFieldValue(\"service_type\", null);\n setFieldValue(\"service_id\", null);\n setFieldValue(\"pickup_date\", null);\n setFieldValue(\"pickup_contact_name\", null);\n setFieldValue(\"pickup_contact_number\", null);\n setFieldValue(\"pickup_address\", null);\n setFieldValue(\"pickup_postal\", null);\n setFieldValue(\"pickup_state\", null);\n setFieldValue(\"pickup_city\", null);\n setFieldValue(\"pickup_province\", null);\n };\n // const pickUpPointId = () => {\n // return JSON.parse(values.extra_data).pickup_point_id\n // }\n // const dropOffPointId = () => {\n // return JSON.parse(values.extra_data).dropoff_id\n // }\n return (\n \n \n
\n \n );\n};\n","import React, { useEffect, useRef } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { Formik, Form, Field } from \"formik\";\nimport { withRouter } from \"react-router-dom\";\nimport * as Yup from \"yup\";\nimport _ from \"lodash\";\n\nimport {\n Card as AntCard,\n Icon,\n Row,\n Col,\n Button,\n Form as F,\n Alert,\n Radio,\n message,\n Tooltip,\n} from \"antd\";\n\nimport {\n getDraftOrderDetail,\n validateOrder,\n resetDraftOrderErrors,\n} from \"./store\";\nimport { translateErrorMsg, translateErrorField } from \"./util\";\nimport { StatusTag } from \"./statusTag\";\nimport { FormField } from \"./components/input\";\nimport { DraftOrderItems } from \"./components/DraftOrderItems\";\nimport { EmbeddedServiceSelector } from \"./components/EmbeddedServiceSelector\";\nimport { COUNTRY_TO_CURRENCY } from \"../../utils/currency\";\n\nconst DraftOrderItemSchema = Yup.object().shape({\n item_category: Yup.string()\n .required(\n \"Please select the appropriate item category in the dropdown box available\"\n )\n .nullable(),\n item_description: Yup.string().required(\"Required\").nullable(),\n item_price_currency: Yup.string().required(\"Required\").nullable(),\n item_price_value: Yup.number().required(\"Required\").nullable(),\n item_qty: Yup.number().required(\"Required\").nullable(),\n item_sku: Yup.string().nullable(),\n});\n\nconst DraftOrderSchema = Yup.object().shape({\n consignee_address: Yup.string().required(\"Required\").nullable(),\n consignee_country: Yup.string().required(\"Required\").nullable(),\n consignee_name: Yup.string().required(\"Required\").nullable(),\n consignee_number: Yup.string().required(\"Required\").nullable(),\n consignee_postal: Yup.string().required(\"Required\").nullable(),\n consignee_state: Yup.string().required(\"Required\").nullable(),\n order_height: Yup.number().required(\"Required\").nullable(),\n order_length: Yup.number().required(\"Required\").nullable(),\n order_weight: Yup.number().required(\"Required\").nullable(),\n order_width: Yup.number().required(\"Required\").nullable(),\n service_id: Yup.number().required(\"Please select a location\").nullable(),\n // We use this message as the 'Required' validation message as it will only ever be null\n // as a result of not finding any matching service because it should default to Pickup\n service_type: Yup.string()\n .required(\n \"The service type is not available for this location. Please choose a different one.\"\n )\n .nullable(),\n cod_amt_to_collect: Yup.number()\n .nullable()\n .when(\"payment_type\", (payment_type, schema) =>\n payment_type === \"cod\" ? schema.required(\"Required\") : schema\n ),\n items: Yup.array().of(DraftOrderItemSchema),\n});\n\nexport const ValidationResult = ({ validationResult }) => {\n const isDev =\n window.location.origin.includes(\"localhost\") ||\n window.location.origin.includes(\"staging\");\n if (isDev && validationResult && validationResult.errors) {\n return (\n \n {JSON.stringify(validationResult.errors, null, \"\\t\")} \n \n );\n }\n return null;\n};\n\nconst ErrorAlert = ({\n validationResult,\n formErrors,\n submissionErrors,\n values,\n}) => {\n let errors = {};\n if (validationResult && validationResult.errors) {\n // each entry in `errors` is a list of string.\n // or a list of object, each with a list of string\n for (const k in validationResult.errors) {\n if (k in errors) {\n Array.prototype.push.apply(errors[k], validationResult.errors[k]);\n } else {\n errors[k] = validationResult.errors[k];\n }\n }\n }\n\n if (formErrors) {\n for (const k in formErrors) {\n // forErrors[k] is either a string, or a list of object, or an object\n const keyError = formErrors[k];\n if (typeof keyError === \"string\") {\n if (k in errors) {\n errors[k] = Object.assign([], errors[k]);\n errors[k].push(keyError);\n } else {\n errors[k] = [keyError];\n }\n } else if (Array.isArray(keyError)) {\n keyError.forEach((entry, i) => {\n if (typeof entry === \"object\") {\n for (const innerKey in entry) {\n const errorKey = `${k} ${i + 1} - ${innerKey}`;\n errors[errorKey] = [entry[innerKey]];\n }\n }\n });\n }\n }\n }\n\n if (submissionErrors) {\n for (const k in submissionErrors) {\n if (k in errors) {\n Array.prototype.push.apply(errors[k], submissionErrors[k]);\n } else {\n errors[k] = submissionErrors[k];\n }\n }\n }\n\n if (_.isEmpty(errors)) {\n return null;\n }\n\n if (\"items\" in errors) {\n let itemErrorsCount = 0;\n\n errors[\"items\"].forEach((item_errors, i) => {\n if (Array.isArray(item_errors)) {\n for (const field in item_errors) {\n errors[`Items ${i + 1} - ${field}`] = item_errors[field];\n }\n itemErrorsCount += 1;\n } else if (typeof item_errors === \"object\") {\n for (const field in item_errors) {\n errors[`Items ${i + 1} - ${field}`] = item_errors[field];\n }\n itemErrorsCount += 1;\n }\n });\n\n //To track if all the item errors are related to item data, and not the `items`\n //property on the parent form, e.g. \"Items are empty\", in which case we want to delete the\n //errors on the parent field and display them on the individual items instead.\n if (itemErrorsCount === errors[\"items\"].length) {\n delete errors.items;\n }\n }\n\n const errorContent = (\n \n {Object.keys(errors).map((field, i) => {\n if (Array.isArray(errors[field])) {\n return (\n \n {translateErrorField(field)}: {\" \"}\n {`${errors[field]\n .map((e) => translateErrorMsg(field, e, values))\n .join(\",\")}`}\n \n );\n } else {\n return Object.keys(errors[field]).map((innerField, innerIndex) => {\n let fieldName = `${field} - ${innerField}`;\n let errorMsg = `${translateErrorMsg(\n fieldName,\n errors[field][innerField],\n values\n )}`;\n return (\n \n {translateErrorField(fieldName)}: {errorMsg}\n \n );\n });\n }\n })}\n \n );\n\n return (\n \n {props.children}\n \n );\n};\n\nexport const ViewDraftOrderDetails = withRouter((props) => {\n const draftOrderId = parseInt(props.match.params.id, 10);\n const dispatch = useDispatch();\n const formRef = useRef();\n\n // To validate on load\n useEffect(() => {\n if (formRef.current) {\n formRef.current.getFormikActions().validateForm();\n }\n });\n\n const secretKey = useSelector((state) => {\n if (state.shipperDetails && state.shipperDetails.shipperDetails) {\n return state.shipperDetails.shipperDetails.agent_application_secret_key;\n }\n return null;\n });\n\n useEffect(() => {\n if (secretKey) {\n dispatch(getDraftOrderDetail(secretKey, { orderId: draftOrderId }));\n }\n }, [secretKey, draftOrderId, dispatch]);\n\n const { draftOrder, isLoading, isValidating, validationErrors } = useSelector(\n (state) => {\n return {\n draftOrder: state.draftOrders.detail.data,\n isLoading: state.draftOrders.detail.loading,\n isValidating: state.draftOrders.isValidating,\n validationErrors: state.draftOrders.validationErrors,\n };\n }\n );\n\n if (isLoading) {\n return Loading...
;\n }\n\n const submit = (values, actions) => {\n dispatch(\n validateOrder(secretKey, {\n orderId: draftOrderId,\n params: values,\n callback: (result) => {\n if (result.status === \"READY_TO_SHIP\") {\n message.success(\"Order is now moved to Ready to Ship!\", 1, () =>\n props.history.goBack()\n );\n }\n },\n })\n );\n };\n const resetFieldError = (fieldName) => {\n if (draftOrder.validation_result.errors[fieldName]) {\n dispatch(resetDraftOrderErrors(fieldName));\n }\n };\n\n return (\n \n
\n {(formikProps) => (\n \n )}\n \n { \n {successCount} Shipments created successfully! \n \n You may go to Manage Orders to print your shipping labels.
\n \n \n \n Submit new shipments\n \n \n \n Go to Manage Orders\n \n \n
\n \n
\n )\n}\n\nconst OrderSummary = ({lanesCounter}) => {\n return (\n Summary}\n dataSource={Object.entries(lanesCounter)}\n renderItem={([lane, count]) => {\n const [origin, dest] = lane.split('-')\n return ({origin} to {dest} - {count} shipments )\n }}\n />\n )\n}\n\nexport const CreateShipments = (props) => {\n const dispatch = useDispatch()\n const payload = decodeSelectedOrders(props.match.params.ids)\n const draftOrderIds = payload.orderIds\n\n const [hasResult, setHasResult] = useState(false)\n\n const secretKey = useSelector( (state) => {\n if(state.shipperDetails && state.shipperDetails.shipperDetails){\n return state.shipperDetails.shipperDetails.agent_application_secret_key;\n }\n return null;\n });\n\n\n useEffect(() => {\n dispatch(resetCreateShipments())\n }, [dispatch])\n\n const {isCreatingShipment, result} = useSelector((state) => {\n return {\n isCreatingShipment: state.draftOrders.createShipments.isLoading,\n result: state.draftOrders.createShipments.result,\n };\n });\n\n const onShipmentsCreated = () => {\n setHasResult(true)\n }\n\n const onCreateClick = () => {\n const params = {\n 'draft_order_ids': draftOrderIds,\n }\n dispatch(createShipments(secretKey, {params, callback: onShipmentsCreated}))\n }\n\n const CreateShipmentButton = () => (\n 0)}\n loading={isCreatingShipment}>\n Submit to Janio\n \n )\n\n return (\n \n
\n \n \n
\n
Back to shipments \n \n
\n \n \n
Before clicking Submit to Janio, you hereby agree to the below policy and declaration: \n \n \n
Shipment Reweights Policy \n
\n I confirm that the declared weight and dimensions in this form are correct and accurate.\n Why is this needed? \n \n
\n
\n
Order Value Declaration \n
\n I confirm that the declared order value is correct, complete, and accurate.\n Why is this needed? \n \n
\n
\n
\n \n
{moment(date).format('DD/MM/YY HHmm[HRS]')} )\n },\n];\n\nexport const ManageChannels = ({shipperDetails}) => {\n const dispatch = useDispatch()\n const [secretKey] = useSecretKey()\n\n const channelsStore = useSelector((state) => {\n return state.channels.entries\n });\n\n useEffect(() => {\n if(secretKey && !channelsStore.loaded){\n dispatch(getChannels(secretKey, {}));\n }\n }, [secretKey]);\n\n return (\n \n
\n Add Store \n \n
\n
\n
\n
\n Back to stores \n \n
\n
\n {channelsLink.map((channel) => (\n \n \n \n \n \n ))}\n
\n
Edit \n \n );\n }\n }\n];\n\nexport const ManageLaneConfigs = () => {\n const dispatch = useDispatch()\n const [secretKey] = useSecretKey()\n\n const laneConfigsStore = useSelector((state) => {\n return state.laneConfigs.entries\n });\n\n useEffect(() => {\n if(secretKey && !laneConfigsStore.loaded){\n dispatch(fetchLaneConfigs(secretKey));\n }\n }, [dispatch, laneConfigsStore.loaded, secretKey]);\n\n return (\n \n
\n Add Lane Config \n \n
\n
\n
\n \n formikProps.setFieldValue('origin_country', val)} >\n {\n (countries || []).map((country) => (\n \n {country}\n )\n )\n }\n \n \n \n \n formikProps.setFieldValue('destination_country', val)} >\n {\n (countries || []).map((country) => (\n \n {country}\n )\n )\n }\n \n \n \n { formikProps.values['origin_country'] && formikProps.values['destination_country'] &&\n \n formikProps.setFieldValue('service_type', val)}>\n {\n serviceTypes.map((serviceType, i) => (\n {serviceType} \n ))\n }\n \n \n \n }\n { formikProps.values['service_type'] === 'Dropoff' &&\n \n formikProps.setFieldValue('dropoff_point_id', val)} >\n {\n (getDropoffOptions(serviceDefinitions, formikProps.values['origin_country'], formikProps.values['destination_country'], agentApplicationName)).map((def, i) => (\n \n {def.dropoff_address}\n \n ))\n }\n \n \n \n }\n { formikProps.values['service_type'] === 'Pickup' &&\n \n formikProps.setFieldValue('pickup_point_id', val)} >\n {\n addresses\n .filter(a => a.pickup_point_country === formikProps.values['origin_country'])\n .map((a, i) => (\n \n {a.pickup_point_name} - {a.pickup_point_address}\n \n )\n )\n }\n \n \n \n }\n
\n )\n}\n\nconst ErrorAlert = ({errors}) => {\n const messages = []\n Object.values(errors).forEach( error => {\n error.forEach((e) => messages.push(e))\n })\n return (\n \n {messages.map((m, i) => {m} )}\n } />\n )\n}\n\nexport const LaneConfigForm = ({laneConfig, onSubmit, isSubmitting, isLoading, errors}) => {\n const formRef = useRef();\n const dispatch = useDispatch()\n const state = useSelector( state => {\n return {\n secretKey: state.shipperDetails?.shipperDetails?.agent_application_secret_key,\n agentApplicationName: state.shipperDetails?.shipperDetails?.shipper_name,\n countries: state.order?.countries\n }\n })\n\n useEffect(() => {\n dispatch(fetchAllCountries())\n }, [dispatch])\n const [serviceDefinitions, isServicedefinitionLoading] = useServiceDef(state.secretKey)\n const [addresses] = useStoreAddresses()\n\n const submit = (val) => {\n let filteredServiceDef = getFilteredServiceDefinitions(\n serviceDefinitions,\n state.agentApplicationName,\n val['origin_country'],\n val['destination_country'],\n val['service_type'],\n val['dropoff_postal_id']\n )\n\n if (filteredServiceDef.length === 1){\n const serviceDef = filteredServiceDef[0]\n const params = {\n ...val,\n service_id: serviceDef.service_id,\n }\n onSubmit(params)\n }\n else{\n console.log('NOT')\n }\n }\n\n if (isLoading || isServicedefinitionLoading || !state.countries){\n return (\n \n
\n )\n }\n\n return (\n \n {(formikProps) => (\n \n )}\n \n )\n}\n","// @ts-nocheck\nimport React, { useEffect } from \"react\";\nimport { Table, Switch, Button, Modal,Card, Tag, Row, Col, Tabs} from 'antd'\nimport { Link } from 'react-router-dom';\nimport { useSelector, useDispatch } from 'react-redux'\nimport { useSecretKey } from '../../auth/useSecretKey'\nimport { fetchShipmentRulesList, performToggleModal,performToggleModalAlert, updateFormStatus, deleteFormData, updateShipmentRulesOrder, setitemCategoryDataList, setParcelDataList, setServiceDataList } from './store'\n\nimport { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\nimport { MenuOutlined } from '@ant-design/icons';\n\nconst dateFormat = (date)=>{\n let today = new Date(date);\n let dd = String(today.getDate()).padStart(2, '0');\n let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!\n let yyyy = today.getFullYear();\n\n return mm + '/' + dd + '/' + yyyy;\n}\n\nconst DragHandle = sortableHandle(() => (\n {dateFormat(date)}
)\n },\n {\n title: 'Rule status',\n dataIndex: 'is_active',\n render: tag => (\n {tag?\"active\":\"inactive\"} \n ),\n },\n {\n title: 'Rule Type',\n dataIndex: 'action_type',\n render: type => (\n {type === 'SERVICE_TYPE' ? \"Service Type\" : type === 'DIMENSIONS' ? 'Dimensions Rule' : 'Item Category Rule'} \n ),\n },\n {\n title: 'Switch',\n dataIndex: 'switch',\n render: (text, record)=>(\n {\n let new_record = {...record}\n new_record.is_active = value\n dispatch(updateFormStatus(secretKey, record.id, new_record))\n }} checked={record.is_active}/>\n )\n },\n {\n title: 'Action',\n dataIndex: 'action',\n render: (text, record)=>(\n \n \n Edit \n {dispatch(deleteFormData(secretKey, record.id))}}>Delete \n
\n )\n }\n ];\n\n const clearModalData = () => {\n if(shipmentRuleStore.dashboard.isModalVisibleAlert) {\n dispatch(performToggleModalAlert())\n }\n }\n\n const showModal = (event) => {\n if(shipmentRuleStore.dashboard.isModalVisibleAlert) {\n dispatch(performToggleModalAlert())\n }\n dispatch(performToggleModal())\n };\n\n useEffect(() => {\n if(secretKey && !shipmentRuleStore.loading){\n dispatch(fetchShipmentRulesList(secretKey));\n }\n if(props.history.action === 'PUSH') {\n localStorage.removeItem('activeKey')\n }\n }, [dispatch, props.history.action, secretKey, shipmentRuleStore.loading]);\n\n const callbackFn = (key) => {\n console.log('keykey', key);\n localStorage.setItem('activeKey', key)\n }\n \n return (\n \n
\n Add shipment rule \n
\n
\n \n \n {/* {shipmentRuleStore.dashboard.multiSelectRecords.length>0 && segregateDataArrWithIndex[1][0] !== undefined && segregateDataArrWithIndex[1][0].action_type === shipmentRuleStore.dashboard.multiSelectRecords[0].action_type? 0 ? shipmentRuleStore.dashboard.serviceDataList : segregateDataArrWithIndex[1]}\n columns={COLUMNS}\n loading={shipmentRuleStore.dashboard.loading}\n rowKey=\"index\"\n components={{\n body: {\n wrapper: DraggableContainer,\n row: DraggableBodyRowOne,\n },\n }}\n />\n \n \n {/* {shipmentRuleStore.dashboard.multiSelectRecords.length>0 && segregateDataArrWithIndex[0][0] !== undefined && segregateDataArrWithIndex[0][0].action_type === shipmentRuleStore.dashboard.multiSelectRecords[0].action_type? 0 ? shipmentRuleStore.dashboard.itemCategoryDataList : segregateDataArrWithIndex[0]}\n columns={COLUMNS}\n loading={shipmentRuleStore.dashboard.loading} \n rowKey=\"index\"\n components={{\n body: {\n wrapper: DraggableContainer,\n row: DraggableBodyRowZero,\n },\n }}\n />\n \n \n {/* {shipmentRuleStore.dashboard.multiSelectRecords.length>0 && segregateDataArrWithIndex[2][0] !== undefined && segregateDataArrWithIndex[2][0].action_type === shipmentRuleStore.dashboard.multiSelectRecords[0].action_type? 0 ? shipmentRuleStore.dashboard.parcelDataList : segregateDataArrWithIndex[2]}\n columns={COLUMNS}\n loading={shipmentRuleStore.dashboard.loading}\n rowKey=\"index\"\n components={{\n body: {\n wrapper: DraggableContainer,\n row: DraggableBodyRowTwo,\n },\n }}\n />\n \n \n \n \n
\n \n
\n \n Service Type
\n \n Determine service type based on pickup and destination country.
\n \n \n \n Item Category
\n \n Determine item category based on SKUs or item title.
\n \n \n \n Parcel Dimension
\n \n Determine parcel dimension based on item weight or item quantity.
\n \n \n
\n
\n Service Type Rule \n \n \n
\n \n Item Category Rule \n \n \n
\n \n Parcel Dimension Rule \n \n \n
*/}\n \n
{item} )\n }\n\n const getSourceFieldOptions = ()=>{\n let options = shipmentRuleStore.itemCategoryForm.itemCategorySourceFields\n return Object.keys(options).sort().map((item)=>{item} )\n }\n\n\n const getOperatorOptions = (key)=>{\n let options = shipmentRuleStore.itemCategoryForm.operators[key]\n return Object.keys(options).map((item)=>{item} )\n }\n\n const handleSaveDelete = (event, index)=>{\n if (event.target.name === 'save')\n dispatch(handleSave(formType, index))\n else\n dispatch(handleDelete(formType, index))\n \n }\n\n const submitForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n dispatch(submitItemCategoryForm(secretKey, shipmentRuleStore.itemCategoryForm))\n }\n });\n \n }\n\n const updateForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n dispatch(updateItemCategoryForm(secretKey, shipmentRuleStore.itemCategoryForm.id, shipmentRuleStore.itemCategoryForm))\n }\n });\n }\n const { getFieldDecorator } = props.form;\n\n const conditionRows = ()=>{\n let fields = shipmentRuleStore.itemCategoryForm.rule_source_fields\n \n if(fields[0].source_field_name === '' && document.getElementsByClassName('ant-select-selection-selected-value')[0] !== undefined) {\n document.getElementsByClassName('ant-select-selection-selected-value')[0].innerText = ''\n }\n return fields.map((item, index)=>{\n return \n \n {getFieldDecorator(`source_field_name${index}`,{\n rules: [{ required: true, message: 'This field is required' }], initialValue:item[\"source_field_name\"]\n })(\n handleSourceInputChange(e, \"source_field_name\",index)}>\n {getSourceFieldOptions()}\n \n )}\n \n \n \n {getFieldDecorator(`operator${index}`, {\n rules: [{ required: true, message: 'This field is required' }],initialValue:item[\"operator\"]\n\n })(\n handleSourceInputChange(e, \"operator\", index)}>\n {getOperatorOptions(item['source_field_name'])}\n \n )}\n :null}\n \n \n {getFieldDecorator(`source_field_value${index}`, {\n rules: [\n { required: true, message: 'This field is required' },\n {\n // eslint-disable-next-line no-useless-escape\n pattern: new RegExp(/^[>handleSourceInputChange(e.target.value, \"matches_to_value\", index)}/>\n )}\n :null}\n \n \n {((item.is_saved) || (index>0 && item.source_field_name.length===0))?handleSaveDelete(e, index)} theme=\"outlined\" />:handleSaveDelete(e, index)} >Save }\n :null}\n \n {item.is_saved && fields.length > 1 ? OR
\n })\n }\n\n const showModalAlert = (event) => {\n\n dispatch(performToggleModalAlert())\n }\n\n return (\n \n \n\n Back to Shipment Rules \n\n {/* {isUpdateFormFlag?\"Update\":\"Create\"} */}\n\n Item Category Rule \n \n {getFieldDecorator('rule-name', {\n rules: [{ required: true, message: 'This field is required' }], initialValue:shipmentRuleStore.itemCategoryForm.rule_name\n })(\n \n \n
\n When (Select the condition) + Add Condition \n Trigger (Assign item to) \n \n \n {getFieldDecorator('target_field_value', {\n rules: [{ required: true, message: 'This field is required' }],initialValue:shipmentRuleStore.itemCategoryForm.rule_target_fields[0].target_value\n })(\n handleTargetInputChange(e, \"target_value\", 0)} disabled={shipmentRuleStore.itemCategoryForm.rule_source_fields[0].is_saved?false:true}>\n {getItemCategoryOptions()}\n \n )}\n \n \n
\n \n Apply to new and existing shipments \n \n isUpdateFormFlag?updateForm(event):submitForm(event)} disabled={shipmentRuleStore.itemCategoryForm.rule_source_fields[0].is_saved>0?false:true}>{isUpdateFormFlag?\"Update\":\"Create\"} rule \n\n Cancel \n \n \n \n All progress in this session will be Lost! \n Cancel \n props.history.goBack()}>Quit \n \n
\n \n \n
\n \n );\n}\n\n\n\nexport const ShipmentRuleItemCategoryForm = F.create({ name: 'Item_category_form' })(ItemCategoryForm)","import React, { useEffect } from \"react\";\nimport {Row, Col, Button, Form as F, Input, Select, Icon, Checkbox, Modal} from 'antd'\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useSecretKey } from '../../auth/useSecretKey';\nimport {addFormCondition, handleSave, handleDelete, handleSourceInput, handleTargetInput, handleInput, submitForm as submitItemCategoryForm, setFormData, updateForm as updateItemCategoryForm, resetFormData, performToggleModal, performToggleModalAlert} from './store'\n\n\nconst ParcelDimension = (props) => {\n const dispatch = useDispatch()\n const [secretKey] = useSecretKey()\n const formType = \"parcelDimensionForm\"\n const shipmentRuleStore = useSelector((state) => {\n return state.shipmentRules\n }); \n const isUpdateFormFlag = props.match.params.id?true:false\n\n useEffect(() => {\n if(!secretKey){\n // dispatch\n console.log('no secret key')\n }\n if (isUpdateFormFlag){\n dispatch(setFormData(secretKey, props.match.params.id))\n \n }else{\n dispatch(resetFormData(formType))\n dispatch(performToggleModal())\n if(shipmentRuleStore.dashboard.isModalVisibleAlert) {\n dispatch(performToggleModalAlert())\n }\n }\n }, [secretKey])\n\n \n\n \n\n const handleSourceInputChange = (event, name, index)=>{\n dispatch(handleSourceInput(formType, event, name, index))\n }\n\n const handleTargetInputChange = (event, name, index)=>{\n dispatch(handleTargetInput(formType, event, name, index))\n }\n\n const handleInputChange = (event)=>{\n dispatch(handleInput(formType, event.target.value, event.target.name))\n }\n\n const handleInputCheck = (event)=>{\n dispatch(handleInput(formType, event.target.checked, event.target.name))\n }\n\n const addConditionChange = (event)=>{\n dispatch(addFormCondition(formType))\n }\n\n const getSourceFieldOptions = ()=>{\n let options = shipmentRuleStore[formType].itemCategorySourceFields\n return Object.keys(options).map((item)=>{item} )\n }\n\n const getOperatorOptions = (key)=>{\n let options = shipmentRuleStore[formType].operators[key]\n return Object.keys(options).map((item)=>{item} )\n }\n\n const handleSaveDelete = (event, index)=>{\n if (event.target.name === 'save')\n dispatch(handleSave(formType, index))\n else\n dispatch(handleDelete(formType, index))\n }\n\n const submitForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n dispatch(submitItemCategoryForm(secretKey, shipmentRuleStore[formType]))\n }\n });\n \n }\n\n const updateForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n dispatch(updateItemCategoryForm(secretKey, shipmentRuleStore[formType].id, shipmentRuleStore[formType]))\n }\n });\n }\n\n \n const { getFieldDecorator } = props.form;\n\n const conditionRows = ()=>{\n let fields = shipmentRuleStore[formType].rule_source_fields\n\n return fields.map((item, index)=>{\n return \n \n {getFieldDecorator(`source_field_name${index}`,{\n rules: [{ required: true, message: 'This field is required' }], initialValue:item[\"source_field_name\"]\n })(\n handleSourceInputChange(e, \"source_field_name\",index)}>\n {getSourceFieldOptions()}\n \n )}\n \n \n \n {getFieldDecorator(`operator${index}`, {\n rules: [{ required: true, message: 'This field is required' }],initialValue:item[\"operator\"]\n\n })(\n handleSourceInputChange(e, \"operator\", index)}>\n {getOperatorOptions(item['source_field_name'])}\n \n )}\n :null}\n \n \n {getFieldDecorator(`source_field_value${index}`, {\n rules: [\n { required: true, message: 'This field is required' },\n shipmentRuleStore[formType].sourceFieldLabel[item[\"source_field_name\"]] === 'Weight' ?\n {\n pattern: new RegExp(/^[0-9]\\d{0,9}(\\.\\d{1,2})?%?$/) || new RegExp(/^\\d*\\.?\\d+$/),\n message: \"Only positive values upto 2 decimal places is allowed.\"\n } : \n {\n pattern: new RegExp(/^(0|\\+?[1-9]\\d*)$/),\n message: \"Only positive value is allowed.\"\n }\n ],\n initialValue:item[\"matches_to_value\"]\n })(\n :null}\n \n \n {item.is_saved?handleSaveDelete(e, index)} theme=\"outlined\" />:handleSaveDelete(e, index)} >Save }\n :null}\n \n {item.is_saved && fields.length > 1 ? OR
\n })\n }\n\n const showModalAlert = (event) => {\n\n dispatch(performToggleModalAlert())\n }\n const initialValueLengthFn = () => {\n let initialValueLength = shipmentRuleStore[formType].rule_target_fields.filter(item => item.target_name === 'draft_order.order_length')\n return initialValueLength[0].target_value\n }\n const initialValueWidthFn = () => {\n let initialValueWidth = shipmentRuleStore[formType].rule_target_fields.filter(item => item.target_name === 'draft_order.order_width')\n return initialValueWidth[0].target_value\n }\n const initialValueHeightFn = () => {\n let initialValueHeight = shipmentRuleStore[formType].rule_target_fields.filter(item => item.target_name === 'draft_order.order_height')\n return initialValueHeight[0].target_value\n }\n const lengthIndex = () => {\n let x = shipmentRuleStore[formType].rule_target_fields\n let index = x.findIndex(x => x.target_name === 'draft_order.order_length')\n\n return index\n }\n const widthIndex = () => {\n let x = shipmentRuleStore[formType].rule_target_fields\n let index = x.findIndex(x => x.target_name === 'draft_order.order_width')\n\n return index\n }\n const heightIndex = () => {\n let x = shipmentRuleStore[formType].rule_target_fields\n let index = x.findIndex(x => x.target_name === 'draft_order.order_height')\n\n return index\n }\n const weightIndex = () => {\n let x = shipmentRuleStore[formType].rule_target_fields\n let index = x.findIndex(x => x.target_name === 'draft_order.order_weight')\n\n return index\n }\n\n return (\n\n \n \n Back to Shipment Rules \n\n Parcel Dimension Rule \n \n \n {getFieldDecorator('rule-name', {\n rules: [{ required: true, message: 'This field is required' }], initialValue:shipmentRuleStore[formType].rule_name\n })(\n \n \n
\n When (Select the condition) + Add Condition \n Perform these actions \n \n \n {getFieldDecorator('target_field_value0', {\n rules: [\n { required: true, message: 'This field is required' },\n {\n pattern: new RegExp(/^[0-9]\\d{0,9}(\\.\\d{0,1})?%?$/) || new RegExp(/^\\d*\\.?\\d+$/),\n message: \"Only positive values upto 1 decimal place is allowed.\"\n }\n ],\n initialValue: initialValueLengthFn()\n })(\n \n \n \n {getFieldDecorator('target_field_value1', {\n rules: [\n { required: true, message: 'This field is required' },\n {\n pattern: new RegExp(/^[0-9]\\d{0,9}(\\.\\d{0,1})?%?$/) || new RegExp(/^\\d*\\.?\\d+$/),\n message: \"Only positive values upto 1 decimal place is allowed.\"\n }\n ],\n initialValue: initialValueWidthFn()\n })(\n \n \n \n {getFieldDecorator('target_field_value2', {\n rules: [\n { required: true, message: 'This field is required' },\n {\n pattern: new RegExp(/^[0-9]\\d{0,9}(\\.\\d{0,1})?%?$/) || new RegExp(/^\\d*\\.?\\d+$/),\n message: \"Only positive values upto 1 decimal place is allowed.\"\n }\n ],\n initialValue: initialValueHeightFn()\n })(\n \n \n \n \n \n
\n \n Apply to new and existing shipments \n \n isUpdateFormFlag?updateForm(event):submitForm(event)} disabled={shipmentRuleStore[formType].rule_source_fields[0].is_saved>0?false:true}>{isUpdateFormFlag?\"Update\":\"Create\"} rule \n\n Cancel \n \n \n \n All progress in this session will be Lost! \n Cancel \n props.history.goBack()}>Quit \n \n
\n \n \n
\n \n );\n}\n\n\n\nexport const ShipmentRuleParcelDimensionForm = F.create({ name: 'Item_category_form' })(ParcelDimension)","import React, { useEffect } from \"react\";\nimport {Row, Col, Button, Form as F, Input, Select, Icon, Checkbox, Modal} from 'antd'\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useSecretKey } from '../../auth/useSecretKey';\nimport useCountries from '../../shopifyOrders/hooks/useCountries.js'\nimport useStoreAddresses from '../../shopifyOrders/hooks/useStoreAddresses'\nimport useServiceDef from '../../orderSubmitBulk/hooks/useServiceDef'\nimport { getDropoffOptions, getFilteredServiceDefinitions } from '../../draftOrder/components/ServiceSelector'\nimport { handleSourceInput, handleServiceTypeChoice, handleInput, submitForm as submitItemCategoryForm, setServiceTypeFormData, updateForm as updateItemCategoryForm, resetFormData, performToggleModal, performToggleModalAlert, toggleConflictModal,submitServiceTypeForm } from './store'\n\n\nconst ItemCategoryForm = (props) => {\n const dispatch = useDispatch()\n const [secretKey] = useSecretKey()\n const formType = \"serviceTypeForm\"\n\n const [shipmentRuleStore, agentApplicationName] = useSelector((state) => {\n return [state.shipmentRules, state.shipperDetails?.shipperDetails?.shipper_name]\n });\n\n const isUpdateFormFlag = props.match.params.id?true:false\n const itemCountries = useCountries()\n const storeAdresses = useStoreAddresses()\n const [serviceDefinitions] = useServiceDef(secretKey)\n\n useEffect(() => {\n if(!secretKey){\n // dispatch\n console.log('no secret key')\n }\n\n if (isUpdateFormFlag){\n dispatch(setServiceTypeFormData(secretKey, props.match.params.id, getDropoffOptions, serviceDefinitions, agentApplicationName, storeAdresses))\n }else{\n dispatch(resetFormData(formType))\n dispatch(performToggleModal())\n\n if(shipmentRuleStore.dashboard.isModalVisibleAlert) {\n dispatch(performToggleModalAlert())\n }\n }\n }, [secretKey])\n\n\n // if (shipmentRuleStore[formType].meta_data.serviceType.length>0 && shipmentRuleStore[formType].targetFieldOptions.length<=0){\n // console.log(\"******************************\")\n // let targetFieldOptions = []\n // if (shipmentRuleStore[formType].meta_data.serviceType === 'dropoff'){\n // targetFieldOptions = getDropoffOptions(serviceDefinitions, shipmentRuleStore[formType].rule_source_fields[0].matches_to_value, shipmentRuleStore[formType].rule_source_fields[1].matches_to_value, agentApplicationName)\n // }else{\n // targetFieldOptions = storeAdresses[0].filter((item)=>item.pickup_point_country === shipmentRuleStore[formType].rule_source_fields[0].matches_to_value)\n // }\n // dispatch(handleInput(formType, targetFieldOptions, 'targetFieldOptions'))\n // }\n\n\n const handleSourceInputChange = (event, name, index)=>{\n dispatch(handleSourceInput(formType, event, name, index))\n }\n\n const handleServiceTypeChange = (value, name)=>{\n dispatch(handleServiceTypeChoice(value))\n let targetFieldOptions = []\n if (value === 'dropoff' || value === \"dropoff_express\"){\n let ss = value === \"dropoff_express\" ? \"Dropoff Express\" : \"Dropoff\";\n targetFieldOptions = getDropoffOptions(serviceDefinitions, shipmentRuleStore[formType].rule_source_fields[0].matches_to_value, shipmentRuleStore[formType].rule_source_fields[1].matches_to_value, agentApplicationName, ss);\n }else{\n console.log(\"asdfasf\", shipmentRuleStore[formType].rule_source_fields[0].matches_to_value);\n targetFieldOptions = storeAdresses[0].filter((item)=>item.pickup_point_country === shipmentRuleStore[formType].rule_source_fields[0].matches_to_value)\n }\n dispatch(handleInput(formType, targetFieldOptions, 'targetFieldOptions'))\n\n }\n\n const handleInputChange = (value, name)=>{\n let serviceType = shipmentRuleStore[formType].meta_data.serviceType\n dispatch(handleInput(formType, value, name))\n if (name === \"addressID\"){\n let addressObj;\n if (serviceType === 'dropoff' || serviceType === \"dropoff_express\") {\n console.log(\"asdfasdfj\", serviceType,shipmentRuleStore[formType].meta_data.serviceType)\n addressObj = targetFiledsOnUpdate().filter((item)=>item.dropoff_id === value)[0]\n } else {\n console.log(\"asdfasdfj\", serviceType,shipmentRuleStore[formType].meta_data.serviceType)\n let ss_type = shipmentRuleStore[formType].meta_data.serviceType === \"pickup_express\" ? \"pickup_point\" : shipmentRuleStore[formType].meta_data.serviceType;\n addressObj = targetFiledsForPickUpOnUpdate().filter((item)=>item[`${ss_type}_id`] === value)[0]\n }\n \n const originCountry = shipmentRuleStore[formType].rule_source_fields[0].matches_to_value\n const destinationCOuntry = shipmentRuleStore[formType].rule_source_fields[1].matches_to_value\n\n \n if (serviceType === 'pickup_point'){\n serviceType = 'Pickup';\n } else if(serviceType === \"pickup_express\") {\n serviceType = 'Pickup Express';\n } else if (serviceType === 'dropoff') {\n serviceType = 'Dropoff'\n } else if (serviceType === \"dropoff_express\") {\n serviceType = 'Dropoff Express'\n }\n\n const valueLookup = {\n \"pickup_point\":['pickup_point_contact_person', 'pickup_point_number', 'pickup_point_state', 'pickup_point_city', 'pickup_point_province', 'pickup_point_address', 'pickup_point_postal'],\n \"pickup_express\":['pickup_point_contact_person', 'pickup_point_number', 'pickup_point_state', 'pickup_point_city', 'pickup_point_province', 'pickup_point_address', 'pickup_point_postal'],\n \"dropoff\":['dropoff_point_contact_person', 'dropoff_point_number', 'dropoff_point_state', 'dropoff_point_city', 'dropoff_point_province', 'dropoff_address', 'dropoff_postal'],\n \"dropoff_express\":['dropoff_point_contact_person', 'dropoff_point_number', 'dropoff_point_state', 'dropoff_point_city', 'dropoff_point_province', 'dropoff_address', 'dropoff_postal']\n }\n let filteredServiceDef = getFilteredServiceDefinitions(\n serviceDefinitions,\n agentApplicationName,\n originCountry,\n destinationCOuntry,\n serviceType,\n addressObj.dropoff_id\n )\n let extraData = serviceType === 'Dropoff' || serviceType === \"Dropoff Express\" ? {\"dropoff_id\": addressObj.dropoff_id} : {\"pickup_point_id\": addressObj.pickup_point_id}\n\n const serviceID = filteredServiceDef[0].service_id\n const rule_target_fields = [\n {\n \"target_name\":\"draft_order.pickup_contact_name\",\n \"target_value\":addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][0]]\n },\n {\n \"target_name\":\"draft_order.pickup_contact_number\",\n \"target_value\":addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][1]]\n },\n {\n \"target_name\":\"draft_order.pickup_state\",\n \"target_value\":addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][2]]\n },\n {\n \"target_name\": \"draft_order.pickup_city\",\n \"target_value\": addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][3]]\n },\n {\n \"target_name\": \"draft_order.pickup_province\",\n \"target_value\": addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][4]]\n },\n {\n \"target_name\": \"draft_order.pickup_address\",\n \"target_value\": addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][5]]\n },\n {\n \"target_name\": \"draft_order.pickup_postal\",\n \"target_value\": addressObj[valueLookup[shipmentRuleStore[formType].meta_data.serviceType][6]]\n },\n { \"target_name\":\"draft_order.service_id\",\n \"target_value\":serviceID.toString()\n },\n { \"target_name\":\"draft_order.service_type\",\n \"target_value\":serviceType\n },\n { \"target_name\":\"draft_order.extra_data\",\n \"target_value\":JSON.stringify(extraData)\n }\n ]\n dispatch(handleInput(formType, rule_target_fields, 'rule_target_fields'))\n }\n }\n\n const handleInputCheck = (event)=>{\n dispatch(handleInput(formType, event.target.checked, event.target.name))\n }\n\n\n\n const getItemCountryOptions = ()=>{\n return itemCountries.map((item)=>{item} )\n }\n\n const submitForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n console.log(\"testj\", shipmentRuleStore[formType])\n dispatch(submitItemCategoryForm(secretKey, shipmentRuleStore[formType]))\n }\n });\n\n }\n\n const updateForm = (event)=>{\n props.form.validateFields((err, values) => {\n if (!err) {\n dispatch(updateItemCategoryForm(secretKey, shipmentRuleStore[formType].id, shipmentRuleStore[formType]))\n }\n });\n }\n\n const getValueFromID = (id)=>{\n let ss = shipmentRuleStore[formType].meta_data.serviceType ;\n if (shipmentRuleStore[formType].meta_data.serviceType === \"dropoff_express\") {\n ss = \"dropoff\"; \n } else if (shipmentRuleStore[formType].meta_data.serviceType === \"pickup_express\" ) {\n ss =\"pickup_point\" ;\n }\n const item = shipmentRuleStore[formType]?.targetFieldOptions?.filter((item)=>item[`${ss}_id`] === id)\n\n if (item?.length>0){\n return item[0][`${ss}_address`]\n }else{\n if (id.length>0){\n return shipmentRuleStore[formType].rule_target_fields.filter((item)=>item.target_name === \"draft_order.pickup_address\")[0].target_value\n }\n else\n return null\n }\n\n }\n\n\n const targetFiledsOnUpdate = () => {\n let ss = shipmentRuleStore[formType].meta_data.serviceType === \"dropoff_express\" ? \"Dropoff Express\" : \"Dropoff\";\n console.log(\"asdfasf targetFiledsOnUpdate\", ss);\n let targetFieldOptions = getDropoffOptions(serviceDefinitions, shipmentRuleStore[formType].rule_source_fields[0].matches_to_value, shipmentRuleStore[formType].rule_source_fields[1].matches_to_value, agentApplicationName,ss)\n\n console.log(targetFieldOptions);\n\n return targetFieldOptions\n }\n const targetFiledsForPickUpOnUpdate = () => {\n let targetFieldOptions = storeAdresses[0].filter((item)=>item.pickup_point_country === shipmentRuleStore[formType].rule_source_fields[0].matches_to_value)\n return targetFieldOptions\n }\n const { getFieldDecorator } = props.form;\n\n const conditionRows = ()=>{\n const fields = shipmentRuleStore[formType].rule_source_fields\n const pickupCountryValue = fields.find(x => x.source_field_name === 'draft_order.pickup_country')\n const consigneeCountryValue = fields.find(x => x.source_field_name === 'draft_order.consignee_country')\n return \n \n {getFieldDecorator(`pickup_country`,{\n rules: [{ required: true, message: 'This field is required' }], initialValue:pickupCountryValue.matches_to_value\n })(\n handleSourceInputChange(e, \"matches_to_value\",0)}>\n {getItemCountryOptions()}\n \n )}\n \n \n \n {getFieldDecorator(`destination_country`, {\n rules: [{ required: true, message: 'This field is required' }],initialValue:consigneeCountryValue.matches_to_value\n })(\n handleSourceInputChange(e, \"matches_to_value\",1)}>\n {getItemCountryOptions()}\n \n )}\n \n \n
\n\n }\n\n const showModalAlert = (event) => {\n dispatch(performToggleModalAlert())\n }\n return (\n\n \n \n\n Back to Shipment Rules \n\n Service Type Rule \n \n \n {getFieldDecorator('rule-name', {\n rules: [{ required: true, message: 'This field is required' }], initialValue:shipmentRuleStore[formType].rule_name\n })(\n \n \n
\n Select the condition \n {conditionRows()}\n Perform these actions \n \n \n {getFieldDecorator('service_type', {\n rules: [{ required: true, message: 'This field is required' }],initialValue:shipmentRuleStore[formType].meta_data.serviceType\n })(\n handleServiceTypeChange(e)} disabled={shipmentRuleStore[formType].rule_source_fields[0].matches_to_value.length>0?false:true}>\n Pickup \n Dropoff \n {props.form.getFieldsValue().pickup_country === \"Indonesia\" && props.form.getFieldsValue().destination_country === \"US\" && \n Pickup Express \n }\n {props.form.getFieldsValue().pickup_country === \"Indonesia\" && props.form.getFieldsValue().destination_country === \"US\" && \n Dropoff Express \n }\n \n )}\n \n \n {(shipmentRuleStore[formType].meta_data.serviceType==='pickup_point' || shipmentRuleStore[formType].meta_data.serviceType === \"pickup_express\") && \n {getFieldDecorator('pickup_point_address', {\n rules: [{ required: true, message: 'This field is required' }],initialValue:getValueFromID(shipmentRuleStore[formType].addressID)\n })(\n handleInputChange(e, 'addressID')} disabled={shipmentRuleStore[formType].rule_source_fields[0].matches_to_value.length>0?false:true}>\n {\n targetFiledsForPickUpOnUpdate().map((item)=>{item.pickup_point_address} )\n }\n \n )}\n \n }\n {(shipmentRuleStore[formType].meta_data.serviceType==='dropoff' || shipmentRuleStore[formType].meta_data.serviceType==='dropoff_express') && \n {getFieldDecorator('dropoff_address', {\n rules: [{ required: true, message: 'This field is required' }],initialValue:getValueFromID(shipmentRuleStore[formType].addressID)\n })(\n handleInputChange(e, 'addressID')} disabled={shipmentRuleStore[formType].rule_source_fields[0].matches_to_value.length>0?false:true}>\n {\n targetFiledsOnUpdate().map((item)=>{item.dropoff_address} )\n }\n \n )}\n \n }\n
\n \n Apply to new and existing shipments \n \n {isUpdateFormFlag?updateForm(event)}>Update rule :0} type=\"primary\" onClick={(event)=>submitForm(event)}>Create rule }\n\n Cancel \n \n\n \n \n All progress in this session will be Lost! \n Cancel \n props.history.goBack()}>Quit \n \n
\n\n \n {dispatch(toggleConflictModal())}} footer={null}>\n \n If you continue to create this rule, your previous rule will not be applied \n {dispatch(toggleConflictModal())}} >Cancel \n {dispatch(dispatch(submitServiceTypeForm(secretKey, shipmentRuleStore[formType])))}}>Apply rules \n \n
\n \n \n
\n\n );\n}\n\n\n\nexport const ServiceTypeForm = F.create({ name: 'Item_category_form' })(ItemCategoryForm)\n","import React from \"react\";\nimport { useFormik } from \"formik\";\nimport { Form, Button, Alert, Input } from \"antd\";\nimport * as yup from \"yup\";\nimport SelectCountry from \"../common/SelectCountry\";\nimport { history } from \"../../utils/historyUtils\";\nimport { isEmpty } from \"lodash\";\n\nconst r = \"This field is required.\";\nconst validationSchema = yup.object().shape({\n shop_name: yup.string().required(r),\n shop_country: yup.string().required(\"Please select country\"),\n});\n\nconst CallbackForm = ({ code, shop_id, handleShopeeOnboard, errors, handleLazadaOnboard }) => {\n const onSubmit = async (values, { setSubmitting, setStatus }) => {\n const url = window.location.href.split(\"?\")[0];\n const channel = url.substr(url.lastIndexOf(\"/\") + 1);\n if (channel === \"shopee\") {\n handleShopeeOnboard(code, shop_id, values.shop_name, values.shop_country);\n }\n if (channel === \"lazada\") {\n handleLazadaOnboard(code, shop_id, values.shop_name, values.shop_country);\n }\n };\n\n const initialValues = {\n shop_name: shop_id,\n shop_country: \"\",\n };\n\n const formik = useFormik({\n validationSchema,\n initialValues,\n onSubmit,\n });\n\n const getErrorsProps = (fieldName) => {\n if (formik.touched[fieldName] && formik.errors[fieldName]) {\n return {\n validateStatus: \"error\",\n help: formik.errors[fieldName],\n hasFeedback: true,\n };\n }\n return {};\n };\n\n // TODO: Refactor while refactoring the shopee code.\n let message = \"\";\n if (errors && errors.message) {\n message = errors.message;\n } else if (!isEmpty(errors)) {\n console.log(errors);\n Object.keys(errors).forEach((key) => {\n message = `${message} \\n ${key}: ${errors[key].join(\", \")}`;\n });\n }\n\n return (\n \n );\n};\n\nexport default CallbackForm;\n","import { useState, useEffect } from 'react'\nimport axios from 'axios'\n\nconst useServiceLevel = (pickupCountry, consigneeCountry, secretKey) => {\n const [serviceLevels, setServiceLevels] = useState([])\n const [loading, setLoading] = useState(true)\n\n useEffect(() => {\n const getServiceLevels = async () => {\n setLoading(true)\n const response = await axios.get('/api/order/service-level/', {\n params: {\n pickup_country: pickupCountry,\n consignee_country: consigneeCountry,\n secret_key: secretKey,\n }\n })\n setServiceLevels(response.data)\n setLoading(false)\n }\n if (!!pickupCountry && !!consigneeCountry && !!secretKey) {\n getServiceLevels()\n }\n }, [pickupCountry, consigneeCountry, secretKey])\n\n return [serviceLevels, loading]\n}\n\nexport default useServiceLevel","import { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport { ROOT_URL } from '../../../actions'\n\nconst useServices = (secretKey) => {\n const [isServiceLoading, setLoading] = useState(true)\n const [services, setServices] = useState([])\n\n useEffect(() => {\n if (secretKey) {\n const getServices = async () => {\n const token = localStorage.getItem('token')\n\n const response = await axios.get(`${ROOT_URL}/order/service/`,\n {\n params: {\n secret_key: secretKey,\n new: true\n }\n },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n setServices(response.data)\n setLoading(false)\n }\n getServices()\n }\n }, [secretKey])\n\n return [services, isServiceLoading]\n}\n\nexport default useServices","import { useEffect, useState } from 'react'\nimport queryString from 'query-string'\nimport axios from 'axios'\nimport { ROOT_URL } from '../../../actions'\n\nconst useShopifyOrders = () => {\n const queries = queryString.parse(window.location.search)\n const { shop } = queries\n const orderIds = queries['ids[]'] || queries.ids || queries.id\n const ids = orderIds instanceof Array ? orderIds.join():orderIds\n\n const [orders, setOrders] = useState({\n isShopify: shop && ids ? true : false,\n orders: []\n })\n\n useEffect(() => {\n const getShopifyOrders = async () => {\n const token = localStorage.getItem('token')\n try {\n const response = await axios.get(`${ROOT_URL}/shopify/get-orders/`,\n { params: {shop, ids, shopifyParams: window.location.search} },\n { headers: { 'Content-Type': 'application/json', 'Authorization': 'Token ' + token } }\n )\n const orders = response.data.result\n setOrders({orders, isShopify: true, isEmpty: response.data.count === 0})\n } catch(err) {\n const response = err.data\n response.isError = true\n setOrders(response)\n }\n }\n\n getShopifyOrders()\n }, [ids, shop])\n \n if (!shop || !ids) {\n console.log('not shopify')\n return [{ isShopify: false }, setOrders]\n }\n\n return [orders, setOrders]\n}\n\nexport default useShopifyOrders","export const tabFieldsMapping = {\n senderDetails: [\n 'pickup',\n 'consignee_country',\n 'service',\n 'additional_data',\n ],\n recipientDetails: [\n 'consignee',\n ],\n orderDetails: [\n 'items',\n 'item_price_currency',\n 'shipper_order_id',\n ],\n otherInformation: [\n 'order_weight',\n 'order_height',\n 'order_width',\n 'order_length',\n 'payment_type',\n 'cod_amt_to_collect',\n 'cod_amt_to_collect_currency',\n 'incoterm',\n 'tracking_no',\n ],\n}\n","import React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport axios from 'axios'\n\nimport useServices from './hooks/useServices'\nimport useCountries from './hooks/useCountries'\nimport useShopifyOrders from './hooks/useShopifyOrders'\nimport { ROOT_URL, JANIO_LABEL_URL } from '../../actions'\nimport useStoreAddresses from './hooks/useStoreAddresses'\nimport useCurrencyMappings from './hooks/useCurrencyMappings'\nimport useItemCategories from './hooks/useItemCategories'\nimport useServiceDef from '../orderSubmitBulk/hooks/useServiceDef'\nimport { tabFieldsMapping } from './utils'\n\nexport const ShopifyOrderContext = React.createContext()\n\n\nconst ShopifyOrderContextProvider = props => {\n const [secretKey, setSecretKey] = useState()\n\n if (!secretKey && props.shipperDetails && props.shipperDetails.agent_application_secret_key) {\n setSecretKey(props.shipperDetails.agent_application_secret_key)\n }\n\n const tabs = [\n 'senderDetails',\n 'recipientDetails',\n 'orderDetails',\n 'otherInformation',\n ]\n const [addresses] = useStoreAddresses()\n const countries = useCountries()\n const [services, isServiceLoading] = useServices(secretKey)\n const [serviceDefinitions, isServicedefinitionLoading] = useServiceDef(secretKey)\n const itemCategories = useItemCategories()\n const [currencyMappings, isCurrencyMappingsLoading] = useCurrencyMappings()\n const agentApplicationName = props.shipperDetails ? props.shipperDetails.shipper_name : \"\"\n const agentApplicationId = props.agentApplicationId ? props.agentApplicationId : \"\"\n\n const [page, setPage] = useState(0)\n const [selectedOrder, setSelectedOrder] = useState({\n submitted: false\n })\n const [shopifyOrders, setShopifyOrders] = useShopifyOrders()\n const [selectedOrderId, setSelectedOrderId] = useState()\n const [showModal, setShowModal] = useState(false)\n const [tabErrors, setTabErrors] = useState([])\n\n if (shopifyOrders.isShopify && shopifyOrders.orders.length && !selectedOrderId) {\n setSelectedOrderId(shopifyOrders.orders[0].shopify_order_id)\n }\n\n const getAvailablePickupCountries = () => services.map(s => s.pickup_country)\n const getAvailableConsigneeCountries = () => services.map(s => s.consignee_country)\n\n const getOrder = () => {\n const order = {\n submitted: false\n }\n if (shopifyOrders.isShopify) {\n return shopifyOrders.orders.filter(o => parseInt(o.shopify_order_id) === parseInt(selectedOrderId))[0] || order\n }\n return order\n }\n\n useEffect(() => {\n const order = getOrder()\n setSelectedOrder(order)\n }, [selectedOrderId])\n\n const nextPage = () => {\n setPage((page + 1) % tabs.length)\n }\n const prevPage = () => {\n setPage((page - 1 + tabs.length) % tabs.length)\n }\n const firstPage = () => {\n setPage(0)\n }\n \n const updateOrderData = data => {\n const order = selectedOrder\n Object.assign(order, data)\n }\n\n const selectShopifyOrder = orderId => {\n const order = shopifyOrders.orders.filter(o => o.order_id === parseInt(orderId, 10))[0]\n setSelectedOrder(order)\n }\n\n const validateToBackend = async values => {\n if (values.pickup_date) {\n values.pickup_date = values.pickup_date.format(\"YYYY-MM-DD\")\n }\n const url = `${ROOT_URL}/order/order-validation/`\n setTabErrors([])\n\n const validationData = {...values}\n if (!validationData.service_id) {\n validationData.service_id = selectedOrder.service.service_id\n }\n\n try {\n const response = await axios.post(url, {\n ...validationData,\n secret_key: secretKey\n })\n return response.data\n } catch(e) {\n console.log(e)\n const response = e.data || {}\n response.error = true\n return response\n }\n }\n\n const submitOrder = async values => {\n if (selectedOrder.pickup_date) {\n selectedOrder.pickup_date = selectedOrder.pickup_date.format(\"YYYY-MM-DD\")\n }\n const data = {...selectedOrder, ...values}\n const url = `${ROOT_URL}/order/order/`\n setTabErrors([])\n\n const removeIfEmpty = ['cod_amt_to_collect', 'pickup_point_id', 'incoterm', 'additional_data']\n removeIfEmpty.forEach(i => {\n if (!data[i]) {\n delete data[i]\n }\n })\n\n const { pickup_point, serviceDefinition } = data\n if (pickup_point) {\n data.pickup_contact_name = pickup_point.pickup_point_contact_person\n data.pickup_contact_number = pickup_point.pickup_point_number\n data.pickup_state = pickup_point.pickup_point_state\n data.pickup_city = pickup_point.pickup_point_city\n data.pickup_province = pickup_point.pickup_point_province\n data.pickup_postal = pickup_point.pickup_point_postal\n } \n else {\n data.pickup_contact_name = serviceDefinition.dropoff_point_contact_person\n data.pickup_contact_number = serviceDefinition.dropoff_point_number\n data.pickup_state = serviceDefinition.dropoff_point_state\n data.pickup_city = serviceDefinition.dropoff_point_city\n data.pickup_province = serviceDefinition.dropoff_point_province\n data.pickup_postal = serviceDefinition.dropoff_postal\n }\n\n if (shopifyOrders.isShopify) {\n data.additional_data = {}\n data.additional_data.shopifyOrder = data.shopify_order\n }\n\n try {\n const response = await axios.post(url, {...data, secret_key: secretKey})\n\n const updatedSelectedOrder = {...selectedOrder, ...values}\n updatedSelectedOrder.submitted = true\n updatedSelectedOrder.tracking_no = response.data.tracking_no\n updatedSelectedOrder.label_url = `${JANIO_LABEL_URL}/${updatedSelectedOrder.tracking_no},${updatedSelectedOrder.consignee_email || ''}`\n\n if (shopifyOrders.isShopify) {\n const index = shopifyOrders.orders.findIndex(o => o.order_id === updatedSelectedOrder.order_id)\n shopifyOrders.orders[index] = updatedSelectedOrder\n setShopifyOrders(shopifyOrders)\n }\n\n setSelectedOrder(updatedSelectedOrder)\n setShowModal(true)\n\n return response.data\n } catch(e) {\n console.log(e)\n const response = e.data\n response.error = true\n return response\n }\n }\n\n const setOrderDefaultValue = orderValue => {\n if (orderValue) {\n firstPage()\n const updatedOrder = {...selectedOrder, ...orderValue}\n const { item_category, service, pickup_point } = orderValue\n if (service && services.some(s => s.service_id === service.service_id)) {\n console.log('got the service')\n updatedOrder.service_id = service.service_id || ''\n updatedOrder.service = service\n if (!updatedOrder.consignee_country) {\n updatedOrder.consignee_country = service.service_destination_country\n }\n } else {\n updatedOrder.service_id = ''\n delete updatedOrder.service\n }\n updatedOrder.item_category = item_category || ''\n updatedOrder.pickup_point_id = pickup_point && pickup_point.pickup_point_id ? pickup_point.pickup_point_id:''\n updatedOrder.pickup_address = pickup_point ? pickup_point.pickup_point_address:service.pickup_address || ''\n console.log('updatedOrderupdatedOrder', updatedOrder)\n setSelectedOrder(updatedOrder)\n }\n }\n\n const getServiceById = id => {\n const service = services.filter(\n s => s.service_id === id\n )\n return service ? service[0] : null\n }\n\n const submitNewOrder = () => {\n firstPage()\n setSelectedOrder({submitted: false})\n setShowModal(false)\n }\n\n const data = {\n services, countries, itemCategories\n }\n\n const processError = (currentPage, errors) => {\n if (Object.keys(errors).length) {\n console.log('there are errors: ', errors)\n const errorFields = Object.keys(errors)\n const tabErrors = []\n\n for (let f of errorFields) {\n for (let k in tabFieldsMapping ) {\n if (k === currentPage) {\n continue\n }\n if (tabFieldsMapping[k].some(fieldMapping => f.includes(fieldMapping))) {\n tabErrors.push(k)\n }\n }\n }\n\n if (tabErrors.length) {\n setTabErrors(tabErrors)\n }\n }\n }\n\n const getPickupAddress = data => {\n if (data.pickup_point_id) {\n return {\n address: data.pickup_point_address,\n city: data.pickup_point_city,\n contact_person: data.pickup_point_contact_person,\n country: data.pickup_point_country,\n email: data.pickup_point_email,\n id: data.pickup_point_id,\n name: data.pickup_point_name,\n number: data.pickup_point_number,\n postal: data.pickup_point_postal,\n province: data.pickup_point_province,\n state: data.pickup_point_state,\n }\n } else if (data.dropoff_id) {\n return {\n address: data.dropoff_address,\n city: data.dropoff_point_city,\n contact_person: data.dropoff_point_contact_person,\n country: data.dropoff_point_country,\n email: data.dropoff_point_email,\n name: data.dropoff_point_name,\n number: data.dropoff_point_number,\n postal: data.dropoff_postal,\n province: data.dropoff_point_province,\n state: data.dropoff_point_state,\n }\n }\n }\n\n return (\n \n {props.children}\n \n )\n}\n\nconst mapState = state => ({\n agentApplicationId: state.agentAppDetails.agent_application_id,\n shipperDetails: state.shipperDetails.shipperDetails\n})\n\nexport default connect(mapState)(ShopifyOrderContextProvider)","import React, { useContext } from 'react'\nimport Select from 'react-select'\nimport useServiceLevel from '../hooks/useServiceLevel'\nimport { ShopifyOrderContext } from '../ShopifyOrderContext'\n\nconst SelectDeliveryOptions = ({\n pickupCountry, consigneeCountry, isDisabled, error, onChange, ...rest\n}) => {\n const context = useContext(ShopifyOrderContext)\n\n const [serviceLevels, serviceLevelsLoading] = useServiceLevel(\n pickupCountry, consigneeCountry, context.secretKey\n )\n console.log('serviceLevels', serviceLevels)\n const getDeliveryOptions = !!serviceLevels.length?\n serviceLevels[0].service_levels.map(level => ({\n value: level,\n label: level\n }))\n :\n []\n\n return (\n \n
Delivery Service Level \n
\n {error} \n }\n
\n
\n
\n )\n\n const getFilteredServices = () => ctx.data.services.filter(\n s => s.pickup_country === values.pickup_country &&\n s.consignee_country === values.consignee_country\n )\n\n const filteredServices = getFilteredServices()\n\n const getServiceTypeOptions = (origin, destination) => {\n return serviceDefinitions\n .filter(\n def => {\n const serviceType = def.service_type?.toLowerCase() || ''\n return (\n origin === def.origin_country\n && destination === def.destination_country\n && !serviceType.includes('return')\n )\n }\n )\n .map(serviceDef => serviceDef.service_type)\n .filter(\n (value, index, self) => self.indexOf(value) === index\n )\n .map(\n serviceType => ({\n value: serviceType,\n label:serviceType,\n serviceType\n })\n )\n }\n\n const getDropoffOptions = (origin, destination) =>{\n let exclusive = serviceDefinitions.filter(serviceDef=>(\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === props.values.serviceType &&\n serviceDef.exclusive_agents_ids.includes(agentApplicationId)\n ))\n if (exclusive.length > 0){\n return exclusive.map(serviceDefinition =>({\n label: serviceDefinition.dropoff_address,\n value: serviceDefinition.dropoff_id,\n serviceDefinition\n }))\n }else{\n return serviceDefinitions.filter(def => (origin === def.origin_country && destination === def.destination_country && def.service_type === props.values.serviceType )).map(serviceDefinition =>({\n label: serviceDefinition.dropoff_address,\n value: serviceDefinition.dropoff_id,\n serviceDefinition\n }))\n }\n }\n\n const getFilteredServiceDefinitions = (origin, destination, serviceType, dropoffId) => {\n let exclusive = serviceDefinitions.filter(serviceDef=>(\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === serviceType &&\n serviceDef.exclusive_agents_ids.includes(agentApplicationId)&&\n (dropoffId ? serviceDef.dropoff_id === dropoffId :true)\n ))\n if (exclusive.length > 0){\n return exclusive\n }else{\n return serviceDefinitions.filter(serviceDef => (\n serviceDef.origin_country === origin &&\n serviceDef.destination_country === destination &&\n serviceDef.service_type === serviceType &&\n (dropoffId ? serviceDef.dropoff_id === dropoffId :true)\n ))\n }\n }\n\n let pickupAddress\n if (values.serviceType) {\n if (values.serviceType.toLowerCase().includes(\"pickup\") && values.pickup_point) {\n pickupAddress = getPickupDataFromPickupPoint(values.pickup_point)\n }\n else if (values.serviceDefinition){\n pickupAddress = getPickupDataFromServiceDefinition(values.serviceDefinition)\n }\n }\n\n const displayServiceErrors = (values, touched) => {\n let showErrors = false\n // if service type is selected and is not dropoff, service definition would have been chosen & errors can be shown\n if (touched.service_id && values.serviceType !== 'Dropoff' && values.serviceType !== \"Dropoff Express\") {\n showErrors = true\n // if service type is dropoff can only show errors after dropoff pt is chosen\n } else if (touched.service_id && (values.serviceType === 'Dropoff' || values.serviceType === \"Dropoff Express\") && touched.dropoffPointId) {\n showErrors = true\n }\n\n // if no service def means no unique service def found\n if (showErrors && !values.serviceDefinition) {\n return Unable to find a unique service
\n }\n // if service def but no service, means the service is not allowed for merchant\n else if (showErrors && !values.service) {\n return Service not allowed
\n } else {\n return null\n }\n }\n\n const getDisabledDate = (currentDate) => {\n const startDate = new Date()\n\n if (values.pickup_country === 'Indonesia') {\n if (values.pickup_state === 'DKI Jakarta') {\n if (startDate.getHours() >= 12) {\n startDate.setDate(startDate.getDate() + 1)\n }\n } else {\n if (startDate.getHours() <= 17) {\n startDate.setDate(startDate.getDate() + 1)\n } else {\n startDate.setDate(startDate.getDate() + 2)\n }\n }\n }\n else {\n if (startDate.getHours() >= 13) {\n startDate.setDate(startDate.getDate() + 1)\n }\n }\n return currentDate.diff(new Date(), 'days') >= 14 || currentDate.diff(startDate, 'days') < 0\n }\n\n const showPickupAddress = values.service && (values.serviceType === \"Pickup\" || values.serviceType === \"Pickup Express\")\n const showDropoffAddress = values.serviceType === \"Dropoff\" || values.serviceType === \"Dropoff Express\"\n const showDeliveryOptions = (\n values.pickup_country === \"Indonesia\"\n && values.consignee_country === 'Indonesia'\n && !!values.serviceType\n // && values.serviceType === 'Pickup'\n )\n\n const showPickupDate =\n (values.serviceType === \"Pickup\" || values.serviceType === \"Pickup Express\") &&\n [\"Singapore\", \"Indonesia\"].includes(values.pickup_country) &&\n !!values.pickup_address\n const showDeliveryInformation = pickupAddress && !!Object.keys(pickupAddress).length\n\n const getPickupAddressOptions = () => addresses.filter(a => a.pickup_point_country === values.pickup_country)\n .map((a, i) => ({\n label: `${a.pickup_point_name} - ${a.pickup_point_address}`,\n value: a.pickup_point_id\n }))\n\n let pickupAddressError\n if (touched.pickup_state && errors.pickup_state) {\n pickupAddressError = errors.pickup_state\n } else if (touched.pickup_city && errors.pickup_city) {\n pickupAddressError = errors.pickup_city\n }\n\n let renderContent\n const content = !ctx.isServiceLoading && !isServicedefinitionLoading && !ctx.isCurrencyMappingsLoading ?\n <>\n \n
\n
\n
\n
\n
{\n setValues({\n pickup_country: e.value,\n consignee_country: values.consignee_country,\n service_id: '',\n pickup_point_id: '',\n pickup_address: '',\n service: null,\n service_level: '',\n })\n setTouched({\n pickup_country: true\n }, false)\n\n }}\n value={values.pickup_country ? {\n value: values.pickup_country, label: values.pickup_country\n }: ''}\n isDisabled={selectedOrder.submitted}\n options = {\n ctx.data.countries.map((country, i) => (\n {'value': country, 'label': country}\n ))\n }\n >\n \n {touched.pickup_country && errors.pickup_country &&\n
{errors.pickup_country}
}\n
\n\n
\n
\n {(!values.consignee_country || !shopifyOrders.isShopify) &&\n
\n
\n
{\n setValues({\n pickup_country: values.pickup_country,\n consignee_country: e.value,\n service_id: '',\n pickup_point_id: '',\n pickup_address: '',\n service_level: ''\n })\n setTouched({\n pickup_country: true,\n consignee_country: true\n }, false)\n }}\n value={values.consignee_country ? {\n value: values.consignee_country, label: values.consignee_country\n }: ''}\n options = {\n ctx.data.countries.map((country, i) => (\n {'value': country, 'label': country}\n ))\n } >\n \n {touched.consignee_country && errors.consignee_country &&\n
{errors.consignee_country}
}\n
\n }\n
\n
\n\n
\n
\n {values.pickup_country && values.consignee_country &&\n
\n {filteredServices.length ?\n \n {\n const filteredServiceDef = getFilteredServiceDefinitions(values.pickup_country, values.consignee_country, e.value)\n if (filteredServiceDef.length === 1){\n const serviceDef = filteredServiceDef[0]\n values.service_id = serviceDef.service_id\n values.service = ctx.getServiceById(serviceDef.service_id)\n values.serviceDefinition = serviceDef\n if (serviceDef.source === 'parknparcel'){\n values.additional_data = {'ParknParcel': serviceDef.additional_data}\n }\n if (!!serviceDef.dropoff_id) {\n values.pickup_state = serviceDef.dropoff_point_state\n values.pickup_city = serviceDef.dropoff_point_city\n values.pickup_address = serviceDef.dropoff_address\n values.pickup_postal = serviceDef.dropoff_postal\n }\n } else {\n values.service_id = null\n values.service = null\n values.serviceDefinition = null\n }\n\n if (e.value === \"Pickup\" || e.value === \"Pickup Express\") {\n values.pickup_state = \"\"\n values.pickup_city = \"\"\n values.pickup_address = \"\"\n values.pickup_postal = \"\"\n }\n values.pickup_point_id = \"\"\n values.pickup_point = null\n\n values.serviceType = e.value\n setValues(values)\n setTouched({\n ...touched,\n pickup_country: true,\n service_id: true\n }, false)\n }}\n value={values.serviceType ? {\n value: values.serviceType, label: values.serviceType\n }: ''}\n options={getServiceTypeOptions(values.pickup_country, values.consignee_country)} >\n \n {displayServiceErrors(values, touched)}\n
\n :\n
\n }\n \n }\n
\n\n {showPickupAddress &&\n
\n
\n
\n
{\n const pickup_point = getAddress(e.value)\n setValues({\n ...values,\n pickup_point_id: e.value,\n pickup_address: (pickup_point && pickup_point.pickup_point_address) || null,\n pickup_notes: (pickup_point && pickup_point.pickup_point_notes) || null,\n pickup_state: (pickup_point && pickup_point.pickup_point_state) || null,\n pickup_city: (pickup_point && pickup_point.pickup_point_city) || null,\n pickup_postal: (pickup_point && pickup_point.pickup_point_postal) || null,\n pickup_date: null,\n pickup_point\n })\n }}\n value={values.pickup_point && !!Object.entries(values.pickup_point).length ?\n {\n value: values.pickup_point.pickup_point_id,\n label: `${values.pickup_point.pickup_point_name} - ${values.pickup_point.pickup_point_address}`,\n }\n :\n ''\n }\n className={classNames(\n 'basic-single',\n // {'is-invalid': !!(errors.pickup_point_id && touched.pickup_point_id)})}\n )}\n disabled={selectedOrder.submitted}\n options={getPickupAddressOptions()}>\n \n
\n {props.t('submitOrder.addPickupPoint')} \n
\n {touched.pickup_point_id && errors.pickup_point_id &&\n
{errors.pickup_point_id}
}\n {!!pickupAddressError &&\n
{pickupAddressError}
}\n
\n
\n }\n\n {showDropoffAddress &&\n
\n
\n {\n const filteredServiceDef = getFilteredServiceDefinitions(\n values.pickup_country,\n values.consignee_country,\n values.serviceType, \n e.value)\n\n if (filteredServiceDef.length === 1){\n const serviceDef = filteredServiceDef[0]\n values.service_id = serviceDef.service_id\n values.service = ctx.getServiceById(serviceDef.service_id)\n values.serviceDefinition = serviceDef\n if (serviceDef.source === 'parknparcel'){\n values.additional_data = {'ParknParcel': serviceDef.additional_data}\n }\n\n if (!!serviceDef.dropoff_id) {\n values.pickup_state = serviceDef.dropoff_point_state\n values.pickup_city = serviceDef.dropoff_point_city\n values.pickup_address = serviceDef.dropoff_address\n values.pickup_postal = serviceDef.dropoff_postal\n }\n }\n setValues(values)\n setTouched({\n ...touched,\n dropoffPointId: true\n }, false)\n }}\n value={values.serviceDefinition ? {\n value: values.serviceDefinition.dropoff_id, label: values.serviceDefinition.dropoff_address\n }: ''}\n options = {getDropoffOptions(values.pickup_country, values.consignee_country)} >\n \n
\n
\n }\n
\n\n
\n {showDeliveryOptions &&\n
\n {\n setValues({\n ...values,\n service_level: e.value,\n })\n setTouched({\n ...touched,\n service_level: true,\n }, false)\n }}\n value={values.service_level ? {\n label: values.service_level,\n value: values.service_level\n }: ''}\n />\n
\n }\n\n {showPickupDate &&\n
\n
\n
Pickup Date (Optional) \n
\n setValues({ ...values, pickup_date: val })}\n style={{ width: \"100%\"}}\n value={values.pickup_date}\n />\n {touched.pickup_date && errors.pickup_date && (\n {errors.pickup_date} \n )}\n
\n
\n
\n }\n\n {showDeliveryInformation &&\n
\n }\n
\n\n
\n {/* { values.serviceType === \"Pickup\" && values.pickup_country === \"Singapore\" && values.pickup_address &&\n
\n
\n Pickup Notes (Optional) \n setValues({ ...values, pickup_notes: event.target.value })}\n value={values.pickup_notes}\n style={{ height: \"178px\" }}\n />\n
\n
\n } */}\n
\n
\n
No service available to {values.consignee_country}
\n
\n
Shipping address missing, please input shipping address in Shopify.
\n
![\"\"]({i18n.language.includes(\"ch\"))
\n 
\n 
\n }\n