\r\n \r\n {this.state.passToggle ? ![](\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAkFBMVEX///85MzU2MDIoICMvKCorIyYyKy0wKSstJin39/f7+/srJCYmHiEvKCs0LTAiGRzx8fHk5OSHhIXY19c8Njh2c3SNiotPSkxFP0Gpp6i5t7hmYmSjoaJ/fH3e3d1DPT/GxcWzsbJXUlTPzs4eFBdhXF5vbG1NSEmcmpqVkpOlo6SMiYrJyMlqZ2hWUlMYCQ8Lm4MzAAAJE0lEQVR4nO2c63aCuhKAa0JikLsIAt5QRNRW9/u/3aa7AsFLghbUnjPfr65VxJlkbpkkfnwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPD/izqPl9tPb3LMgiDIjulmuA0j1361WK2gOtFuE1gW1lifmugHkxqMYMsaTfzlXH21iL9Ane+9wMIKRb3rIFMh1mizTf7kbNrxLNO1m8pxalKmL7zIebXA96HG3gIbcu0qLTE6RH9nJuf+AjeYvHOLxT0vebXojYhScsfsnc1kFg5eLb+EQYh08yH1TkoSa/fOxqruc3+6boLUIBhrP/mCMoyJkv99VUmm++8addRwdEW/PCNgtlhtPsMocedzJ2fuJnG489KA6uyavzLjPecxGl/qZzI9z+rR/LrAthNvN4FO6IWOZLR/u0LAnVzoZxI9lSdze77fUP1cSYTH8TPEbsxgdz4ReciYLJv6kx15Gj4LUCb23sgdk0Cri0etYH+ffHa0WvfrL+mjZUfy3stgaNUMFBn65pHUPR8Srf4iffIWEccNSE0shh6O9up0QWo6UiVuU9THCC2zpt/oV5F+EGY1HdF62Jqkj6F6Vs11qP9bu8qzas0myPGlAWc+Znz401sJf/ZO4QMzHcUtvPRB4h4vCl5J4os6T6Jwv4++ZP2L+UHnTBVp+/ZEvo+QdxlT3wqXBU54WNC8NNXy+tRYpFtX+OrINPixe5Ez+jonhDaei56NU6JxlTYymZaFog/YG97BtUO7ojfD4xRE1k70aNy7sqRCmi7UcUm4zyjj59epE66M6Y++BE86E+vGihhnIs91jlxQpcGTk7864YIoOYi+PaKXa4eC3HkFnxx8cjUODZ6aNXgFERZa6E4XtjTwRmR+y/6LVBwcOAUVYX08wyL9cthRZADJqDIAmj1PxQ2nIBUmwTMFzT7TNKUedYyVKMs4WbXioONn+eKsCjImEo7rjk8oVLfSz2m43x2IxS+UFGEqUI/VcBrH50RULg9KIlxk8fpt4vIfyZBwGV3syB+HKqQqaSsaSNhXYisr4ZjaVZsJkbOS1fZZZaxYlGxym6lU1LzfKyAjXldGk4r9witt0RxFF/91x+U0mpJ8zqmoi+e7BeZVw0mm4FfprtejIJdysKS25lW8HKtWsYPStqgwzOdMikBvLm48OVEKI771RIFXqoiouGb/LYfK8GQJOCkSBVJuFeXquBgvLCxRvzNwZdJZlzljxw2lLP3OCpms23blFoaMjpIdmcG4TP3K5n7Bm/JV5e9/ZLZi904OSyeCp8ohs6TvqxZfeHqn3I0phRbOy4m4yJq6SHZ7dHolk8bIeVWGW13tM1ZOiEVLgh8+T0ZqiqYwn8RTsDHluTwuLQgtuqltwrKWYQ3ybnoKIljcuHYLM9XlQm9LFdmsqdD34JTvNxtUwGoRGCQRSR2jho6Y4xXZpWfFDaW+h2MR2RtlJOdU2yFxYZdLfRoK3CCT21kpA2o/ZVRVtCx3/UdyMmlT1kPanfyVNHprWSax9ttvhV/1aKPitwilVOYx4UlorVEKmBaFHhq1fqQhKGK1IWwbFhSBry8b6+Up1DB5eP6mSFgdmGlZZQozeElHc+gXhRJaNHn8LuLKD5uMtms19UPlDj+sUiLpYBVVTmKPNSgpylgqa+Vu7oilTlEB5VPYwcmiasWOGvT1VFSUY5J8mBX5UO7eg0lZVK07qduqfNFv4IpF7JVYX1LUNJp8UvwyVxC/qdD3MSvX5ESejfxmBefQaPTYN8uyajTHHZ1+4xb4ljQulJFJF+5NlMYsDV9J1QHDjRLWI7isXMD8E0uetRenZ82V4KlhUWlK3dCpdgf0Dk+hhNUSGMuK01J4wSZaUdvJjbRcSHa1sCioXBH1JKNerotu22k5z7I11oe6KnMV7bbxzX2TtBVVZLoeMq8PRvUylImlVsuuXD6yHe/POFW7RLYX5JbzbY6uzaK9qnoG4ikccFtBurg/3gJJ1fOmY7GKw8qk6aUvxovKHMSdNl7BdZPi7pdEnIpiQ+WiAyJpfRodjzvIQYRRi9+t1D9b0EDKtEpMpilUkZvvnqkfl8WCR40O/IlSXdjTV4+lDz5lY+Ybv8oZSJw09vyREUTWo8Nw53vBunaYlAijvx1UY8EaLdzaYKhxKgrXBLUt0u+o2jeMs6PdmlBst1cNhpI+78gJtxeExB3oMxUvwRtRlIm54ZDtdbWLx52mwTPR0IZEdBYD6UORglvuw33ZXlfLeNwRBO0oKm++FuyKaj9QQ5QIbf5LjNWzzwvPOPMzqVDQ2fr6NRpkpaJQnARVEO0xWd+1A3wuFSDdExmbu1pf3hwxLfHB0S1/1Egcjroi5EUwesJqyvWo1kdlGwRRwiax6APOij+JgztdTtwmopz1IWsodBQ7Ho5HBtYxxqyXSW5UDqZ8xkSkWS+1A9yAP+fKrhy4qGO7SRzHX65sdZDUJtA0Oz6cIMKe8KIgPW2jBebMaiWPknV7NEGGXzs7SrH32xaK7dPa3Rl98+pbJZFROz7ap7Pf6GjverXsidad7dk3x0nrhVnf2DxqVs4QsVpWYYvXWmjB9OzeGdXHj8SGr4Ou1O89WbN3uRU8P55dPkSY+feNvrMdWWeVDws6b1jcQWgqdfF6ipXt3GaV1sDZpxY7K3oo8d/rGqkzu7jsipiVDSNHLOfAif2VTs4LV4TT9/BAnmRyeakCGVhbzaaJcy3iq44bDlN65nw/+j3kyN0TH6+dy0dU080s9fxpFCfuN0kcfV/lHiOd9K+sOhBehO9loBxRdh4uCqlNamh5SUoYYwSLruMjjN5Xv2/ifKF0VfJmmPro7X83Il8oKZqocXEbxIh4SfU22OGKXIYPmXoGDnad7Qu2j7sbE9b8J0CQgoPZ19ubZ52Bu/vOBHIt88kjq8+/+UNKH07kp4qVp4QbJmvmiQQfh0vnj81ejYGdhJ9pz7Iw0QyDUjOH9hWmYWtNj7P9l/2XtasY2PN4Od0NvcNkMjlsZrvpMnL/R3QDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA+/gXS04SkwvU7MQAAAABJRU5ErkJggg==\")
\r\n : ![](\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAflBMVEX///8AAADT09Po6OiKior4+PjExMT09PR1dXXIyMi0tLTj4+N6enr7+/uhoaHs7OyBgYFhYWG5ublbW1uUlJROTk6Hh4dHR0c1NTViYmIwMDBnZ2fX19esrKzQ0NBtbW2cnJwQEBAlJSUzMzM9PT0eHh4VFRVTU1MqKiqmpqbubTxRAAAL0klEQVR4nO1d6XqqMBAtKoKiYnFr3am26vu/4G1tbSVzJkwgQG+/nJ8tmAxJZs4sSR4eHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwc/i90d4flbOQ33Y3K0H7yPtFvuicVoe1949J0X6rB8UfCvzmKXe8e3aa7UwF2GQm9VtP9sY9FVkIvarpD1nFUJHyJm+6RbUwUCb3lX7OLG1VCb9F0lyzDJxJ6j033yTISKuKg6T5ZxoWK2Gm6T5bRoSLum+6TZYRURDF/a7d6yagzWE1Op9kVp8kq7IySXqtdZZdNcaIi5vK3oLuZz17pi3d4nc03vaAOAfIxo93T87c1+CgcHqfdeFiTICwCldp4ev5GrWgOjmG/YT4Y006l/Pzq0qcFWA4adV3atEdnVkT98tNh0m9uXa5pd2bM6gEkwQCrxoQEU4/hb+NSEnreW7itV7Qb+rQvIXyQ+CPmWF4a0a572pM5em5HnyuAcRPKVcjfRlYk9LznBmImMv4G9G5BnHq1i/hIewE6MbcmoreofRzVyJQH+ZsFXfONybpeCYMn2gegEn5W7OtiNZhPL0mv11qv19teN7lM54Pd4k0u47je6FdMCcsbMNHt0W4y3ieRzwWu/KDdHQ2WMhn3FQpEAVj1S4n4W5QMwLRQ8VofBwiAOuX5mxBxbw7WdxZhTVwuSXH7z6V/ub151ouYJhb6nwd/xba/s/HziV4H7yoPRvd0zUP+ZozgAnztH1TsQALOdo+RpWZaA00jVcYx27m6wFr+NJjyjSwqC9FJAhMWSWT/hW2lopmq+ap3sMmvNiwZmFps5QY/R5HfkNp06YZ9jtg9WtepMT9lFNjNnw453Xa2TFS33Kfs0Y9chr8BxFy4wCqJA+GZqyzvK75F/yzIn8Ztg8/QY5ajRYIDgjMfmF97KY+/3RB0jqm3nOzFjq3PTFVb5pcx8+lNa4rjb1/4+SRpKDUuER5GSyoVhz7vksAg6qThHdkxT6dC842jIuNyon0CukppxuaCQWYnEC0KCGX2Beg0z0q2HQq4UFQ1UHccfwMJc6HfF0CvQ7sgJICqms5BEH9jmBWmtjKdATVeSRHhCKK+i/OnKZTQO4rYHvTdSk1U5MS8wGXjA2UHH2QkFFautlE8p4S6QWZixqyZmHb9FT0KBvsLohCBjxZjYaOBcg/8lIjowyh/ytCjDxxEVBMZr4KmHyU5df61kL9pwsBvIruB9E0hAofItv5bAT0A+BtH4j8gc71QDUSB1AZKHuXFKGT8rbyIaHYZO1PBmf5IfuxAxt/8/SLlRETZAQrA9pem0WKgsiTBEWn9W7ydM3H8o6h7YEFM5MJ9ACgsWfQHmEVubq8hnRDGlYGIRtFasKBkAkJexb4aQLdlI2oJiGgQygR1M7JmwYsf4BVdhGrfZL4GUDfiIJhPl4jQpHLheE3TQPULq8jpm0/S9Bf1J4SBdCbaoa1/e4houlW4uYoGcIW5IfpthA4KKO27QafLh5SqCjU/XcaipUhN/UzWHna1br+hm0DENEkdImrTJDER4qK+CL8ooN530MXf6CgKdQb12QRrmNpsqYbSDaGnn+pDdS1KB5H6bLmeFHUQpHme3CoonUUm4y+lmZTk5gULyLCLvcv81JTO5KjqbS9tlujvpWE3T9KWHpQXJyACotN0iul/E7dLgmDaMSGcRJ5lUVlUJKx/u0Gdp+JU65BMO53iIHpUnt9R9MwY/ZrWUVXGXB5BI6pDY92IrTcI8aTZNz8sTCCNv12h8IVU3jRZiuxqCNQnDbYZKh/y0zTENCaj8XCLbzdWJ0vKrS2iGwxqHpTv+KWy0f4FdmUrH8kgfkboIjPFiU2SeUyfyPKnb0cdxN94/pZ1aUw2cZLlhReD6qqZhAWGh8yrP8bdJH+aTaCJXaEPqAQV9p04zSbRK2X871QwCBdwPo7CT0yKOsg8RcZGXa5GJ2AohvT+48jzp0o3jSpz1FaAklSnkyzmdUNf8/Py/Gn2I5tVkKlxCUqn1SE0CyJn2Z5SaSref5plQWb5FlWnkUFUV6FhUi7rbateBCingh5LdrQNaxDV76iuRLUu1jBInjWlZAkL+Vs2fGZirB6oslkp/1f+bZqRy35AMgd9miNAGYosQTAtkFP9IuXfyn9NC7eyEtIpCPYvvIJpcj+d1THIhVrlofy72jF8N5gpERHwtztmrAtAYuSMYbXr8EGaP41uJZCyZOk9VA6szgFVlxrWcOh16RWAv4H9C/7nSHTMd1bk6VISkLdoD78grX+LW0WKcNWQFJ0g6id+Mvp9Haf5hln9myHyOQ2xWUb1DVlemjKr2KT+zRCqn48+ckW+RQYG9W9mIK42DGSJfCwGSsCLDf7K69/MIPNtq/DxVYA8k439C8THZ+IvJE5jME9xnIYC1b+V3gJD5ijnN/ip8qBBrG0ra+KdtoD4W9mNBST1zFpTYrH28lakbaAknHEtTBYkFaHRXmSVyO2+Qik0iaZi+xd4kPSTLqNLvu9SHPBSGYNmccnq36TwyW4eLSUiAy5vWnlRZ2tAoUjxWmaS6c7xi4iq20tbUj+OzpRb5G8kaXHIeYHW/EjTT0Rl64wA2D2xF7aTBZ3xueaVzNNUaq5USvaiW8Nlzn+7A1XMAt+dRI2kZ3mS1rS0zwp/ozWiEq1M80VSgkp4tbbCBFS0GRf6FqunATVRwnJ/WhN10kxUlD815G+0VEA406mPIwxM0bq2s6bPQUpFNOJv1N2U2pwhrU0Uuhmg7lfzJuBvTwb8je6gOor5CWhaVu6P6ksn/DCu6ShKa+jK1ZfCt2XVH7D+cswNDNqNJlVrIHRntOkCRFRkIuI97SEyw6XqvIGAhqwIfF2RiENmV/tx3rrXIvF2zh7vIemp+eZjAqTLRRaZL+BLF8+dS9LtX+bPx5R9ypPE32zst4AFv6KJzlSzmyDPqlnZM4N7KjIaFkTULwi00bZQOAt9KZHptyCijr9Z27tmuv/wDm3xIRoseNOGzpApHDlHRbEnkacBPAdDcOtqmNJnSxw8gHbtHApvgzQC57OBtVPq2AG4MUlkNdaCM+a0YPgb7VHJQwcg75DNCpNhHIlNOCFNpU9VgCJOROaVPVlGRRjL69/U/lg4NgIeLPYmY6mRRMavczGE8TfFP7dyCwU+20S4n7E9TfXy/ZxtIsufZrmWnTPwmJ0UZymN6PKbabLn08jib/e9sXbkF3PscUdcV9QaTQ7Ky4fJiBAXWfztpzDG2hlD7AnrZ4Pz54bRuj8dD8IwHIyn/XUEAw6g/g3MlC8lfbZ6Lh3IF12xsnumGM2ywPq3YNMZT22fu4f8xSvmVg9OD6iIpfOnUrDnlr5tbJ7PJqt/qwjs5rQXm5ciAtervvuz+NNZXwyrXQ1bqe/+rFhzfunU2nKxmj81hm4bpbUbKcAW/Rrvz+qlGhmPIxsDGSGnxKJxz4OvJ9OnkvenxBuV/HyhzvtPuznH4U82BYuchtGePyer1vtPA91JzVccw57pfI2SMCcqUOv9CC3BXUcH+QVV280OHGlEUO8tbcJbVs7hPokC/m6EqL/fiUOPXGFuRYgN7jtKF6twPB31k26vtW7d7rdY6bMXACb5UxuIygdFTVH7/afr3DPabaP++0+3Nm+TkaBG/nbD2s7dVWI0cf9pZPHiIwVjYHn3DYj4zpXLhvARzqOhtfo3C2gNil94iJDePJWq9i8UQJDYW5Gr5Nvyof0Lzd1f7/eFFyhoodxhic6obPSW3e64zJo8jOkULF3/Zh9RP9TehcOAvUsWFKEdm79COO5OTWbsZJpo7gNG54fUKIsG/nbTOeldh7fZWHCnM8ifyg+wqgHtda976QxWj1/Xcs9Ok+dwvk+6W5y9ADC9f+E/RKX7T38HKtx/+lsAKGqjN1xXAMDfasvZ1ATqb1tMl/wK0P2nhidc/36Qa7XMDkL6H6Dyt78nocrfbNya+duQ5W9/zVxc0f/bk/QDd1XejTrCFeI2ik9/VcB3uzhaLA/Pf3INOjg4ODg4ODg4ODg4ODg4ODg4ODg4ODj8afwDO6eQHJ+X9AcAAAAASUVORK5CYII=\")
}\r\n \r\n
\r\n \r\n \r\n \r\n Need help?\r\n Click here\r\n
\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n","export default __webpack_public_path__ + \"static/media/icons.22c93d84.svg\";","import React from \"react\";\r\nimport Icons from \"../components/icon/icons.svg\"; // Path to your icons.svg\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst Icon = ({\r\n name,\r\n color,\r\n size,\r\n customClassName,\r\n containerClass,\r\n labelClass,\r\n labelValue,\r\n onClick,\r\n hidden\r\n}) => (\r\n \r\n \r\n \r\n \r\n {labelValue}\r\n
\r\n);\r\n\r\nIcon.propTypes = {\r\n name: PropTypes.string,\r\n color: PropTypes.string,\r\n size: PropTypes.string,\r\n customClassName: PropTypes.string,\r\n};\r\n\r\nexport default Icon;\r\n","import React, { Component } from \"react\";\r\nimport { Form } from \"react-bootstrap\";\r\nimport { LOGIN_STATUS as loginStat, EXCLUDE_SELECT_CLIENT_FOR_ROLE_ID } from \"../../../utils/constant.utils\";\r\nimport { valueExist } from '../../../utils/helpers.utils';\r\nimport Icons from \"../../icon\";\r\nexport class RightSelection extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = {\r\n internalSelected: false,\r\n externalSelected: false,\r\n isShowClientSelection: !valueExist(EXCLUDE_SELECT_CLIENT_FOR_ROLE_ID, parseInt(sessionStorage.getItem('UserRoleID')))\r\n }\r\n this.pageRedirectExternal = this.pageRedirectExternal.bind(this);\r\n this.pageRedirectInternal = this.pageRedirectInternal.bind(this);\r\n }\r\n \r\n async componentWillReceiveProps(nextProps) {\r\n const { login, isClientUser, loginSelection, redirectToPage, externalRedirectionEnabled, clientSelectionEnabled } = this.props;\r\n if(nextProps.isClientUser !== isClientUser){\r\n if(nextProps.isClientUser){\r\n await this.redirectToInternalExternal(loginStat.external);\r\n }\r\n }\r\n if (externalRedirectionEnabled && nextProps.clientSelectionEnabled !== clientSelectionEnabled) {\r\n if (nextProps.clientSelectionEnabled) {\r\n await this.redirectToInternalExternal(loginStat.external);\r\n }\r\n }\r\n }\r\n pageRedirectExternal = async (e) => {\r\n e.preventDefault();\r\n const { clientScopes, clientSelectionEnabled, isLoggedIn, isClientUser, hasUserScope } = this.props;\r\n \r\n if (clientSelectionEnabled && !isLoggedIn){\r\n await this.redirectToInternalExternal(loginStat.external);\r\n } else if(hasUserScope && isClientUser && clientScopes.length === 0){\r\n await this.redirectToInternalExternal(loginStat.external);\r\n } else if(!clientSelectionEnabled && !this.state.isShowClientSelection){\r\n await this.redirectToInternalExternal(loginStat.external);\r\n } \r\n this.setState({ internalSelected: false, externalSelected: true });\r\n }\r\n\r\n pageRedirectInternal = async (e) => {\r\n e.preventDefault();\r\n const { clientSelectionEnabled, isLoggedIn, isSsoEnabled } = this.props;\r\n if (clientSelectionEnabled && !isLoggedIn) {\r\n await this.redirectToInternalExternal(loginStat.internal);\r\n }\r\n //To be implementd for Internal redirection\r\n var newURL = process.env.REACT_APP_INTERNAL_REDIRECTION_URL;\r\n if (!isSsoEnabled) {\r\n let uname = window.localStorage.getItem(\"atemusername\");\r\n let pass = window.localStorage.getItem(\"atempassword\");\r\n\r\n newURL = newURL +'/'+uname+'/'+pass+'/';\r\n }\r\n window.location.replace(newURL);\r\n this.setState({ internalSelected: true, externalSelected: false });\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n renderEnableExternalRedirection = () => {\r\n const { onSelectClientScope, clientScopes, clientScopeSelected } = this.props;\r\n return (\r\n this.state.isShowClientSelection &&\r\n \r\n \r\n \r\n {this.displayOptions(clientScopes)}\r\n \r\n
\r\n )\r\n }\r\n renderClientSelection = () => {\r\n const { internalSelected, externalSelected } = this.state;\r\n const { onSelectClientScope, clientScopes, isClientUser, clientScopeSelected } = this.props;\r\n return (\r\n <>\r\n {\r\n !isClientUser && this.state.isShowClientSelection &&\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n redirectToInternalExternal = async (redirectTo) => {\r\n const { login, loginSelection, redirectToPage, setLanguage } = this.props;\r\n loginSelection(redirectTo);\r\n await login();\r\n redirectToPage();\r\n setLanguage();\r\n }\r\n\r\n render(){\r\n const { externalRedirectionEnabled} = this.props;\r\n return(\r\n <> \r\n {this.state.isShowClientSelection && \r\n \r\n
\r\n \r\n \r\n
\r\n Internal\r\n \r\n
\r\n \r\n
\r\n External\r\n \r\n Client Selection\r\n
\r\n }\r\n {\r\n externalRedirectionEnabled ? this.renderEnableExternalRedirection() : this.renderClientSelection()\r\n }\r\n \r\n\r\n Need help?\r\n Click here\r\n
\r\n \r\n )\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { loginActions } from \"../../../store/user-login.reducer\";\r\nimport { translationAction } from \"../../../store/external/translation-reducer/translation.reducer\";\r\nimport { trueFalseToBoolean } from \"../../../utils/helpers.utils\";\r\nimport { setAuthToken } from \"../../../utils/api.utils\";\r\nimport { LOGIN_STATUS as loginStat, PAGE_ROOT_URLS as rootURls, REDIRECT_TO_EXTERNAL_FOR_ROLE_ID} from \"../../../utils/constant.utils\";\r\nimport { UserManager } from \"../../../utils\";\r\nimport clientLogo from \"../../../../img/ATEM-LOGO-White@2x.png\"\r\nimport { RightSection } from \"./login.component\";\r\nimport { RightSelection } from \"./right-selection.component\";\r\nimport { valueExist } from '../../../utils/helpers.utils';\r\nimport \"./login.component.css\"\r\nclass Login extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state= {\r\n showLogin:false,\r\n }\r\n }\r\n async componentDidMount() {\r\n const { isSsoEnabled, oidcUser, submitCrendentials, setLanguage, login, loginSelection } = this.props;\r\n if (isSsoEnabled) {\r\n this.setState({ showLogin: false });\r\n sessionStorage.setItem('EntryPathName', this.props.location.pathname);\r\n if (oidcUser != null) {\r\n setAuthToken(oidcUser.access_token);\r\n\r\n var isLoggedSuccess = await submitCrendentials(oidcUser.access_token, null);\r\n if (isLoggedSuccess) {\r\n if (valueExist(REDIRECT_TO_EXTERNAL_FOR_ROLE_ID, parseInt(sessionStorage.getItem('UserRoleID')))) {\r\n loginSelection(loginStat.external);\r\n await login();\r\n this.redirectToPage();\r\n setLanguage();\r\n }\r\n }\r\n }\r\n else {\r\n UserManager.signinRedirect();\r\n }\r\n }\r\n else {\r\n this.setState({ showLogin: true });\r\n }\r\n }\r\n //async componentWillReceiveProps(nextProps) {\r\n //const { login, isClientUser, loginSelection } = this.props;\r\n //if (nextProps.isClientUser !== isClientUser) {\r\n // if (nextProps.isClientUser) {\r\n // loginSelection(loginStat.external);\r\n // await login();\r\n // this.redirectToPage();\r\n // }\r\n //}\r\n //}\r\n redirectToPage = () => {\r\n const { location, isLoggingIn, history } = this.props;\r\n var internalPathBase = rootURls.internal.split(\"/\")[1];\r\n var externalPathBase = rootURls.external.split(\"/\")[1];\r\n\r\n this.setState({\r\n isLoading: true\r\n });\r\n \r\n var url;\r\n\r\n if (location.pathname === '/userlogin' && !isLoggingIn) {\r\n url = sessionStorage.getItem('logInStatus') === loginStat.internal ? rootURls.internal : rootURls.external;\r\n } else {\r\n if (location.pathname.toLowerCase().includes('external/inventory') === false) {\r\n var url = location.pathname.replace(/^(\\/.*?\\/)([^/]+)/gm, '$1' + sessionStorage.getItem('DealName'));\r\n if (location.pathname.split(\"/\")[1] === internalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.internal) {\r\n url = rootURls.external;\r\n }\r\n if (location.pathname.split(\"/\")[1] === externalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.external) {\r\n url = rootURls.internal;\r\n }\r\n }\r\n else {\r\n url = location.pathname;\r\n history.push(url);\r\n return;\r\n }\r\n \r\n if (location.pathname.toLowerCase().includes('external/invoices') === false) {\r\n var url = location.pathname.replace(/^(\\/.*?\\/)([^/]+)/gm, '$1' + sessionStorage.getItem('DealName'));\r\n if (location.pathname.split(\"/\")[1] === internalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.internal) {\r\n url = rootURls.external;\r\n }\r\n if (location.pathname.split(\"/\")[1] === externalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.external) {\r\n url = rootURls.internal;\r\n }\r\n }\r\n else {\r\n url = location.pathname;\r\n history.push(url);\r\n return;\r\n }\r\n\r\n if (location.pathname.toLowerCase().includes('external/invoice') === false) {\r\n var url = location.pathname.replace(/^(\\/.*?\\/)([^/]+)/gm, '$1' + sessionStorage.getItem('DealName'));\r\n if (location.pathname.split(\"/\")[1] === internalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.internal) {\r\n url = rootURls.external;\r\n }\r\n if (location.pathname.split(\"/\")[1] === externalPathBase && sessionStorage.getItem('logInStatus') !== loginStat.external) {\r\n url = rootURls.internal;\r\n }\r\n }\r\n else {\r\n url = location.pathname;\r\n history.push(url);\r\n return;\r\n }\r\n }\r\n history.push(url);\r\n };\r\n\r\n showLoginForm = (showItem) => {\r\n this.setState({showLogin:showItem})\r\n }\r\n render(){\r\n const {showLogin} = this.state;\r\n const {isSsoEnabled,\r\n submitCrendentials,\r\n clientScopes,\r\n clientSelectionEnabled,\r\n loginSelection,\r\n onSelectClientScope,\r\n login,\r\n isLoggedIn,\r\n isLoggingIn,\r\n isLoggingOut,\r\n isClientUser,\r\n hasUserScope,\r\n isLoginError, \r\n setLanguage,\r\n externalRedirectionEnabled,\r\n clientScopeSelected\r\n } = this.props;\r\n return(\r\n \r\n {!isLoggingIn && !isLoggingOut &&\r\n
\r\n )\r\n }\r\n}\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(Object.assign({}, loginActions, translationAction), dispatch)\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { oidc, login, authentication, history, translation } = state;\r\n return {\r\n oidcUser: oidc && oidc.user,\r\n isSsoEnabled: trueFalseToBoolean(process.env.REACT_APP_AAD_AUTH_ENABLE),\r\n externalRedirectionEnabled: trueFalseToBoolean(process.env.REACT_APP_EXTERNAL_REDIRECTION),\r\n redirectInternalUrl: process.env.REACT_APP_INTERNAL_REDIRECTION_URL,\r\n ...login,\r\n ...authentication,\r\n ...history,\r\n ...translation\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Login);\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { UserManager } from '../../../utils';\r\nimport { loginActions } from \"../../../store/user-login.reducer\";\r\n\r\nclass SilentRenewCallback extends Component {\r\n\r\n componentDidMount() {\r\n UserManager.signinSilentCallback()\r\n .catch((error) => {\r\n console.log('Signin Silent Callback Error');\r\n console.log(error);\r\n });\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n }\r\n {\r\n // isLoggingIn && !isLoginError &&\r\n //\r\n \r\n 
\r\n \r\n Accenture Technology Expense Management\r\n \r\n
\r\n Welcome to
\r\n\r\n {\r\n !hasUserScope && !isSsoEnabled &&\r\n
\r\n \r\n Silent Renew Callback\r\n
\r\n );\r\n }\r\n \r\n}\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(loginActions, dispatch)\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { authentication } = state;\r\n return {\r\n ...authentication\r\n };\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SilentRenewCallback);\r\n","import React from \"react\";\r\nimport { propTypes } from \"react-bootstrap/esm/Image\";\r\nimport Icon from \"../components/icon\";\r\nfunction button({ children,customClassName,labelClass, labelName, onClick,iconLeft, iconSize, iconRight, clickFunction, iconRightSize, searchValue, showFilter,clearSearhValue, isDisable }) {\r\n function clearSearch() {\r\n clearSearhValue(\"\")\r\n }\r\n\r\n var disable = isDisable ? 'disabled' : ''; \r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default button;\r\n","export default __webpack_public_path__ + \"static/media/full-page-bg.d4c0e8ef.png\";","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Col } from 'react-bootstrap';\r\nimport { loginActions } from '../../../store/user-login.reducer';\r\nimport ButtonIcon from '../../button';\r\nimport backgroundImg from \"../../../../img/full-page-bg.png\"\r\nimport clientLogo from \"../../../../img/ATEM-LOGO-White@2x.png\"\r\nclass InvalidAccess extends Component {\r\n logout = async (e) => {\r\n const {logout} = this.props;\r\n e.preventDefault();\r\n logout();\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n {searchValue}\r\n \r\n
}\r\n\r\n {children}\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(loginActions, dispatch)\r\n }\r\n }\r\n \r\n function mapStateToProps(state) {\r\n return {\r\n ...state,\r\n ...state.history\r\n };\r\n }\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InvalidAccess);\r\n","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {LOGIN_STATUS as loginStat } from '../../../utils/constant.utils';\r\nclass PageNotFound extends Component {\r\n render() {\r\n let logInStatus = sessionStorage.getItem('logInStatus');\r\n let homeUrl = logInStatus === loginStat.external ? '/external' \r\n : logInStatus === loginStat.internal ? '/internal' : '/';\r\n return (\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n Accenture Technology Expense Management\r\n \r\n
\r\n Welcome to
\r\n\r\n this.logout(e)} iconLeft=\"sign-out-alt\" iconSize=\"16px\" customClassName=\"userprofile-logout\" labelName=\"Login page\"/> \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ACCESS DENIED
\r\nYou are not authorized to access this page. Please contact the ATEM Support Team.
\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\nexport default (PageNotFound);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { loginActions } from '../../../store/user-login.reducer';\r\nimport ButtonIcon from '../../button';\r\nimport backgroundImg from \"../../../../img/full-page-bg.png\"\r\nimport clientLogo from \"../../../../img/ATEM-LOGO-White@2x.png\"\r\nclass LogOut extends Component {\r\n login = async (e) => {\r\n e.preventDefault();\r\n window.location.href = '/userlogin';\r\n }\r\n render() {\r\n return (\r\n 404
\r\nPage not found.
\r\n Go home.\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(loginActions, dispatch)\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n ...state,\r\n ...state.history\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LogOut);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { TRANSLATIONS, INTERNAL_TRANSLATIONS, LOGIN_STATUS as loginStat } from '../../../utils/constant.utils';\r\nimport { translationAction } from '../../../store/external/translation-reducer/translation.reducer'\r\n\r\nclass Translation extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n translation: ''\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n var languageLocale = JSON.parse(sessionStorage.getItem('User'))?.Employee.LanguageLocale;\r\n var locale = languageLocale ? languageLocale : this.props.locale === null ? 'en_US' : this.props.locale;\r\n\r\n this._updateTranslation(this.props.translationKey, locale);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n // update the translation if one of the props will change\r\n if (this.props.translationKey !== nextProps.translationKey || this.props.locale !== nextProps.locale) {\r\n this._updateTranslation(nextProps.translationKey, nextProps.locale);\r\n }\r\n }\r\n\r\n onChangeState = (value, translationKey) => this.props.onChangeTranslation(value, translationKey);\r\n\r\n _updateTranslation(translationKey, activeLanguageCode) {\r\n if (translationKey && activeLanguageCode) {\r\n try {\r\n this.setState({\r\n translation: sessionStorage.getItem('logInStatus') == loginStat.internal\r\n ? INTERNAL_TRANSLATIONS[activeLanguageCode][translationKey]\r\n : TRANSLATIONS[activeLanguageCode][translationKey]\r\n }, () => {\r\n if (this.props.getOnlyText == true) {\r\n this.onChangeState(this.state.translation, translationKey);\r\n }\r\n });\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n if (!this.state.translation || this.state.translation === '') return null;\r\n return (\r\n <>{this.props.getOnlyText === true ? '': this.state.translation}\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default connect(\r\n state => state.translation,\r\n dispatch => bindActionCreators(translationAction, dispatch),\r\n null,\r\n {\r\n pure: false\r\n }\r\n)(Translation);\r\n","import { React, useEffect, useRef, createRef, Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { loadUserSessionStorage } from '../../../../utils/helpers.utils';\r\nimport { translationAction } from '../../../../store/external/translation-reducer/translation.reducer';\r\nimport Translation from \"../../../common/translation/translation.component\"\r\nimport \"./language.component.css\";\r\n\r\nclass LangSwitchContainer extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = ({\r\n showClass: \"\",\r\n })\r\n this.wrapperRef = createRef();\r\n }\r\n\r\n checkIfClickedOutside = (e) => {\r\n if (\r\n this.props.navToggle &&\r\n this.wrapperRef.current &&\r\n !this.wrapperRef.current.contains(e.target)\r\n ) {\r\n this.props.onClose();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { languages, getToolLanguages, setLanguage } = this.props;\r\n if (languages.length === 0) {\r\n getToolLanguages();\r\n }\r\n if (loadUserSessionStorage() !== null && loadUserSessionStorage().Employee.LanguageLocale !== null && loadUserSessionStorage().Employee.LanguageLocale !== '') {\r\n setLanguage(loadUserSessionStorage().Employee.LanguageLocale);\r\n sessionStorage.setItem('Current_Language', loadUserSessionStorage().Employee.LanguageLocale);\r\n }\r\n window.addEventListener('mousedown', this.checkIfClickedOutside)\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('mousedown', this.checkIfClickedOutside)\r\n }\r\n\r\n render() {\r\n const { languages, setLangConfodalOpen, locale } = this.props;\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Accenture Technology Expense Management\r\n \r\n
\r\n Welcome to
\r\n\r\n
\r\n this.login(e)} iconLeft=\"sign-out-alt\" iconSize=\"16px\" customClassName=\"userprofile-logout\" labelName=\"Login page\" />\r\n
\r\n\r\n Logout
\r\nYou have been logged out.
\r\n\r\n
\r\n {languages.length > 0 ?\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default connect(\r\n state => state.translation,\r\n dispatch => bindActionCreators(translationAction, dispatch),\r\n null,\r\n {\r\n pure: false\r\n }\r\n)(LangSwitchContainer);\r\n","export default \"data:image/png;base64,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\"","import React, { Component } from \"react\";\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { CONFIRMATION_VALUE } from \"../../../utils/constant.utils\";\r\nexport class ConfirmationNotificationModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false\r\n }\r\n }\r\n handelAcceptConfirmation = (okCancel) => {\r\n this.props.handleModal(okCancel)\r\n }\r\n render() {\r\n const {isDecisionModal}=this.props;\r\n return (\r\n <>\r\n \r\n
\r\n : \"\"\r\n }\r\n \r\n
\r\n {languages.map((language, i) =>\r\n setLangConfodalOpen(true, language.Key)}>\r\n {language.Value}\r\n \r\n )}\r\n
\r\n \r\n {this.props.message}\r\n
\r\n \r\n {DATE_FORMATS_MESSAGE.SeconeMessage}\r\n \r\n }\r\n title=\"Default Date Format\"\r\n handleModal={this.handleConfirmationModal}\r\n disabled={this.state.isSaving}\r\n customClass={'comment-notification-modal confirm-modal-container'}\r\n discardBtn={true}\r\n />\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { adminSetting } = state;\r\n\r\n return {\r\n adminSetting\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, adminSettingActions),\r\n dispatch\r\n )\r\n)(DateFormat);","import { React, Component, createRef } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { loginActions } from \"../../../../store/user-login.reducer\";\r\nimport { LOGIN_STATUS as loginStat, LOGIN_USER_ACCESS as userAccess, MOBILE_POLICY_URL as mobilePolicyURL, USER_GUIDE_URL as userGuideURL } from \"../../../../utils/constant.utils\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../../utils/rbac-constants.utils\";\r\nimport userimage from \"../../../../../../src/img/Avatar.png\";\r\nimport Icon from \"../../../icon\";\r\nimport ButtonIcon from \"../../../button\";\r\n//import { GrooveAvatar } from \"tfo-groove\";\r\nimport \"./userprofile.component.css\";\r\nimport Translation from \"../../../common/translation/translation.component\"\r\nimport { Link } from \"react-router-dom\";\r\nimport DateFormat from \"./date-format/dateformat\";\r\nimport { USER_ROLES_ID, EXTERNAL_LINK_TYPES } from \"../../../../constants/external-constants\";\r\nimport { httpGet } from '../../../../utils/api.utils';\r\n\r\nclass ProfileContainer extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = ({\r\n showClass: \"\",\r\n modalVisible: false,\r\n userGuideExternalLink: \"\",\r\n mobilePolicyExternalLink: \"\"\r\n })\r\n this.wrapperRef = createRef();\r\n }\r\n\r\n checkIfProfileClickedOutside = (e) => { \r\n if (\r\n this.props.navToggle &&\r\n this.wrapperRef.current &&\r\n !this.wrapperRef.current.contains(e.target) \r\n ) {\r\n if(!this.state.modalVisible)\r\n {\r\n this.props.onClose();\r\n } \r\n }\r\n }\r\n\r\n handleModal(value) {\r\n this.setState({\r\n modalVisible:value\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n window.addEventListener('mousedown', this.checkIfProfileClickedOutside);\r\n this.getExternalLink(EXTERNAL_LINK_TYPES.userGuide);\r\n this.getExternalLink(EXTERNAL_LINK_TYPES.mobilePolicy);\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('mousedown', this.checkIfProfileClickedOutside);\r\n }\r\n logout = async (e) => {\r\n\r\n\r\n e.preventDefault();\r\n this.props.logout();\r\n }\r\n\r\n getExternalLink = async (externalLinkId) => {\r\n\r\n var url = 'external/externallink/getExternalLink?externalLinkID=' + externalLinkId;\r\n\r\n var res = await httpGet(url);\r\n\r\n if (res) {\r\n if (externalLinkId == 1)\r\n {\r\n this.setState({\r\n userGuideExternalLink: res[0].URL\r\n });\r\n }\r\n else {\r\n this.setState({\r\n mobilePolicyExternalLink: res[0].URL\r\n });\r\n }\r\n }\r\n \r\n };\r\n\r\n render() {\r\n let userModel = JSON.parse(sessionStorage.getItem('User')).Employee;\r\n let loginStatus = sessionStorage.getItem('logInStatus');\r\n let dealName = sessionStorage.getItem('DealName');\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.PersonalDashboardR, ACCESS_MODULE.PersonalDashboardRE, ACCESS_MODULE.PersonalDashboardRW])\r\n || validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyDirectReportsDashboardR, ACCESS_MODULE.MyDirectReportsDashboardRE, ACCESS_MODULE.MyDirectReportsDashboardRW]);\r\n\r\n const isAdmin = sessionStorage.getItem('UserRoleID') == USER_ROLES_ID.admin;\r\n\r\n return (\r\n \r\n {
\r\n
\r\n {\r\n this.state.showOption &&\r\n \r\n \r\n \r\n {dateFormatOptions.map((item, index) => (\r\n
\r\n
\r\n } \r\n \r\n
\r\n \r\n {
| {item.Value} | \r\n({moment().format(item.Value)}) | \r\n
\r\n this.logout(e)} iconLeft=\"sign-out-alt\" iconSize=\"16px\" customClassName=\"userprofile-logout btn-custom-violet-hover-outline\" labelClass=\"logout-label\" labelName=\"Logout\" />\r\n }\r\n
\r\n );\r\n }\r\n}\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(loginActions, dispatch)\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n ...state,\r\n ...state.history\r\n };\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ProfileContainer);","export default __webpack_public_path__ + \"static/media/icon-circuit-loader.93bb2d8c.gif\";","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Modal, Button, ModalBody, ModalFooter, Row, Col } from 'react-bootstrap';\r\nimport { translationAction } from '../../../store/external/translation-reducer/translation.reducer';\r\nimport { loadUserSessionStorage } from '../../../utils/helpers.utils';\r\nimport { LOGIN_STATUS as loginStat } from '../../../utils/constant.utils';\r\nimport Loader from '../../../../img/icon-circuit-loader.gif';\r\nimport './modal-popover.component.css';\r\n\r\nclass UserLanguageModal extends Component {\r\n\r\n componentDidMount() {\r\n const { setLanguage } = this.props;\r\n if (loadUserSessionStorage() != null && loadUserSessionStorage().Employee.LanguageLocale != null && loadUserSessionStorage().Employee.LanguageLocale != '') {\r\n setLanguage(loadUserSessionStorage().Employee.LanguageLocale);\r\n }\r\n }\r\n\r\n render() {\r\n const { isLangConfirmModal, setLangConfodalOpen, setLanguage, languageLoading } = this.props;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n {userModel.FirstName + \" \" + userModel.LastName}
\r\n{loginStat.external === loginStatus ? userAccess.external : userAccess.internal}
\r\n \r\n
\r\n \r\n
\r\n {\r\n isAdmin && \r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Preferred Language\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {(languageLoading) ? 
: ''}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => state.translation,\r\n dispatch => bindActionCreators(translationAction, dispatch)\r\n)(UserLanguageModal);","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport IdleTimer from 'react-idle-timer/dist/modern';\r\nimport { Modal, Button, ModalBody, ModalFooter, Row, Col } from 'react-bootstrap';\r\nimport { loginActions } from '../../../store/user-login.reducer';\r\nimport { areObjectsEqual } from '../../../utils/helpers.utils'\r\n\r\nclass SessionExpModal extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.idleTimer = null;\r\n this.state = {\r\n showModal: false,\r\n idleWarnings: 0,\r\n uiTimeOutDetails: this.props.uiTimeOutDetails,\r\n isLoggedIn: sessionStorage.getItem('access_token') !== null\r\n }\r\n\r\n this.onAction = this.onAction.bind(this);\r\n this.onActive = this.onActive.bind(this);\r\n this.onIdle = this.onIdle.bind(this);\r\n }\r\n\r\n async componentDidMount() {\r\n await this.props.setUIIdleTime();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.isSilentRenewError !== prevProps.isSilentRenewError && this.props.isSilentRenewError) {\r\n this.props.silentRenewErrorAct();\r\n }\r\n if (!areObjectsEqual(this.props.uiTimeOutDetails, prevProps.uiTimeOutDetails)) {\r\n this.resetTimer()\r\n }\r\n }\r\n\r\n logout = async (event) => {\r\n event.preventDefault();\r\n this.props.logout();\r\n };\r\n\r\n continueSession = async (event) => {\r\n event.preventDefault();\r\n this.setState({\r\n idleWarnings: 0,\r\n showModal: false\r\n })\r\n };\r\n\r\n getTimeLeft = () => {\r\n const { idleWarningNotif, idleDuration } = this.state.uiTimeOutDetails\r\n var timeLeft = 0;\r\n\r\n idleWarningNotif.forEach((element, index) => {\r\n if ((this.state.idleWarnings - 1) >= index) {\r\n timeLeft = timeLeft + element;\r\n }\r\n });\r\n return (idleDuration - timeLeft);\r\n }\r\n resetTimer = () => {\r\n this.setState({ \r\n uiTimeOutDetails: this.props.uiTimeOutDetails,\r\n showModal: false\r\n });\r\n this.idleTimer.reset()\r\n this.forceUpdate();\r\n }\r\n\r\n onAction = (e) => {\r\n this.idleTimer.reset()\r\n this.forceUpdate();\r\n }\r\n\r\n onActive = (e) => {\r\n this.forceUpdate();\r\n }\r\n\r\n onIdle = (e) => {\r\n const { idleWarningNotif } = this.state.uiTimeOutDetails;\r\n if (!this.state.isLoggedIn)\r\n return;\r\n if ((idleWarningNotif.length - 1) == this.state.idleWarnings) {\r\n this.props.logout();\r\n return;\r\n }\r\n console.log(this.idleTimer);\r\n this.setState({\r\n idleWarnings: this.state.idleWarnings + 1,\r\n showModal: true,\r\n }, () => {\r\n idleWarningNotif.forEach((element, index) => {\r\n if (this.state.idleWarnings == index) {\r\n this.idleTimer.reset();\r\n this.forceUpdate();\r\n return;\r\n }\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const { idleWarningNotif } = this.state.uiTimeOutDetails;\r\n const timeLeft = this.getTimeLeft();\r\n const idleTime = idleWarningNotif[this.state.idleWarnings];\r\n const timeout = 1000 * 60 * idleTime;\r\n return (\r\n <>\r\n \r\n Translations of pages on ATEM Application is performed by Google Translate. Google Translate is a free online language translation service that can translate text into different languages.\r\n
\r\n Computerized translations from one language to another is a literal translation that may not represent the accurate content.\r\n Whenever Google Translate generates a translation, it uses references from various documents to literally translate the words into the most common used term, \r\n which may not be the way the content is typically spoken or written in a chosen language. By detecting patterns in documents that have already been translated by human translators, Google Translate makes a best guess as to what a similar translation could be. \r\n The translation should not be considered exact and in some cases may include incorrect or offensive language.\r\n
\r\n If you have any questions about Google Translate, please click the following link:\r\n http://translate.google.com/about/intl/en_ALL/\r\n
\r\n If you want to proceed with the translation please select \"Continue\", otherwise “Discard”.\r\n
\r\n \r\n \r\n Computerized translations from one language to another is a literal translation that may not represent the accurate content.\r\n Whenever Google Translate generates a translation, it uses references from various documents to literally translate the words into the most common used term, \r\n which may not be the way the content is typically spoken or written in a chosen language. By detecting patterns in documents that have already been translated by human translators, Google Translate makes a best guess as to what a similar translation could be. \r\n The translation should not be considered exact and in some cases may include incorrect or offensive language.\r\n
\r\n If you have any questions about Google Translate, please click the following link:\r\n http://translate.google.com/about/intl/en_ALL/\r\n
\r\n If you want to proceed with the translation please select \"Continue\", otherwise “Discard”.\r\n
\r\n { setLangConfodalOpen(false, '') }}>\r\n Discard\r\n \r\n \r\n { setLanguage() }}>\r\n Confirm\r\n \r\n
\r\n \r\n Your session will end in {timeLeft} minutes due to inactivity. Please choose to stay signed in or to log off.
\r\n \r\n \r\n { this.logout(e) }}>\r\n Log Out\r\n \r\n { this.continueSession(e) }}>\r\n Continue Session\r\n \r\n
\r\n \r\n { this.logOut(e) }}>\r\n \r\n \r\n Data Privacy\r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n dispatch,\r\n ...bindActionCreators(loginActions, dispatch)\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n const { authentication } = state;\r\n return {\r\n ...authentication\r\n };\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DataPrivacyForm);\r\n","import { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport { convertToFormatDate, isIsoDate, isValidFormattedDate } from \"./../../../utils/helpers.utils\";\r\n\r\nclass FormatDate extends Component {\r\n render() {\r\n const { date, activeDateFormat } = this.props;\r\n const isValidDate = isIsoDate(date) || isValidFormattedDate(date);\r\n\r\n return isValidDate ? convertToFormatDate(date, activeDateFormat.Name) : \"\";\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { activeDateFormat } = state.adminSetting;\r\n return {\r\n activeDateFormat\r\n };\r\n }\r\n)(FormatDate)","import React, { Component } from 'react';\r\nimport { ModalHeader, ModalTitle } from 'react-bootstrap';\r\n\r\nclass DetailsModalHeader extends Component {\r\n \r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default DetailsModal;","import React, { Component } from \"react\";\r\nimport \"./no-subscription.component.css\"\r\nexport class NoSubscription extends Component {\r\n render() {\r\n const { title, customClass, hideIcon, noOverviewContainer }=this.props\r\n return(\r\n \r\n {hideIcon ?
:\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Icons from \"../../icon\";\r\n\r\nexport class TheadExhibit1 extends Component {\r\n \r\n handleClick = (value) => (event) => this.props.onColumnClick(value);\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n }\r\n {title}
\r\n\r\n {value.name} \r\n {value.isSortedAsc ? \r\n
\r\n \r\n
\r\n \r\n {\r\n !this.props.noDataAvailable ?\r\n
\r\n \r\n {itemValue}\r\n {this.getWarningIcon(item)}\r\n
\r\n );\r\n } else {\r\n return itemValue;\r\n }\r\n}\r\n\r\n\r\n getProp(columns, name) {\r\n return Object.entries(columns)\r\n .filter((x) => {\r\n return x[1].name === name;\r\n })\r\n .map((x) => x[0])[0];\r\n }\r\n\r\n\r\ngetWarningIcon = (item) =>{\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\ngetColumns = () => { \r\n return this.props.columns[0] ? Object.values(this.props.columns[0]) : Object.values(this.props.columns); \r\n}\r\n\r\ngetColumnProperties = (column, item, index) => {\r\n const columnConfig = this.props.columnFormatRendering ? this.props.columnFormatRendering[column.propName] : null;\r\n const dataNotFound = item[column.propName] == null || item[column.propName] === '' || TABLE_NO_LINK_DATA.includes(item[column.propName]);\r\n const renderAsLink = columnConfig && dataNotFound && columnConfig.createLinkText & columnConfig.isLink ? true : column.isLink;\r\n const className = (index === 0 || column.isLink && renderAsLink) ? 'col-text-overflow list-item-link' : 'col-text-overflow';\r\n const clickHandler = ((this.props.haveLink && index === 0 || column.isLink)) ? this.handleRowClick(item, column?.isLink) : null;\r\n\r\n return { dataNotFound, renderAsLink, className, clickHandler };\r\n}\r\n\r\ngetTdClassName = (item,column, dataNotFound, renderAsLink, className) => {\r\n const columnConfig = this.props.columnFormatRendering ? this.props.columnFormatRendering[column.propName] : null;\r\n const isStatusInvalid = item.AuditRulesResultsStatusName === 'Invalid';\r\n return `${((this.props.haveLink || column.isLink) && !dataNotFound) ? className : isDecimal(this.renderTableDataValue(item, column)) < 0 ? \"table-td-right\" : \"col-text-overflow\"} ${((columnConfig?.createLinkText && dataNotFound) && !isStatusInvalid) ? \"plus-icon\" : \"\"}`;\r\n}\r\n\r\ngetClickHandler = (column, item, dataNotFound, renderAsLink, clickHandler) => {\r\n if (this.props.columnFormatRendering) {\r\n return renderAsLink ? this.handleRowClick(column.propName, item, column?.isLink) : this.handleRowClick(column.propName, item, column?.isLink);\r\n }\r\n return (this.props.haveLink || column.isLink) ? clickHandler : this.handleRowClick(item, column?.isLink);\r\n}\r\n\r\ngetTableCellContent = (item, column, dataNotFound) => {\r\n const columnConfig = this.props.columnFormatRendering ? this.props.columnFormatRendering[column.propName] : null;\r\n const isStatusInvalid = item.AuditRulesResultsStatusName === 'Invalid';\r\n //if (dataNotFound && !item.BilledCircuitID && columnConfig) return null;\r\n\r\n if (dataNotFound && columnConfig) {\r\n if (columnConfig.noDataText) return columnConfig.noDataText;\r\n if (columnConfig.createLinkText) return {!isStatusInvalid ? columnConfig.createLinkText : \"\"};\r\n }\r\n\r\n return this.renderTableDataValue(item, column)\r\n}\r\n\r\nrenderTableData = (item) => {\r\n return this.getColumns().map((c, originalIndex) => {\r\n \r\n const index = originalIndex === 0 ? originalIndex : originalIndex - 1;\r\n \r\n if (c.hidden) return null;\r\n \r\n const { dataNotFound, renderAsLink, className, clickHandler } = this.getColumnProperties(c, item, index);\r\n \r\n return (\r\n \r\n \r\n {\r\n this.props.warningIconConfig?.tooltip\r\n }\r\n \r\n
\r\n \r\n
\r\n {this.props.isColSearchShow\r\n ? \r\n {value.name}\r\n
\r\n \r\n {\r\n !this.props.isNotSortable &&\r\n (value.isSorted ?\r\n !value.isSortedAsc ?\r\n
\r\n \r\n { this.onColumnSearchChange(e, value.propName) }}\r\n onBlur={(e) => this.handleBlur(e, value.propName)}\r\n onFocus={(e) => this.handleFocus(e) }\r\n onKeyUp={(e) => {\r\n if (e.key === 'Enter') {\r\n this.onColumnSearch(e, value.propName);\r\n }\r\n }}\r\n />\r\n
\r\n : ''\r\n }\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n {this.props.btnTooltip}\r\n
\r\n \r\n// \r\n// \r\n// \r\n//
\r\n//
\r\n// );\r\n// }\r\n// };\r\n\r\nexport class TableExhibit2 extends Component {\r\n enableUpdate(index){\r\n if (typeof this.props.deleteAction === TYPE_FUNCTION) { \r\n this.props.deleteAction(index) \r\n } else {\r\n alert(\"Function not available\")\r\n }\r\n }\r\n render() {\r\n const {\r\n onColumnClick,\r\n onColumnSearch,\r\n onColumnSearchChange,\r\n isColSearchShow,\r\n columns,\r\n isNotSortable,\r\n rowClickAction,\r\n pageList,\r\n id,\r\n tableClassName,\r\n isLoading,\r\n showDetails,\r\n enableUpdate,\r\n deleteAction,\r\n noDataAvailable,\r\n noAvailableData,\r\n hideStatusIcon,\r\n columnFormatRendering,\r\n warningIconConfig\r\n } = this.props;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n );\r\n }\r\n};\r\n","import React, { Component } from \"react\";\r\nimport Pagination from \"react-bootstrap/Pagination\";\r\nimport \"./pagination-component.css\";\r\n\r\n\r\nexport class PaginationExhibit2 extends Component {\r\n constructor(props) {\r\n super(props);\r\n handleLoad = handleLoad.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const { action, pages, modalPagination } = this.props;\r\n window.addEventListener(\"DOMContentLoaded\", () => handleLoad(action, pages, modalPagination));\r\n }\r\n \r\n componentWillUnmount() {\r\n const { action, pages, modalPagination } = this.props;\r\n window.removeEventListener(\"DOMContentLoaded\", () => handleLoad(action, pages, modalPagination));\r\n }\r\n\r\n handlerChangeSize = (event) => {\r\n this.props.resizePage(event.target.value);\r\n }\r\n\r\n render() {\r\n const { action, pages, modalPagination, hidePageSizeSelection } = this.props;\r\n return (\r\n \r\n {this.props.haveExternalDeleteBtn && \r\n pageList.map((item, index) => { \r\n return(\r\n
\r\n \r\n this.enableUpdate(index)}\r\n /> \r\n
\r\n )\r\n })\r\n }\r\n \r\n \r\n {displayFirst(action, pages)}\r\n {displayPrevious(action, pages)}\r\n {displayPages(action, pages, modalPagination)}\r\n {displayNext(action, pages)}\r\n {displayLast(action, pages)}\r\n \r\n {\r\n this.props.resizePage !== undefined &&\r\n <>\r\n Page Size\r\n \r\n {pages.TotalEntries.toLocaleString()} results found\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nfunction handleLoad() {\r\n var pageList = document.querySelectorAll(\".page-list\");\r\n var nextItem = document.querySelectorAll(\".next-link\");\r\n var endItem = document.querySelectorAll(\".end-link\");\r\n var previousLink = document.querySelectorAll(\".previous-link\");\r\n var firstLink = document.querySelectorAll(\".first-link\");\r\n\r\n pageList.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; pageList.length > i; i++) {\r\n pageList[i].classList.remove(\"isSelected\");\r\n }\r\n el.classList.add(\"isSelected\");\r\n })\r\n );\r\n\r\n //go to next page\r\n nextItem.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; pageList.length > i; i++) {\r\n if (pageList[i].classList.value.includes(\"isSelected\")) {\r\n pageList[i].classList.remove(\"isSelected\");\r\n let nextPageIndex = i + 1;\r\n \r\n // If modalPagination is true and next page index is beyond pageList, do nothing\r\n if (this.props.modalPagination) {\r\n this.props.action(this.props.pages.PageNumber + 1);\r\n } else {\r\n let nextPageIndex = i + 1;\r\n if (nextPageIndex < pageList.length) {\r\n pageList[nextPageIndex].classList.add(\"isSelected\");\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n })\r\n );\r\n\r\n //go to last item\r\n endItem.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; pageList.length > i; i++) {\r\n pageList[i].classList.remove(\"isSelected\");\r\n }\r\n pageList[pageList.length - 1].classList.add(\"isSelected\");\r\n })\r\n );\r\n\r\n //go to previous item\r\n previousLink.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; pageList.length > i; i++) {\r\n if (pageList[i].classList.value.includes(\"isSelected\") && i === 0) {\r\n pageList[i].classList.remove(\"isSelected\");\r\n \r\n // Decrement the page number only if at the beginning of displayed pages\r\n if (this.props.modalPagination) {\r\n this.props.action(this.props.pages.PageNumber - 1);\r\n } else {\r\n let prevPageIndex = i - 1;\r\n if (prevPageIndex >= 0) {\r\n pageList[prevPageIndex].classList.add(\"isSelected\");\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n })\r\n );\r\n\r\n //got to first Item\r\n firstLink.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; pageList.length > i; i++) {\r\n pageList[i].classList.remove(\"isSelected\");\r\n }\r\n pageList[0].classList.add(\"isSelected\");\r\n })\r\n );\r\n}\r\n\r\nfunction displayPages(action, pages, modalPagination) {\r\n let items = [];\r\n let startPage, endPage;\r\n\r\n if (pages.PageNumber === 0) {\r\n startPage = 0;\r\n endPage = Math.min(2, pages.TotalPages - 1);\r\n } else if (pages.PageNumber === pages.TotalPages - 1) {\r\n startPage = Math.max(0, pages.TotalPages - 3);\r\n endPage = pages.TotalPages - 1;\r\n } else {\r\n startPage = Math.max(0, pages.PageNumber - 1);\r\n endPage = Math.min(pages.PageNumber + 1, pages.TotalPages - 1);\r\n }\r\n\r\n for (let i = startPage; i <= endPage; i++) {\r\n items.push(\r\n {items}
;\r\n}\r\n\r\n\r\n\r\n\r\nfunction displayFirst(action, pages) {\r\n return (\r\n {items}
;\r\n}\r\n","import React from 'react';\r\nimport { Pagination as RBPagination } from 'react-bootstrap';\r\n\r\nimport \"./pagination-component.css\";\r\n\r\nexport const PaginationControl = ({\r\n pageIndex = 0,\r\n between = 3,\r\n total = 0,\r\n pageSize,\r\n changePage = pageNo => console.log(pageNo),\r\n pageSizes = [],\r\n resizePage = pageSize => console.log(pageSize),\r\n next = true,\r\n last = true,\r\n ellipsis = 1\r\n}) => {\r\n\r\n const total_pages = Math.ceil(total / pageSize)\r\n let pageNo = pageIndex + 1;\r\n\r\n between = between < 1 ? 1 : between\r\n pageNo = (pageNo < 1 ? 1 : pageNo > total_pages ? total_pages : pageNo)\r\n ellipsis = ellipsis < 1 ? 0 : ellipsis + 2 >= between ? between - 2 : ellipsis\r\n\r\n let positions = Array.from({ length: total_pages }, (_, i) => i)\r\n\r\n const qtd_pages = (between * 2) + 1\r\n const range = (\r\n total_pages <= qtd_pages\r\n // Show active without slice\r\n ? positions\r\n : pageNo - 1 <= between\r\n // Show active in left\r\n ? positions.slice(0, qtd_pages - (ellipsis > 0 ? ellipsis + 1 : 0))\r\n : pageNo + between >= total_pages\r\n // Show active in right\r\n ? positions.slice(total_pages - qtd_pages + (ellipsis > 0 ? ellipsis + 1 : 0), total_pages)\r\n // Show active in middle\r\n : positions.slice((pageNo - 1) - (between - (ellipsis > 0 ? ellipsis + 1 : 0)), pageNo + (between - (ellipsis > 0 ? ellipsis + 1 : 0)))\r\n );\r\n\r\n return (\r\n \r\n \r\n {\r\n last\r\n && pageNo > 1 ? changePage(0) : {}}\r\n disabled={pageNo <= 1}\r\n hidden={pageNo <= 1}\r\n />\r\n }\r\n {\r\n next\r\n && pageNo > 1 ? changePage(pageIndex - 1) : {}}\r\n disabled={pageNo <= 1}\r\n hidden={pageNo <= 1}\r\n />\r\n }\r\n {\r\n total_pages > (between * 2) + 1 && ellipsis > 0\r\n && positions.slice(0, pageNo - 1 <= between ? 0 : ellipsis).map(value => {\r\n return value !== pageNo - 1 ? changePage(value) : {}}>\r\n {value + 1}\r\n \r\n })\r\n }\r\n {\r\n // Show ellipsis when \"page\" is bigger than \"between\"\r\n total_pages > (between * 2) + 1 && ellipsis > 0 && pageNo - 1 > between\r\n && value !== pageNo - 1 ? changePage(value) : {}}>\r\n {value + 1}\r\n \r\n })}\r\n {\r\n // Show ellipsis when \"page\" is lower than \"between\"\r\n total_pages > (between * 2) + 1 && ellipsis > 0 && pageNo < total_pages - between\r\n && value !== pageNo - 1 ? changePage(value) : {}}>\r\n {value + 1}\r\n \r\n })\r\n }\r\n {\r\n next\r\n && = total_pages ? 'hidden' : ''}`}\r\n onClick={() => pageNo < total_pages ? changePage(pageNo) : {}}\r\n disabled={pageNo >= total_pages}\r\n hidden={pageNo >= total_pages}\r\n />\r\n }\r\n {\r\n last\r\n && = total_pages ? 'hidden' : ''}`}\r\n onClick={() => pageNo < total_pages ? changePage(total_pages - 1) : {}}\r\n disabled={pageNo >= total_pages}\r\n hidden={pageNo >= total_pages}\r\n />\r\n }\r\n \r\n {\r\n pageSizes.length > 0 &&\r\n <>\r\n Page Size\r\n \r\n \r\n }\r\n {\r\n total > 0 && {total.toLocaleString()} results found\r\n }\r\n
\r\n )\r\n}","import React, {Component} from \"react\";\r\nimport { TableExhibit2 as DataTable } from \"../table/table.component\";\r\nimport { PaginationExhibit2 as Pagination } from \"../table/pagination.component\";\r\nimport { PaginationControl } from \"../table/pagination-control\";\r\n\r\nexport class TablePagination extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.onColumnClickAction = this.onColumnClickAction.bind(this);\r\n this.state = {\r\n columns: {},\r\n pageList: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.columns !== this.props.columns || prevProps.pageList !== this.props.pageList) {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n }\r\n\r\n onColumnClickAction = (columnClicked) => {\r\n if (this.props.onColumnClick) {\r\n const { columns, pageList } = this.state;\r\n const arrayColumns = [];\r\n let updatedColumns = {};\r\n Object.entries(columns).map(x => {\r\n arrayColumns.push(x);\r\n });\r\n\r\n let currColumn = arrayColumns.slice().filter(currCol => columnClicked === currCol[0])[0];\r\n Object.keys(columns).forEach(function (key) {\r\n if (key === currColumn[0]) {\r\n updatedColumns[key] = { ...columns[key] };\r\n updatedColumns[key].isSortedAsc = !currColumn[1].isSortedAsc;\r\n updatedColumns[key].isSorted = true;\r\n } else {\r\n updatedColumns[key] = { ...columns[key] };\r\n updatedColumns[key].isSortedAsc = true;\r\n updatedColumns[key].isSorted = false;\r\n }\r\n });\r\n\r\n this.props.onColumnClick(columnClicked, !currColumn[1].isSortedAsc);\r\n this.setState(prevState => ({\r\n columns: updatedColumns,\r\n //pageList: copyAndSort(prevState.pageList, currColumn[0], currColumn[1].isSortedAsc, currColumn[1].isDateTime)\r\n }));\r\n }\r\n };\r\n\r\n onColumnSearch = (value) => {\r\n this.props.onColumnSearch(value);\r\n };\r\n\r\n onColumnSearchChange = (event, value) => {\r\n this.props.onColumnSearchChange(event, value);\r\n };\r\n\r\n render() {\r\n const {\r\n isColSearchShow,\r\n pages,\r\n paginationAction,\r\n resizePage,\r\n rowClickAction,\r\n paginationHidden, \r\n deleteAction,\r\n tableClassName,\r\n haveExternalDeleteBtn,\r\n showDetails,\r\n enableUpdate,\r\n classNameWrapper,\r\n modalPagination,\r\n hidePageSizeSelection,\r\n noDataAvailable,\r\n noAvailableData,\r\n hideStatusIcon,\r\n columnFormatRendering,\r\n warningIconConfig,\r\n\r\n } = this.props;\r\n\r\n const {\r\n columns,\r\n pageList\r\n } = this.state;\r\n\r\n return (\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n )\r\n }\r\n}","import React, {Component} from \"react\";\r\nimport './list-tab.component.css';\r\n\r\n\r\n\r\nexport class ListTabButton extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n selected:0,\r\n }\r\n }\r\n\r\n onSelect = (e, disabled) => {\r\n if (!disabled) {\r\n this.props.FilterIndex(e.target.attributes.getNamedItem('data-index').value)\r\n {\r\n this.props.filterList &&\r\n this.props.filterList(e.target.innerText)\r\n }\r\n }\r\n }\r\n\r\n render(){ \r\n return(\r\n \r\n
\r\n {!paginationHidden && (pageList.Items\r\n ? \r\n {this.props.listData.map((list, index) =>\r\n !list.hidden &&\r\n
\r\n )\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport './notification.css'\r\nimport { Selected_Index } from \"../../../../../constants/external-constants\";\r\nimport { ListTabButton } from \"../../../list-tab/list-tab-button.component\";\r\nimport { TablePagination } from \"../../../details-table/table-pagination.component\";\r\nimport ButtonIcon from \"../../../../button\";\r\nimport { TRANSLATIONS } from \"../../../../../utils/constant.utils\";\r\nimport { NoSubscription } from \"../../../../external/dashboard/no-subscription/no-subscription.component\"; \r\n\r\nclass UploadNotification extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n selectedIndex: \"0\",\r\n listTab: [\r\n {\r\n \"id\": Selected_Index.i_Zero,\r\n \"label\": \"Details\",\r\n \"hidden\": false\r\n },\r\n {\r\n \"id\": Selected_Index.i_One,\r\n \"label\": \"Charge Mapping Error\",\r\n \"hidden\": false,\r\n \"disable\": false\r\n }\r\n ]\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.props.paginationActionTab1(0);\r\n }\r\n\r\n FilterIndex = (tabIndex) => {\r\n this.renderTabContent(tabIndex)\r\n if(this.props.enableUploadButton) {\r\n this.props.enableUploadButton(tabIndex)\r\n }\r\n }\r\n\r\n renderTabContent = (index) => {\r\n this.setState({ selectedIndex: index });\r\n\r\n if (index == 0) {\r\n this.props.paginationActionTab1(0);\r\n }\r\n else {\r\n this.props.paginationActionTab2(0);\r\n }\r\n }\r\n\r\n activeListTab = (listTab) => {\r\n const { disputeDetailsId } = this.props;\r\n\r\n return listTab.map(item => {\r\n var disabled = item.disable;\r\n if ((item.id == Selected_Index.i_One || item.id == Selected_Index.i_Two) && disputeDetailsId > 0) {\r\n disabled = false;\r\n }\r\n\r\n return {\r\n ...item,\r\n disable: disabled\r\n };\r\n })\r\n }\r\n\r\n onClickExtract2 = (e) => {\r\n const confirmationMessage = this.toLocaleLanguage('export_alert_message');\r\n if (window.confirm(confirmationMessage)) {\r\n this.props.clickExtract2();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '' || locale === undefined)\r\n return TRANSLATIONS[TRANSLATIONS['defaultLocaleLanguage']][key];\r\n\r\n return TRANSLATIONS[locale][key];\r\n }\r\n\r\n loading = () => {\r\n return (\r\n this.onSelect(e, list.disable)}>\r\n {list.label} \r\n
\r\n \r\n )}\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const { errorDetails, paginationActionTab1, paginationActionTab2, columnClick2 } = this.props;\r\n const {listTab, selectedIndex} = this.state;\r\n return(\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { translation } = state;\r\n\r\n return {\r\n translation\r\n };\r\n }\r\n)(UploadNotification)\r\n\r\n","import React, { Component, createRef } from 'react';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport Icons from '../../../../icon';\r\nimport './notification.css';\r\nimport { DISPLAY_ITEM, INVOICE_NOTIFICATION_STATUS, MODAL_CUSTOM_MESSAGE, ROUTE_LINK_LOCATION, Selected_Index, UPLOAD_TYPES } from '../../../../../constants/external-constants';\r\nimport { notificationActions } from '../../../../../store/common/header-navigation/header/notification.reducer';\r\nimport FormatDateComponent from '../../../date/format-date.component';\r\nimport DetailsModal from '../../../modal/details-modal/details-modal';\r\nimport { TablePagination } from '../../../details-table/table-pagination.component';\r\nimport ButtonIcon from \"../../../../../components/button\";\r\nimport { ConfirmationNotificationModal } from '../../../modal/confirmation-modal.component';\r\nimport { CONFIRMATION_VALUE } from '../../../../../utils/constant.utils';\r\nimport { NoSubscription } from '../../../../external/dashboard/no-subscription/no-subscription.component';\r\nimport UploadNotification from './upload-notification.component';\r\n\r\nclass HeaderNotification extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.wrapperRef = createRef();\r\n this.state={\r\n displayedItems: DISPLAY_ITEM.ten,\r\n showUploadButton: false,\r\n errorUpload: {\r\n show: false,\r\n data: []\r\n },\r\n errorModal: {\r\n show: false,\r\n data: []\r\n },\r\n confirmDeleteModal: {\r\n show: false,\r\n dataId: 0,\r\n isDeleting: false\r\n }\r\n }\r\n }\r\n\r\n checkIfNotifClickedOutside = (e) => {\r\n const bellIcon = document.querySelector('.icon-bell');\r\n const bellUseElement = bellIcon.querySelector('use');\r\n if (this.wrapperRef.current && !this.wrapperRef.current.contains(e.target) && (e.target !== bellIcon && e.target !== bellUseElement)) {\r\n if (!this.state.confirmDeleteModal.show && !this.state.errorModal.show && !this.state.errorUpload.show) {\r\n this.setState({\r\n displayedItems: DISPLAY_ITEM.ten\r\n });\r\n this.props.onClose();\r\n }\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n window.addEventListener('mousedown', this.checkIfNotifClickedOutside);\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('mousedown', this.checkIfNotifClickedOutside);\r\n }\r\n\r\n getStatusIconName = (statusKey) => {\r\n switch (statusKey) {\r\n case INVOICE_NOTIFICATION_STATUS.completed.key:\r\n return \"check-circle-completed\";\r\n case INVOICE_NOTIFICATION_STATUS.failed.key:\r\n return \"circle-close-failed\";\r\n case INVOICE_NOTIFICATION_STATUS.inProgress.key:\r\n case INVOICE_NOTIFICATION_STATUS.pending.key:\r\n return \"triangle-exlamation-inprogress\"; \r\n default:\r\n return \"\";\r\n }\r\n }\r\n\r\n renderNotificationDetail = (dataList) => (\r\n <>\r\n {(dataList.subTitleHeader == \"Invoice Number\") &&\r\n (dataList.statusData.key == INVOICE_NOTIFICATION_STATUS.completed.key && dataList.uploadTypeId == UPLOAD_TYPES.InvoiceUpload) ||\r\n (dataList.uploadTypeId == UPLOAD_TYPES.InvoiceMatchAudit) ?\r\n \r\n { }}\r\n onColumnSearchChange={() => { }}\r\n isColSearchShow={false}\r\n resizePage={() => { }}\r\n totalPage={errorDetails.upload.Pagination.TotalEntries}\r\n isNotSortable={true}\r\n isLoading={false}\r\n paginationHidden={true}\r\n />\r\n
\r\n :\r\n \r\n
\r\n : this.loading()\r\n }\r\n \r\n
\r\n \r\n { }}\r\n onColumnSearchChange={()=>{}}\r\n isColSearchShow={false}\r\n resizePage={() => { }}\r\n totalPage={errorDetails.chargeMapping.Pagination.TotalEntries}\r\n isLoading={false} \r\n hidePageSizeSelection={true} \r\n />\r\n
\r\n \r\n {dataList.subTitleHeader}: this.openNewTab(dataList)}>{dataList.subTitleData.value} \r\n
\r\n : ''\r\n }\r\n {dataList.vendor && (\r\n \r\n Vendor: {dataList.vendor}\r\n
\r\n )}\r\n \r\n );\r\n\r\n openNewTab(dataList) {\r\n window.open(`${dataList.subTitleData.link}`, \"_blank\");\r\n }\r\n\r\n renderNotificationStatus = (dataList) => (\r\n \r\n Status:\r\n {dataList.statusData.key !== INVOICE_NOTIFICATION_STATUS.failed.key ?\r\n {dataList.statusData.value.toLowerCase() === INVOICE_NOTIFICATION_STATUS.pending.value.toLowerCase() ? INVOICE_NOTIFICATION_STATUS.inProgress.value : dataList.statusData.value} :\r\n <>\r\n {dataList.statusData.value} |\r\n this.toggleViewError(dataList)}>View Error\r\n \r\n }\r\n
\r\n );\r\n\r\n renderDeleteIcon = (dataList) => (\r\n (dataList.statusData.key !== INVOICE_NOTIFICATION_STATUS.inProgress.key && dataList.statusData.key !== INVOICE_NOTIFICATION_STATUS.pending.key) && \r\n \r\n this.toggleConfirmDelete(true, dataList.id, dataList.uploadTypeId)}\r\n />\r\n
\r\n );\r\n\r\n handleLoadMore = () => {\r\n this.setState(prevState => ({\r\n displayedItems: prevState.displayedItems + DISPLAY_ITEM.five\r\n }));\r\n }\r\n\r\n toggleErrorModal = (isShow, data = []) => {\r\n const { errorModal } = this.state.errorModal;\r\n\r\n this.setState({\r\n errorModal: {\r\n ...errorModal,\r\n show: isShow,\r\n data: data\r\n }\r\n });\r\n\r\n if (isShow == false) {\r\n const { resetErrorDetails } = this.props;\r\n resetErrorDetails();\r\n }\r\n }\r\n\r\n // upload error function\r\n toggleErrorUpload = (isShow, data = []) => {\r\n const { errorUpload } = this.state.errorUpload;\r\n\r\n this.setState({\r\n errorUpload: {\r\n ...errorUpload,\r\n show: isShow,\r\n data: data\r\n }\r\n });\r\n\r\n if (isShow == false) {\r\n const { resetErrorDetails } = this.props;\r\n resetErrorDetails();\r\n }\r\n }\r\n\r\n toggleConfirmDelete = (isShow, dataId = 0, uploadTypeId = 0) => {\r\n const { confirmDeleteModal } = this.state;\r\n\r\n this.setState({\r\n confirmDeleteModal: {\r\n ...confirmDeleteModal,\r\n show: isShow,\r\n dataId: dataId,\r\n uploadTypeId: uploadTypeId\r\n }\r\n });\r\n }\r\n\r\n handleConfirmDelete = async (okCancel) => {\r\n const { deleteHeaderNotification } = this.props;\r\n const { confirmDeleteModal } = this.state;\r\n\r\n if (CONFIRMATION_VALUE.Ok === okCancel) {\r\n this.setState({\r\n confirmDeleteModal: {\r\n ...confirmDeleteModal,\r\n isDeleting: true\r\n }\r\n });\r\n\r\n await deleteHeaderNotification(confirmDeleteModal.dataId, confirmDeleteModal.uploadTypeId);\r\n }\r\n\r\n this.setState({\r\n confirmDeleteModal: {\r\n ...confirmDeleteModal,\r\n show: false,\r\n dataId: 0,\r\n isDeleting: false\r\n }\r\n });\r\n }\r\n\r\n toggleViewError = (data) => {\r\n const { viewError } = this.props;\r\n\r\n if (data.uploadTypeId == UPLOAD_TYPES.InvoiceMatchAudit){\r\n this.toggleErrorModal(true, data);\r\n viewError(data.id, data.uploadTypeId, 0);\r\n }\r\n else if (data.uploadTypeId == UPLOAD_TYPES.InvoiceUpload) {\r\n this.toggleErrorUpload(true, data);\r\n viewError(data.batchId, data.uploadTypeId, 0, null, null, true);\r\n }\r\n else if (data.uploadTypeId == UPLOAD_TYPES.ChargeTypeUpload) {\r\n this.toggleErrorModal(true, data);\r\n viewError(data.batchId, data.uploadTypeId, 0, null, null, false);\r\n }\r\n }\r\n\r\n handlePaginationAction = (index) => {\r\n const { errorModal } = this.state;\r\n\r\n if (errorModal.data.uploadTypeId == UPLOAD_TYPES.ChargeTypeUpload) {\r\n this.props.viewError(errorModal.data.batchId, errorModal.data.uploadTypeId, index, null, null, false);\r\n }\r\n }\r\n\r\n handlePaginationActionTab1 = (index) => {\r\n const { errorUpload } = this.state;\r\n\r\n this.props.viewError(errorUpload.data.batchId, errorUpload.data.uploadTypeId, index);\r\n }\r\n\r\n handlePaginationActionTab2 = (index) => {\r\n const { errorUpload } = this.state;\r\n\r\n this.props.viewError(errorUpload.data.batchId, UPLOAD_TYPES.ChargeTypeUpload, index);\r\n }\r\n\r\n handleColumnClick2 = (columnName, isSortAsc) => {\r\n const { errorUpload } = this.state;\r\n\r\n this.props.viewError(errorUpload.data.batchId, UPLOAD_TYPES.ChargeTypeUpload, 0, columnName, isSortAsc);\r\n }\r\n\r\n handleExtractClick2 = () => {\r\n const { errorUpload } = this.state;\r\n\r\n this.props.extractChargeMappingErrorDetail(errorUpload.data.batchId);\r\n }\r\n\r\n renderErrorModalTitle(uploadTypeId) {\r\n switch (uploadTypeId) {\r\n case UPLOAD_TYPES.InvoiceMatchAudit:\r\n return \"Invoice Match/Audit Error Details\";\r\n case UPLOAD_TYPES.ChargeTypeUpload:\r\n return \"Charge Mapping Error Details\";\r\n default:\r\n return \"Error Details\";\r\n }\r\n }\r\n\r\n\r\n loading = () => {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n enableUploadButton = (value) => {\r\n if (value === Selected_Index.i_One) {\r\n this.setState({\r\n showUploadButton: true\r\n });\r\n } else {\r\n this.setState({\r\n showUploadButton: false\r\n });\r\n }\r\n\r\n this.props.resetErrorDetails();\r\n }\r\n\r\n handleUploadButton = () => {\r\n const getURL = `${ROUTE_LINK_LOCATION.invoiceUpload}?tab=chargeMapping`;\r\n window.open(getURL, \"_blank\")\r\n }\r\n\r\n render() {\r\n const { displayedItems, errorModal, confirmDeleteModal,errorUpload, showUploadButton } = this.state;\r\n const { data, errorDetails } = this.props;\r\n const hasMoreItems = data && data.length > displayedItems;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {data?.length > 0 ? \"Notifications\" : \"No Available Notification\"}\r\n
\r\n\r\n
\r\n \r\n {this.props.data && this.props.data.slice(0, displayedItems).map((dataList, index) => (\r\n
\r\n \r\n \r\n
\r\n ))}\r\n {hasMoreItems && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.renderDeleteIcon(dataList)}\r\n {dataList.title}
\r\n {this.renderNotificationDetail(dataList)}\r\n {this.renderNotificationStatus(dataList)}\r\n\r\n \r\n
\r\n )}\r\n \r\n {!errorDetails.isLoading ?\r\n errorModal.data.uploadTypeId == UPLOAD_TYPES.InvoiceMatchAudit ?\r\n { }}\r\n onColumnSearchChange={() => { }}\r\n isColSearchShow={false}\r\n resizePage={() => { }}\r\n totalPage={0}\r\n isNotSortable={true}\r\n isLoading={false}\r\n paginationHidden={true}\r\n />\r\n :\r\n { this.toggleErrorModal(false) }} customClassName=\"header-option-list header-filter-button\" labelName=\"OK\" />\r\n : \"\"}\r\n
\r\n \r\n { }}\r\n onColumnSearchChange={() => { }}\r\n isColSearchShow={false}\r\n resizePage={() => { }}\r\n isNotSortable={true}\r\n isLoading={false}\r\n />\r\n
\r\n\r\n : this.loading()\r\n }\r\n {!errorDetails.isLoading ? \r\n \r\n { showUploadButton ? this.handleUploadButton() : this.toggleErrorUpload(false) }} customClassName=\"header-option-list header-filter-button\" labelName={showUploadButton ? \"Update Charge Mapping\" : \"Cancel\"} />\r\n : \"\"}\r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { notification } = state;\r\n\r\n return {\r\n notification\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, notificationActions),\r\n dispatch\r\n )\r\n)(Header);\r\n","export default \"data:image/png;base64,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\"","import { React } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Translation from '../../common/translation/translation.component';\r\nimport { POWER_BI_SUBREPORT } from '../../../constants/external-constants';\r\n\r\nwindow.onload = function (){\r\n var mainNav = document.querySelectorAll(\".main-menu\"); \r\n for (let i = 0; mainNav.length > i; i++) {\r\n if (window.location.pathname.includes(mainNav[i].innerText)) {\r\n mainNav[i].classList.add(\"isActive\");\r\n }\r\n }\r\n }\r\n\r\nfunction NavMainMenu({ navMenu, showNotif, customClass }) {\r\n\r\n var mainNav = document.querySelectorAll(\".main-menu\");\r\n var subNav = document.querySelectorAll(\".sub-list\");\r\n // for (let i = 0; mainNav.length > i; i++) {\r\n // if (window.location.pathname.includes(mainNav[i].innerText)) {\r\n // mainNav[i].classList.add(\"isActive\");\r\n // }\r\n // }\r\n \r\n mainNav.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; mainNav.length > i; i++) {\r\n mainNav[i].classList.remove(\"isActive\");\r\n }\r\n el.classList.add(\"isActive\");\r\n var haveSub = document.querySelectorAll(\".isActive ul li\");\r\n if (haveSub.length === 0) {\r\n for (let i = 0; subNav.length > i; i++) {\r\n subNav[i].classList.remove(\"subSelected\");\r\n }\r\n }\r\n })\r\n );\r\n\r\n subNav.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; subNav.length > i; i++) {\r\n subNav[i].classList.remove(\"subSelected\");\r\n }\r\n el.classList.add(\"subSelected\");\r\n })\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n 
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n this.toggleProfile(false)}\r\n navToggle={toggleProfile}\r\n />\r\n }\r\n\r\n
\r\n \r\n {\r\n notification.showHeaderNotificationModal &&\r\n this.toggleNotif(false)}\r\n />\r\n }\r\n {\r\n notification.hasUnreadHeaderNotification &&\r\n
\r\n\r\n \r\n \r\n
\r\n {\r\n toggleProfile &&\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default NavMainMenu;","import { React, createRef, Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport \"./nav-menu.component.css\";\r\nimport Header from \"../header-navigation/header/header.component\";\r\nimport NavMainMenu from \"./nav-main-menu.component\";\r\nimport { showApprovalNotif } from \"../../../utils/helpers.utils\";\r\nimport { navMenuActions } from '../../../store/external/nav-menu-reducer/nav-menu.reducer'\r\n\r\nclass NavMenu extends Component {\r\n constructor(props) {\r\n super();\r\n this.ref = createRef();\r\n }\r\n\r\n checkIfClickedOutside = (e) => {\r\n if (this.ref.current && !this.ref.current.contains(e.target)) {\r\n var mainNav = document.querySelectorAll(\".isActive\");\r\n for (let i = 0; mainNav.length > i; i++) {\r\n mainNav[i].classList.remove(\"isActive\");\r\n }\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n await this.props.setSubsUnderLM();\r\n await this.props.fetchNavItems();\r\n await this.props.fetchBurgerMenuUrls();\r\n await this.props.fetchNewNavItems();\r\n window.addEventListener('mousedown', this.checkIfClickedOutside)\r\n }\r\n\r\n async componentDidUpdate(prevProps) {\r\n if (this.props.isUserLoggedIn !== prevProps.isUserLoggedIn) {\r\n await this.props.setSubsUnderLM();\r\n await this.props.fetchNavItems();\r\n await this.props.fetchBurgerMenuUrls();\r\n await this.props.fetchNewNavItems();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('mousedown', this.checkIfClickedOutside)\r\n }\r\n\r\n render() {\r\n const { newNavItems, isUserLoggedIn } = this.props;\r\n let showNotif = showApprovalNotif();\r\n return (\r\n - \r\n {showNotif ?\r\n
- \r\n
\r\n {item.subMenu?.length >= 0? : \"\"\r\n ))\r\n : \"\"}\r\n
\r\n
: \"\"}\r\n {navMenu.map((item, id) => (\r\n item.ShowNav ?\r\n \r\n
\r\n {navMenu[1].NotifApprovalCount}
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => state.navMenu,\r\n dispatch => bindActionCreators(navMenuActions, dispatch),\r\n null,\r\n {\r\n pure: false\r\n }\r\n)(NavMenu);","import React, { Component } from \"react\";\r\nimport \"./footer.component.css\"\r\nexport class Footer extends Component {\r\n render() {\r\n return(\r\n \r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport NavMenu from '../common/nav-menu/nav-menu.component';\r\nimport { Footer } from '../common/footer/footer.component';\r\nimport { navMenuActions } from '../../store/external/nav-menu-reducer/nav-menu.reducer';\r\nimport { NoSubscription } from '../external/dashboard/no-subscription/no-subscription.component';\r\nimport '../common/common-css/global.css';\r\n\r\nclass ExternalLayout extends Component {\r\n componentDidMount() {\r\n this.updateScale();\r\n window.addEventListener('resize', this.updateScale);\r\n\r\n this.observer = new MutationObserver(this.updateScale);\r\n this.observer.observe(document.body, { childList: true, subtree: true });\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('resize', this.updateScale);\r\n if (this.observer) {\r\n this.observer.disconnect();\r\n }\r\n }\r\n\r\n updateScale = () => {\r\n const customBody = document.querySelector('.custom-body');\r\n const customModal = document.querySelector('.fade.modal.show');\r\n const customConfirmatonBlurModal = document.querySelector('.confirmation-blur-background');\r\n if (customBody) {\r\n let scaleFactor=0;\r\n if (window.innerWidth <= 1410) {\r\n scaleFactor = window.innerWidth / 1445;\r\n customBody.style.transform = 'scale(' + scaleFactor + ')';\r\n customBody.style.transformOrigin = 'top left';\r\n\r\n if (customModal) {\r\n scaleFactor = window.innerWidth / 1845;\r\n customModal.style.transform = 'scale(' + scaleFactor + ')';\r\n customModal.style.transformOrigin = 'top left';\r\n }\r\n if(customConfirmatonBlurModal) {\r\n customConfirmatonBlurModal.style.transform = 'scale(' + scaleFactor + ')';\r\n customConfirmatonBlurModal.style.transformOrigin = 'top left';\r\n }\r\n } else {\r\n customBody.style.transform = 'none';\r\n if (customModal) {\r\n customModal.style.transform = 'none';\r\n }\r\n if(customConfirmatonBlurModal) {\r\n customConfirmatonBlurModal.style.transform = 'none';\r\n }\r\n }\r\n\r\n if (window.innerWidth <= 1536) {\r\n if (customModal) {\r\n scaleFactor = window.innerWidth / 1945;\r\n customModal.style.transform = 'scale(' + scaleFactor + ')';\r\n customModal.style.transformOrigin = 'top left';\r\n }\r\n if(customConfirmatonBlurModal) {\r\n customConfirmatonBlurModal.style.transform = 'scale(' + scaleFactor + ')';\r\n customConfirmatonBlurModal.style.transformOrigin = 'top left';\r\n }\r\n }\r\n }\r\n };\r\n\r\n render() { \r\n return (\r\n \r\n \r\n {\r\n this.props.newNavItems.length > 0 ? \r\n <>\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => state.navMenu,\r\n dispatch => bindActionCreators(navMenuActions, dispatch),\r\n null,\r\n {\r\n pure: false\r\n }\r\n)(ExternalLayout);\r\n","export default __webpack_public_path__ + \"static/media/default-banner-bg.879b8654.png\";","export default __webpack_public_path__ + \"static/media/AT&T.22288e17.png\";","import React, { Component } from 'react';\r\nimport ModalHeader from 'react-bootstrap/ModalHeader';\r\nimport ModalTitle from 'react-bootstrap/ModalTitle';\r\nimport {findObjVal} from '../../../utils/helpers.utils';\r\nimport { REQUEST_STATUS, REQUEST_STATUS_TXT, ORDER_STATUS_TEXT as OrderStatus } from '../../../constants/external-constants';\r\nexport class ModalHeaderOrderRequestDetail extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n status: \"\",\r\n css: \"\"\r\n }\r\n }\r\n\r\n getStatusValue = (id) =>{\r\n const result = OrderStatus.filter(obj => obj.id === id);\r\n const [obj] = result;\r\n this.setState(prev => ({...prev, status: obj?.value, css: obj?.customClass}))\r\n }\r\n\r\n componentDidMount(){\r\n this.getStatusValue(this.props.status);\r\n }\r\n componentDidUpdate(prevProps) {\r\n if (this.props.status !== prevProps.status) {\r\n this.getStatusValue(this.props.status); \r\n }\r\n }\r\n render() {\r\n \r\n return (\r\n \r\n {this.props.children}\r\n
\r\n \r\n : \r\n \r\n
\r\n );\r\n });\r\n };\r\n render() {\r\n const { data } = this.props;\r\n return (\r\n 4 ? \"order-request-process-tab-2\":\"order-request-process-tab\"}>\r\n {this.renderMilestone(data)}\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport moment from 'moment';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { ORDER_AUDIT_TYPES, ORDER_AUDIT_VERBIAGE } from \"../../../../constants/external-constants\";\r\nimport { REQUEST_MODAL_TAB } from '../../../../utils/constant.utils';\r\nimport { getFirstNameFromFullName } from '../../../../utils/helpers.utils';\r\n\r\nexport class RequestDetailProcess extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n renderDays = (activities) => {\r\n\r\n if (activities === undefined || activities === null)\r\n return;\r\n\r\n return Object.values(activities).map(item => {\r\n return (\r\n \r\n {moment(item.Key).format(\"DD MMM\")}\r\n \r\n \r\n {this.renderActivities(item.Value)}\r\n \r\n
\r\n
\r\n )\r\n })\r\n }\r\n\r\n renderActivities = (data) => {\r\n return data.map((item, index) => {\r\n return (\r\n \r\n {\r\n parts.map((part, id) => {\r\n if (part.match(new RegExp(\"\\{.*?\\}\", \"gi\"))) {\r\n return replacedWith.map((value, index) => {\r\n const reg = new RegExp(\"\\\\{\" + (variableName[index]) + \"\\\\}\", \"gi\");\r\n var newstringreplaced = text.replace(reg, \",\" + \"{\" + variableName[index] + \"},\");\r\n return part.match(reg)\r\n ?\r\n className[index] === 'update-commented' ?\r\n this.props.onCommentClick(REQUEST_MODAL_TAB.Comments) : \r\n \"\"\r\n }\r\n > {replacedWith[index]} \r\n : \"\"\r\n });\r\n } else {\r\n return {part.replace(/\\./g, '')} \r\n }\r\n })\r\n }\r\n
\r\n );\r\n }\r\n \r\n \r\n\r\n render() {\r\n return (\r\n \r\n {this.renderDays(this.props.activities)}\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component, forwardRef } from 'react';\r\nimport { Control, Errors } from 'react-redux-form';\r\nimport { debounce } from 'throttle-debounce';\r\nimport { Form, Button, FloatingLabel, DropdownButton } from 'react-bootstrap';\r\nimport Autosuggest from 'react-autosuggest';\r\nimport DatePicker from \"react-datepicker\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport './order-request-form.component.css';\r\nimport Icons from \"../../icon\";\r\nimport { capitalizeFirstLetter } from '../../../utils/helpers.utils'\r\nimport { INVALID_CHARS, INPUT_FIELD_TYPE, MAX_LENGTH } from \"../../../constants/external-constants\"\r\n\r\nexport class ORFDropdownCheckbox extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = (data, action, filters, id) => {\r\n\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map((x, i) => {\r\n return (\r\n \r\n\r\n \r\n {\r\n selectedValues.includes(i.Key)).map(a => a.Value).join()}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport class OR_RRF_Select extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, maxLength, onChangeAction\r\n //field validation\r\n , validators, errorMessages, valid } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n //
\r\n );\r\n }\r\n}\r\n\r\nexport class ORFSelect extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const { options, placeholder, label } = this.props;\r\n return (\r\n \r\n {this.state.withIcon ?\r\n {e.key === 'Enter' && e.preventDefault();}}\r\n {...inputProps}\r\n onChange={handleInputChange}\r\n placeholder={this.props.placeholder}\r\n onBlur={this.handleOnblurAction}\r\n />\r\n
\r\n { this.state.haveError &&\r\n {this.props.errorMessage}\r\n }\r\n \r\n \r\n );\r\n }\r\n\r\n onChangeSuggestion = (event, { newValue }) => {\r\n\r\n this.setState({ value: newValue }, () => {\r\n this.autocompleteSearchDebounced(this.state.value);\r\n });\r\n };\r\n\r\n autocompleteSearch = (val, callback) => { \r\n if (typeof callback === 'function') {\r\n callback();\r\n }\r\n this._fetch(val);\r\n }; \r\n\r\n _fetch = async val => {\r\n const { onChangeClear, onChangeAction, searchAction, propDisplay, defaultValue } = this.props;\r\n const { onChangeReset } =this.state;\r\n val = val.trim();\r\n\r\n if (val === '' && !onChangeClear ) {\r\n if (onChangeAction) {\r\n onChangeAction(val);\r\n }\r\n return;\r\n }\r\n \r\n if(onChangeReset) { \r\n if (onChangeAction) {\r\n onChangeAction(val);\r\n }\r\n }\r\n\r\n this.setState({ isFetching: false, onChangeReset:false });\r\n \r\n var res = await searchAction(val, propDisplay);\r\n this.inputValue(val);\r\n if (res != null) {\r\n\r\n this.setState({\r\n rawOptions: res,\r\n });\r\n\r\n res = res.length > 0 ? res.map(a => a[propDisplay]) : '';\r\n res = res.slice(0, 10);\r\n\r\n this.setState({\r\n suggestions: res\r\n });\r\n\r\n this.setState({ isFetching: true });\r\n\r\n if (defaultValue == val) {\r\n this.onSuggestionSelected(null, { suggestion: defaultValue });\r\n }\r\n } else {\r\n this.setState({ isFetching: true }); \r\n }\r\n };\r\n\r\n render() {\r\n const { hidden, disabled, label, maxLength, placeholder } = this.props;\r\n const { value, suggestions, isFetching } = this.state;\r\n\r\n const inputProps = {\r\n placeholder: placeholder,\r\n value: value !== undefined ? value : '',\r\n onChange: this.onChangeSuggestion,\r\n hidden: hidden,\r\n disabled: disabled,\r\n maxLength : maxLength\r\n };\r\n return (\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n ));\r\n return (\r\n \r\n
\r\n )\r\n }\r\n })\r\n }\r\n\r\n handleDelete(commentID) {\r\n this.setState({\r\n commentID: commentID,\r\n showModal: true,\r\n modalMessage: \"Are you sure you want to delete?\"\r\n });\r\n\r\n }\r\n\r\n\r\n handleModal(okCancel) {\r\n this.setState({\r\n showModal: false,\r\n });\r\n if (CONFIRMATION_VALUE.Ok === okCancel) {\r\n this.props.deleteCommentAction(this.state.commentID);\r\n }\r\n\r\n }\r\n\r\n addComment() {\r\n this.setState({ showComment: !this.setState.showComment });\r\n }\r\n\r\n closeComment() {\r\n this.setState({ showComment: false });\r\n }\r\n\r\n displayComment = (item) => {\r\n var yearDayMonth = (item.State === false && item.DateUpdated) ? convertToFormatDate(item.DateUpdated, \"MMMM DD, YYYY\") : \"\";\r\n var dateUpdated = (item.State === false && item.DateUpdated) ? convertToFormatDate(item.DateUpdated, \"hh:mm A\") : \"\";\r\n return item.State === false ? ORDER_AUDIT_VERBIAGE.deleteCommentOrder.replace(\"{yearDayMonth}\", yearDayMonth).replace(\"{time}\", dateUpdated) : item.Comment;\r\n }\r\n\r\n renderCommentContent = (comments, isLastComment) => {\r\n var commentCount = comments && comments.length;\r\n return Object.values(comments).map((item, index) => {\r\n return (\r\n {item.CreatedDate}
\r\n {\r\n this.renderCommentContent(item.CommentsModels, (commentsCount === (index + 1)))\r\n }\r\n\r\n {\r\n isLastComment && commentCount === index + 1 && item.IsApproved ?\r\n this.renderLastApprovedComment(item, index)\r\n :\r\n item.IsOwnComment ?\r\n (\r\n
\r\n )\r\n })\r\n }\r\n renderLastApprovedComment = (item, index) => {\r\n var imgTitle = \"\";\r\n if (item.FileName != null) {\r\n imgTitle = item.FileName.substring(item.FileName.indexOf(\"_\") + 1);\r\n }\r\n return (\r\n \r\n
\r\n )\r\n :\r\n (\r\n {item.CommentedBy}
\r\n this.setState({ commentIndex: item.CommentId\r\n })}\r\n onMouseLeave={() => this.setState({ commentIndex: null })}\r\n >\r\n {\" \"}\r\n {/* {item.State == true || item.State == null ? ( */}\r\n \r\n this.handleDelete(item.CommentId)}\r\n />\r\n\r\n
\r\n {item.CreatedTime}
\r\n\r\n
\r\n )\r\n }\r\n \r\n\r\n {/* { WILL NOT REMOVE THIS SECTION, AS IT CONTAINS LOGIC THAT MAY BE NEEDED SOON.\r\n isLastComment && (comments.length == index + 1) &&\r\n {item.CommentedBy}
\r\n\r\n {\" \"}\r\n
\r\n {item.CreatedTime}
\r\n\r\n {\r\n item.IsAddComment ?\r\n item.IsOwnComment ?\r\n
\r\n } */}\r\n \r\n
\r\n )\r\n }\r\n handleRejectionClick = async () => {\r\n const { requestData, handleRejectionCommentSubmission, fetchRequestDetails, fetchRequestProgress, fetchOrderComments, fetchOwnerApproverDetails, fetchRequestLogItems } = this.props;\r\n let RoleID = parseInt(sessionStorage.getItem('UserRoleID'), 10);\r\n var isApprover = (RoleID === userRoles.manager || RoleID === userRoles.lineManager || JSON.parse(sessionStorage.getItem('IsWireLineApprover')));\r\n var isSuccess = await handleRejectionCommentSubmission(requestData.Order);\r\n if (isSuccess) {\r\n fetchOwnerApproverDetails();\r\n fetchRequestDetails();\r\n fetchRequestProgress();\r\n fetchOrderComments();\r\n fetchRequestLogItems(0, RequestTable.orderRequest.id);\r\n }\r\n }\r\n\r\n submitComment = async () => {\r\n const { submitComment, fetchOrderComments } = this.props;\r\n var res = await submitComment();\r\n\r\n if (res) {\r\n this.closeComment();\r\n fetchOrderComments();\r\n }\r\n this.setState({ enableSubmitBtn: true }); // Disable the button after submitting the comment\r\n }\r\n\r\n handleCommentChange = (e) => {\r\n const commentValue = e.target.value;\r\n this.setState({\r\n commentData: commentValue,\r\n enableSubmitBtn: commentValue.trim().length === 0 // Enable submit if input has content\r\n });\r\n };\r\n\r\n render() {\r\n const { commentData, setCommentData } = this.props;\r\n return (\r\n {item.CommentedBy}
\r\n\r\n {\" \"}\r\n
\r\n {item.CreatedTime}
\r\n\r\n \r\n
\r\n\r\n {\r\n this.renderByCommentsDates(this.props.comments)\r\n }\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestDetail, requestLog } = state;\r\n return {\r\n ...requestDetail\r\n , ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestDetailsActions, requestLogActions),\r\n dispatch\r\n )\r\n)(RequestCommentSection);","import React, { Component } from \"react\";\r\nimport { Link, withRouter } from \"react-router-dom\";\r\n\r\nexport class ListTab extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = {\r\n searchValue: null,\r\n selectedIndex: 0,\r\n tabValue: \"\"\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n this.tabSelected();\r\n window.addEventListener(\"load\", this.refreshPage); \r\n this.getLabel();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"load\", this.refreshPage); \r\n }\r\n\r\n\r\n handleClick = (item) => {\r\n const { history } = this.props;\r\n\r\n if (!item.disable && item.href) {\r\n history.push(item.href);\r\n }\r\n };\r\n getLabel() {\r\n var tabActive = document.querySelectorAll(\".request-table.data-table .list-tab.isSelectedTab\");\r\n if(this.props.ontabSelected!==undefined && tabActive.length!==0)\r\n {\r\n this.props.ontabSelected(tabActive[0].innerText) \r\n } \r\n }\r\n refreshPage() {\r\n var tabSelected = document.querySelectorAll(\".request-table.data-table .list-tab\");\r\n if(tabSelected.length!==0)\r\n {\r\n /* tabSelected[0].classList.remove(\"isSelectedTab\"); */ \r\n for (let i = 0; tabSelected.length > i; i++) {\r\n if(window.location.pathname.split(\"/\").pop().split(/(?=[A-Z])/)[0].length===1)\r\n {\r\n if (window.location.pathname.split(\"/\").pop().split(\" \").pop().includes(tabSelected[i].innerText.split(\" \").pop())) {\r\n tabSelected[i].classList.add(\"isSelectedTab\"); \r\n break;\r\n }\r\n } else {\r\n var activeTab = tabSelected[i].childNodes[0].href.includes(window.location.pathname.split(\"/\").pop());\r\n if (activeTab) {\r\n tabSelected[i].classList.add(\"isSelectedTab\"); \r\n break;\r\n }\r\n } \r\n if (window.location.pathname.split(\"/\").pop().split(/(?=[A-Z])/)[0]===\"Order\") {\r\n tabSelected[i].classList.add(\"isSelectedTab\"); \r\n break;\r\n }\r\n \r\n }\r\n\r\n } \r\n }\r\n\r\n\r\n tabSelected() {\r\n const selectedTab = document.querySelectorAll(\".list-tab\");\r\n if(selectedTab.length!==0)\r\n {\r\n this.refreshPage();\r\n selectedTab.forEach((el) =>\r\n el.addEventListener(\"click\", (event) => {\r\n for (let i = 0; selectedTab.length > i; i++) {\r\n selectedTab[i].classList.remove(\"isSelectedTab\");\r\n }\r\n el.classList.add(\"isSelectedTab\"); \r\n if(this.props.ontabSelected!==undefined)\r\n {\r\n this.props.ontabSelected(el.innerText) \r\n } \r\n })\r\n );\r\n } \r\n }\r\n\r\n\r\n render() {\r\n const { tabList, containerClassName, clickAction } = this.props; \r\n \r\n return (\r\n <>\r\n {tabList!==undefined ? \r\n \r\n {\r\n setCommentData(e);\r\n this.handleCommentChange(e); \r\n }}\r\n value={commentData}\r\n rows={4}\r\n maxLength={1000}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n : \"\"} \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(ListTab)","export default __webpack_public_path__ + \"static/media/pdf-icon.0c8c9053.png\";","export default __webpack_public_path__ + \"static/media/msg-icon2.01ed8384.png\";","export default __webpack_public_path__ + \"static/media/exportExcel.36bc880f.png\";","import React, { Component } from \"react\";\r\nimport PdfIcon from '../../../../../../src/img/pdf-icon.png';\r\nimport MsgIcon from \"../../../../../../src/img/msg-icon2.png\";\r\nimport XlsIcon from \"../../../../../../src/img/exportExcel.png\";\r\nimport FileIcon from \"../../../../../../src/img/icn_export.png\";\r\nimport DocIcon from \"../../../../../../src/img/docx-icon.png\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\n\r\nexport class OrderRequestFiles extends Component {\r\n\r\n setIcon = (filename) => {\r\n var getExtension = (filename.substr(filename.length - 4).toLowerCase()).toString();\r\n var icon;\r\n\r\n switch (getExtension) {\r\n case \".pdf\":\r\n icon = PdfIcon;\r\n break;\r\n case \".msg\":\r\n icon = MsgIcon;\r\n break;\r\n case \"docx\":\r\n icon = DocIcon;\r\n break;\r\n case \".xls\":\r\n case \"xlsx\":\r\n icon = XlsIcon;\r\n break;\r\n default:\r\n icon = FileIcon;\r\n };\r\n\r\n return (\r\n - \r\n {tabList.map((item, id) => (\r\n
- this.handleClick(item)}>\r\n {/*item.listTitle*/}\r\n {item.listTitle} \r\n \r\n ))}\r\n
\r\n 
\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n const { files } = this.props;\r\n\r\n return (\r\n \r\n \r\n {filename}\r\n \r\n
\r\n \r\n
\r\n {files !== null && files.length > 0?\r\n files.map((file) => {\r\n return (\r\n this.setIcon(file)\r\n )\r\n }) :\r\n
\r\n )\r\n }\r\n}","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import React, { Component } from 'react';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { Collapse } from 'react-bootstrap';\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport './../../../common/modal/modal.component.css';\r\n\r\nexport class RequestOnBehalfDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showUserDetails: false\r\n };\r\n }\r\n\r\n render() {\r\n const { robDetails, isRob } = this.props;\r\n return (\r\n isRob && robDetails != null && (\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n );\r\n }\r\n};","import React, { Component } from \"react\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport Icons from '../../../../../icon';\r\nimport { YES_OR_NO } from '../../../../../../utils/constant.utils';\r\nimport { ORDER_STATUS } from '../../../../../../constants/external-constants';\r\nimport { convertToDecimal } from '../../../../../../utils/helpers.utils';\r\n\r\nexport class NewMobileSubscriptionDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n editRequest = (orderStatusId, endUserId, requestorId) => {\r\n const editableRequest = (orderStatusId === ORDER_STATUS.waitingForAuthorization || orderStatusId === ORDER_STATUS.open);\r\n\r\n var employeeId = sessionStorage.getItem('EmployeeID');\r\n const isRequestOwner = (endUserId == employeeId) || (requestorId == employeeId);\r\n\r\n return editableRequest && isRequestOwner;\r\n }\r\n\r\n displayAccessories = (accessories, currency) => {\r\n\r\n return accessories != null && accessories.length != 0\r\n ? accessories.map((item, i) => (\r\n \r\n | {robDetails.LastName + ', ' + robDetails.FirstName} | |
| \r\n | {robDetails.Email} | \r\n
| \r\n | {robDetails.Location.LocationSite + ' - ' + robDetails.Location.LocationCity + ', ' + robDetails.Location.CountryName} | \r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { Collapse } from 'react-bootstrap';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from '../../../../../../constants/external-constants';\r\n\r\nexport class ChangeUserDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showUserDetails: false\r\n };\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n editRequest = (orderStatusId, endUserId, requestorId) => {\r\n const editableRequest = (orderStatusId === ORDER_STATUS.waitingForAuthorization || orderStatusId === ORDER_STATUS.open);\r\n\r\n var employeeId = sessionStorage.getItem('EmployeeID');\r\n const isRequestOwner = (endUserId == employeeId) || (requestorId == employeeId);\r\n const showUpdateRequestLink = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n\r\n return editableRequest && isRequestOwner && showUpdateRequestLink;\r\n }\r\n render() {\r\n const { openRequestModal, data } = this.props;\r\n const { Order: { RequestType: { RequestTypeID, RequestType }, OrderStatusId, EndUserId, RequestorId } } = data || {};\r\n var IsInService = data.Subscription.CircuitStatus == CIRCUIT_STATUS.inService.name ? true : false;\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n \r\n : null \r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n : null}\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | \r\n {data.OtherLocationID != null && data.OtherLocationID != 0 ? data.OtherLocationCountry : data.Location.CountryName}\r\n | \r\n|
| \r\n {data.OtherLocationID != null && data.OtherLocationID != 0 ? data.OtherLocationName : data.Location.DeliveryAddress}\r\n | \r\n
| {data.Subscription.Vendor} | \r\n|
| {data.Subscription.CircuitType} | \r\n|
| \r\n | \r\n |
| {data.Subscription.PhoneCaseAccessory ? YES_OR_NO.Yes : YES_OR_NO.No} | \r\n|
| {data.Subscription.PlanDetails.PlanName} | \r\n|
| {totalOrderCost} {data.Subscription.PlanDetails.Currency.CurrencyName} | \r\n
\r\n
\r\n | {data.BusinessJustification.PurposeOfUse} | \r\n|
| {data.BusinessJustification.DetailName} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n|
| {data.BusinessJustification.TermAgreement ? YES_OR_NO.Yes : YES_OR_NO.No} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from '../../../../../common/translation/translation.component';\r\n\r\nexport class ChangePricePlanDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n renderPlanComponents = props => {\r\n return props != null && props.length != 0\r\n ? props.map((item, i) => (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
*/}\r\n {/*
*/}\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
TRANSFER TO NEW SUBSCRIBER
\r\n {/*| {data.NewRequest.User.LastName}, {data.NewRequest.User.FirstName} {data.NewRequest.User.MiddleName} | \r\n|
| \r\n | \r\n this.setState({ showUserDetails: !this.state.showUserDetails })} className=\"order-action-link\">\r\n {this.state.showUserDetails ? \r\n \r\n {data.NewRequest.User.Email} \r\n{data.NewRequest.User.Location.LocationSite + \" - \" + data.NewRequest.User.Location.LocationCity + \", \" + data.NewRequest.User.Location.CountryName} \r\n | \r\n
| {data.BusinessJustification.PurposeOfUse} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { YES_OR_NO } from \"../../../../../../utils/constant.utils\";\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from \"../../../../../../constants/external-constants\";\r\n\r\nexport class ChangeVendorDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n renderPlanComponents = props => {\r\n const { PlanComponents } = this.props.data.NewRequest.PlanDetails;\r\n return PlanComponents != null && PlanComponents.length != 0\r\n ? PlanComponents.map((item, i) => (\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n|
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.PlanDetails.PlanName} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.SimType.SimTypeName} | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {data.NewRequest.PlanDetails.PlanName} | \r\n|
| {data.NewRequest.PlanDetails.Monthly.toFixed(2)} {data.NewRequest.PlanDetails.Currency.CurrencyName} per month | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\n\r\nexport class ReplaceSimDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { data } = this.props;\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ? \r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.OldVendorDetailName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {data.BillingAddress && data.BillingAddress.CountryName} | \r\n|
| {data.BillingAddress && (data.OtherLocationName ? data.OtherLocationName : data.BillingAddress.DeliveryAddress)} | \r\n|
| {data.NewRequest.Vendor && data.NewRequest.Vendor.VendorName} | \r\n|
| {data.NewRequest.Vendor && data.NewRequest.CircuitType} | \r\n|
| \r\n | \r\n |
| {data.Subscription.PhoneCaseAccessory ? YES_OR_NO.Yes : YES_OR_NO.No} | \r\n|
| {data.NewRequest.PlanDetails && data.NewRequest.PlanDetails.PlanName} | \r\n|
| {data.NewRequest.PlanDetails.TotalCost.toFixed(2)} {data.NewRequest.PlanDetails.Currency.CurrencyName} | \r\n
| {data.BusinessJustification.PurposeOfUse} | \r\n|
| {data.BusinessJustification.DetailName} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from \"../../../../../../constants/external-constants\";\r\nimport { YES_OR_NO } from '../../../../../../utils/constant.utils';\r\nimport Icons from '../../../../../icon';\r\n\r\n\r\nexport class ReplaceDeviceDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n displayAccessories = (accessories, currency) => {\r\n\r\n return accessories != null && accessories.length != 0\r\n ? accessories.map((item, i) => (\r\n\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n|
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.PlanDetails.PlanName} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.SimType.SimTypeName} | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {data.NewRequest.SimType.SimTypeName} | \r\n|
| {data.Location === null ? data.OtherLocationName : data.Location.DeliveryAddress} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from '../../../../../../constants/external-constants';\r\n\r\nexport class AccessoryDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n displayAccessories = (accessories, currency) => {\r\n\r\n return accessories != null && accessories.length != 0\r\n ? accessories.map((item, i) => (\r\n\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n\r\n {data.Subscription.MobileServiceModel\r\n && data.Subscription.MobileServiceModel.length > 0 ?\r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| \r\n | \r\n ||
| {data.Subscription.PhoneCaseAccessory ? YES_OR_NO.Yes : YES_OR_NO.No} | \r\n||
| {data.BillingAddress.DeliveryAddress} | : null}\r\n {data.OtherLocationID > 0 ?{data.OtherLocationName} | : null}\r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n||
| {data.Subscription.MobileServiceModel[0].OrderCost.toFixed(2)} {data.Subscription.PlanDetails.Currency.CurrencyName} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { convertToDate } from '../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { RequestOnBehalfDetails } from '../.././request-on-behalf-details.component';\r\nimport Icons from '../../../../../icon';\r\nimport { getRequestUserSessionData as getUserData } from '../../../../../../utils/helpers.utils';\r\nimport { REQUEST_STATUS, ORDER_STATUS, CIRCUIT_STATUS } from \"../../../../../../constants/external-constants\";\r\nimport FormatDate from \"../../../../../common/date/format-date.component\";\r\n\r\nexport class TerminateSubscriptionDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { status, data, isWireline, openRequestModal, isAllowUpdate } = this.props;\r\n const {Order: { RequestType: { RequestTypeID, RequestType } }} = data || {};\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {this.displayAccessories(data.Subscription.Accessories, data.Subscription.PlanDetails.Currency.CurrencyName)}\r\n {data.Subscription.MobileServiceModel\r\n && data.Subscription.MobileServiceModel.length > 0 &&\r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {`${data.Subscription.TotalOrderCost} ${data.Subscription.PlanDetails.Currency.CurrencyName}`} | \r\n||
| {data.BillingAddress.CountryName} | : null}\r\n {data.OtherLocationID > 0 ?{data.OtherLocationCountry} | : null}\r\n|
| {data.BillingAddress.DeliveryAddress} | : null}\r\n {data.OtherLocationID > 0 ?{data.OtherLocationName} | : null}\r\n|
| {data.BusinessJustification.DetailName} | \r\n||
| {data.BusinessJustification.BusinessJustification} | \r\n||
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { convertToDate } from '../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { RequestOnBehalfDetails } from '../.././request-on-behalf-details.component';\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from '../../../../../../constants/external-constants';\r\nimport { withRouter } from 'react-router-dom';\r\nimport FormatDate from \"../../../../../common/date/format-date.component\";\r\n\r\nclass IntlRoamingAccessDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n editRequest = (orderStatusId, endUserId, requestorId) => {\r\n const editableRequest = (orderStatusId === ORDER_STATUS.waitingForAuthorization || orderStatusId === ORDER_STATUS.open );\r\n var employeeId = sessionStorage.getItem('EmployeeID');\r\n const isRequestOwner = (endUserId == employeeId) || (requestorId == employeeId);\r\n const showUpdateRequestLink = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n\r\n return editableRequest && isRequestOwner && showUpdateRequestLink;\r\n }\r\n render() {\r\n const { status, openRequestModal, data, isWireline, selectedItem } = this.props;\r\n const { Order: { RequestType: { RequestTypeID, RequestType }, OrderStatusId, EndUserId, RequestorId } } = data || {};\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| \r\n | \r\n |
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(IntlRoamingAccessDetails)","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { convertToDate } from '../../../../../../utils/helpers.utils';\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS, CIRCUIT_STATUS } from \"../../../../../../constants/external-constants\";\r\nimport FormatDate from \"../../../../../common/date/format-date.component\";\r\n\r\nexport class PortOutDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n editRequest = (orderStatusId, endUserId, requestorId) => {\r\n const editableRequest = (orderStatusId === ORDER_STATUS.waitingForAuthorization || orderStatusId === ORDER_STATUS.open);\r\n\r\n var employeeId = sessionStorage.getItem('EmployeeID');\r\n const isRequestOwner = (endUserId == employeeId) || (requestorId == employeeId);\r\n const showUpdateRequestLink = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n\r\n return editableRequest && isRequestOwner && showUpdateRequestLink;\r\n }\r\n\r\n render() {\r\n const { data, openRequestModal } = this.props;\r\n const {Order: { RequestType: { RequestTypeID, RequestType }, OrderStatusId, EndUserId, RequestorId }} = data || {};\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName != null ? data.Subscription.PlanDetails.PlanName : | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {data.Order.RequestType.RequestType} | \r\n|
| \r\n | \r\n |
| \r\n | \r\n |
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.Order.CountriesToBeVisited} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport Icons from '../../../../../icon';\r\nimport { ORDER_STATUS } from '../../../../../../constants/external-constants';\r\n\r\nclass PortInDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n \r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n editRequest = (orderStatusId, endUserId, requestorId) => {\r\n const editableRequest = (orderStatusId === ORDER_STATUS.waitingForAuthorization || orderStatusId === ORDER_STATUS.open);\r\n\r\n var employeeId = sessionStorage.getItem('EmployeeID');\r\n const isRequestOwner = (endUserId == employeeId) || (requestorId == employeeId);\r\n\r\n return editableRequest && isRequestOwner;\r\n }\r\n\r\n render() {\r\n const { data, isWireline, openRequestModal } = this.props;\r\n const { Order: { RequestType: { RequestTypeID, RequestType }, OrderStatusId, EndUserId, RequestorId }} = data || {};\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| \r\n | \r\n |
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(PortInDetails)","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { convertToDate } from '../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport Icons from '../../../../../icon';\r\nimport { CIRCUIT_STATUS } from '../../../../../../constants/external-constants';\r\n\r\nexport class OtherMobileRequestDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n componentDidMount = () => {\r\n this.props.isAllowUpdate()\r\n }\r\n\r\n render() {\r\n const { data, isAllowUpdate, openRequestModal } = this.props; \r\n const { Order: { RequestType: { RequestTypeID, RequestType } } } = data || {};\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n\r\n : null \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n \r\n
\r\n {data.Order.OrderNumber}\r\n
\r\n\r\n | \r\n {data.OtherLocationID != null && data.OtherLocationID != 0 ? data.OtherLocationCountry : data.Location.CountryName}\r\n | \r\n|
| \r\n {data.OtherLocationID != null && data.OtherLocationID != 0 ? data.OtherLocationName : data.Location.DeliveryAddress}\r\n | \r\n
| {data.Subscription.PersonalMobile} | \r\n|
| {data.Subscription.CurrentVendor} | \r\n|
| {data.Subscription.AccountNumber} | \r\n|
| {data.Subscription.PortPinCode} | \r\n|
| {data.Subscription.CurrentBillingAddress} | \r\n|
| {data.Subscription.Vendor} | \r\n|
| {data.Subscription.CircuitType} | \r\n|
| \r\n | \r\n |
| {data.Subscription.PhoneCaseAccessoryDisplay} | \r\n|
| {data.Subscription.PlanDetails.PlanName} | \r\n|
| \r\n {\r\n data.Subscription.PlanDetails.PlanComponents.map((item, i) => (\r\n {item.ComponentName} \r\n ))\r\n }\r\n | \r\n |
| {data.Subscription.PlanDetails.TotalCost.toFixed(2)} {data.Subscription.PlanDetails.Currency.CurrencyName} | \r\n
\r\n
\r\n | {data.BusinessJustification.PurposeOfUse} | \r\n|
| {data.BusinessJustification.DetailName} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n|
| {data.BusinessJustification.TermAgreementDisplay} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { toYesOrNo } from '../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\n\r\nexport class WirelineOtherDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { data } = this.props;\r\n console.log('data', data.BusinessWireline)\r\n return (\r\n {openRequestModal(RequestTypeID, RequestType)}} \r\n labelValue={\"Update Order Request\"}\r\n labelClass=\"order-detail-edit-label\" \r\n />\r\n : null\r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n {data.Circuit.CircuitId != null ?\r\n \r\n \r\n
\r\n :\r\n \r\n \r\n
\r\n }\r\n
\r\n \r\n
\r\n {data.Order.IsRequestedInBehalf ?\r\n \r\n
\r\n \r\n {data.Order.OrderNumber}\r\n
\r\n | {data.Order.RequestType.RequestType} | \r\n
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.CircuitStatus} | \r\n
| \r\n | {data.Subscription.VendorName ?\r\n data.Subscription.VendorName :\r\n | \r\n
| \r\n | {data.Subscription.PlanDetails.PlanName ?\r\n data.Subscription.PlanDetails.PlanName :\r\n | \r\n
| \r\n | {data.Subscription && data.Subscription.SubscriptionDetailDevice ?\r\n data.Subscription.SubscriptionDetailDevice.EquipmentModel :\r\n | \r\n
| {data.Order.RequestDetails} | \r\n
| {data.Circuit.CircuitCode} | \r\n|
| {data.Order.RequestDetails} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { PrimarySecondaryString } from '../../../../../../../constants/external-constants';\r\nimport { convertToDate, toYesOrNo } from '../../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../../request-on-behalf-details.component\"\r\nimport Translation from \"../../../../../../common/translation/translation.component\";\r\n\r\nexport class NewCircuitDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { data } = this.props;\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n|
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.PlanDetails.PlanName} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.SimType.SimTypeName} | \r\n
| {data.Order.RequestType.RequestType} | \r\n|
| {data.BusinessWireline.WirelineApproverName} | \r\n|
| {data.BusinessWireline.LocalContactEmail} | \r\n|
| {data.BusinessWireline.LocalContactFullName} | \r\n|
| {data.BusinessWireline.LocalContactPhone} | \r\n|
| {data.BusinessWireline.AltLocalContactEmail} | \r\n|
| {data.BusinessWireline.AltLocalContactFullName} | \r\n|
| {data.BusinessWireline.AltLocalContactPhone} | \r\n|
| {toYesOrNo(data.BusinessWireline.ExpediteRequest)} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../../common/translation/translation.component\";\r\n\r\nexport class NewCircuitExhibitBDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { data } = this.props;\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n
| {data.Location.CountryName} | \r\n|
| {data.Location.DeliveryAddress} | \r\n|
| {data.LocationAddress != null ? data.LocationAddress.LocationName : null} | \r\n|
| {data.DemarcLocation} | \r\n|
| {data.LocationP2P != null ? data.LocationP2P.LocationName : null} | \r\n|
| {data.DemarcLocationPTP} | \r\n|
| Company Code | \r\n //{data.Order.CostCenter} | \r\n //
| {data?.BusinessWireline?.CircuitCostAllocations?.GLCode} | \r\n|
| {data?.BusinessWireline?.CircuitCostAllocations?.CostCode} | \r\n
| {data.Subscription.Vendor} | \r\n|
| {data.Subscription.ItemUse} | \r\n|
| {data.Circuit.CircuitTypeName} | \r\n|
| {data.Subscription.SubCircuitType} | \r\n|
| {data.Subscription.PrimarySecondary} | \r\n|
| {data.Subscription.BtnText} | \r\n|
| {data.Subscription.Mrc} | \r\n|
| {data.Subscription.Nrc} | \r\n|
| {data.Subscription.Mrc2} | \r\n|
| {data.Subscription.Nrc2} | \r\n|
| {data.Subscription.Mrc + data.Subscription.Nrc + data.Subscription.Mrc2 + data.Subscription.Nrc2} | \r\n
\r\n
\r\n | {data.BusinessWireline.WirelineApproverName} | \r\n|
| {data.BusinessWireline.LocalContactEmail} | \r\n|
| {data.BusinessWireline.LocalContactFullName} | \r\n|
| {data.BusinessWireline.LocalContactPhone} | \r\n|
| {data.BusinessWireline.AltLocalContactEmail} | \r\n|
| {data.BusinessWireline.AltLocalContactFullName} | \r\n|
| {data.BusinessWireline.AltLocalContactPhone} | \r\n|
| {convertToDate(data.Order.NeedByDate, 'DD MMM YYYY')} | \r\n|
| {data.BusinessJustification.PurposeOfUse} | \r\n|
| {toYesOrNo(data.BusinessWireline.ExpediteRequest)} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { EXHIBIT_TYPE as EXHIBITTYPE } from \"./../../../../../../../utils/constant.utils\";\r\nimport { requestDetailsActions } from \"./../../../../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { NewCircuitDetails } from \"./wireline-new-circuit-details.component\";\r\nimport { NewCircuitExhibitBDetails } from \"./new-circuit-exhibit-b-detail.component\";\r\n\r\nclass NewCircuitDetailDisplay extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n await this.props.getExhibitType();\r\n }\r\n\r\n displayForm = () => {\r\n\r\n const { exhibitType } = this.props.requestDetail;\r\n let form;\r\n\r\n if (exhibitType == EXHIBITTYPE.exhibitA) {\r\n form = \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n
| {data.Location.CountryName} | \r\n|
| {data.Location.LocationName} | \r\n|
| {data.Order.CostCenter} | \r\n
| {data.Subscription.Vendor} | \r\n|
| {data.Subscription.Plan} | \r\n|
| {data.Subscription.PlanDetails.PlanComponentName} {(data.Subscription.PlanDetails.Monthly / data.Subscription.Quantity).toFixed(2)} {data.Subscription.PlanDetails.Currency.CurrencyName} per month | \r\n|
| {data.Subscription.Quantity} | \r\n|
| {data.Subscription.TotalCost} | \r\n
\r\n
\r\n | {data?.BusinessWireline?.WirelineApproverName} | \r\n|
| {data.BusinessJustification.PurposeOfUse} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | */}\r\n
\r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { requestDetail } = state;\r\n return {\r\n requestDetail\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestDetailsActions),\r\n dispatch\r\n )\r\n)(NewCircuitDetailDisplay);","import React, { Component } from 'react';\r\nimport Table from 'react-bootstrap/Table';\r\nimport { CODE_DETAIL_ID } from '../../../../../constants/external-constants';\r\nimport { OrderRequestFiles } from '../request-details-files.component';\r\nimport { RequestOnBehalfDetails } from \"../request-on-behalf-details.component\";\r\nimport Translation from '../../../../common/translation/translation.component';\r\n\r\nexport class OrderQuotationDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n renderPlanComponents = props => {\r\n return props != null && props.length != 0\r\n ? props.map((item, i) => (\r\n \r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { OrderRequestFiles } from \"../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\n\r\nexport class WirelineChangeVendorDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n //renderPlanComponents = props => {\r\n // return props != null && props.length != 0\r\n // ? props.map((item, i) => (\r\n // \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n | {data.Order.OrderNumber} | \r\n
| {data.Location.CountryName} | \r\n|
| {data.Location.LocationName} | \r\n|
| {data.LocationP2P != null ? data.LocationP2P.LocationName : \"\"} | \r\n
| {data.QuotationSubscription.QuotationCircuitId} | \r\n|
| {data.QuotationSubscription.Vendors.length > 0\r\n ? data.QuotationSubscription.Vendors.map(e => e.VendorName).join(\"; \")\r\n : ''} | \r\n|
| {data.QuotationSubscription.CircuitTypes.length > 0\r\n ? data.QuotationSubscription.CircuitTypes.map(e => e.DetailName).join(\"; \")\r\n : ''} | \r\n|
| {data.QuotationSubscription.ContractTerms.length > 0\r\n ? data.QuotationSubscription.ContractTerms.map(e => e.DetailName + \" Months\").join(\"; \")\r\n : ''}\r\n | \r\n|
| \r\n {data.QuotationSubscription.Bandwidth.map(e => e.CodeDetailID != CODE_DETAIL_ID.Other ? e.DetailName + \" Mbps\" : '').join(\"; \")}\r\n | \r\n|
| \r\n {data.QuotationSubscription.BandwidthOther}\r\n | \r\n
| \r\n {data.BusinessJustification.PurposeOfUse}\r\n | \r\n|
| \r\n {data.BusinessJustification.BusinessJustification}\r\n | \r\n|
| \r\n {data.BusinessJustification.AdditionalInformation}\r\n | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Table from \"react-bootstrap/Table\";\r\nimport { convertToDate } from '../../../../../../../utils/helpers.utils';\r\nimport { OrderRequestFiles } from \"../../../request-details-files.component\";\r\nimport { RequestOnBehalfDetails } from \"../../../request-on-behalf-details.component\";\r\nimport Translation from \"../../../../../../common/translation/translation.component\";\r\n\r\nexport class WirelineTerminateCircuitDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n render() {\r\n const { data, isWireline } = this.props;\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n | {data.Order.OrderNumber} | \r\n|
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.PlanDetails.PlanName} | \r\n
| \r\n | {data.Subscription.OldVendorDetailName} | \r\n
| \r\n | {data.SimType.SimTypeName} | \r\n
| {data.NewRequest.Vendor && data.NewRequest.Vendor.VendorName} | \r\n|
| {data.Subscription.OrderOption} | \r\n|
| {data.Subscription.EquipmentCatalog} | \r\n|
| {data.Subscription.PlanDetails && data.Subscription.PlanDetails.PlanName} | \r\n|
| {data.Subscription.PlanDetails && data.Subscription.PlanDetails.PlanComponents > 0\r\n ? data.Subscription.PlanDetails.PlanComponents.map(p => p.ComponentName).join(\"; \")\r\n : ''} | \r\n|
| {data.Subscription.PlanDetails.Monthly.toFixed(2)} {data.Subscription.PlanDetails.Currency.CurrencyName} per month | \r\n|
| {data.SimType.SimTypeName} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { APPROVAL_MESSAGE, REQUEST_TYPES_ID as RequestType, WIRELINE_REQUEST_TYPES_ID as WirelineRequestIds } from \"../../../../constants/external-constants\";\r\nimport { valueExist } from '../../../../utils/helpers.utils';\r\nimport { RequestProcess } from \"./request-process.component\";\r\nimport { RequestDetailProcess } from \"./request-detail-process.component\";\r\nimport RequestCommentSection from \"./request-comment-section.component\";\r\nimport { ListTab } from \"../../../common/list-tab/list-tab.component\";\r\nimport { NewMobileSubscriptionDetails } from \"../request-details/request-detail-display-types/wireless/new-mobile-subscription-details.component\";\r\nimport { ChangeUserDetails } from \"../request-details/request-detail-display-types/wireless/change-user-details.component\";\r\nimport { ChangePricePlanDetails } from \"../request-details/request-detail-display-types/wireless/change-price-plan.component\";\r\nimport { ChangeVendorDetails } from \"../request-details/request-detail-display-types/wireless/change-vendor-details.component\";\r\nimport { ReplaceSimDetails } from \"../request-details/request-detail-display-types/wireless/replace-sim-details.component\";\r\nimport { ReplaceDeviceDetails } from \"../request-details/request-detail-display-types/wireless/replace-device-details.component\";\r\nimport { AccessoryDetails } from \"../request-details/request-detail-display-types/wireless/accessory-details.component\";\r\nimport { TerminateSubscriptionDetails } from \"../request-details/request-detail-display-types/wireless/terminate-subscription-details.component\";\r\nimport IntlRoamingAccessDetails from \"../request-details/request-detail-display-types/wireless/intl-roaming-access-details.component\";\r\nimport { PortOutDetails } from \"../request-details/request-detail-display-types/wireless/port-out-details.component\";\r\nimport PortInDetails from \"../request-details/request-detail-display-types/wireless/port-in-details.component\";\r\nimport { OtherMobileRequestDetails } from \"../request-details/request-detail-display-types/wireless/other-mobile-request-details.component\";\r\nimport { WirelineOtherDetails } from \"../request-details/request-detail-display-types/wireline/wireline-other-details.component\";\r\n\r\nimport NewCircuitDetailDisplay from \"../request-details/request-detail-display-types/wireline/new-circuit/new-circuit-detail-display.component\";\r\nimport { OrderQuotationDetails } from \"../request-details/request-detail-display-types/order-quotation-details.component\";\r\nimport { requestDetailsActions } from \"../../../../store/external/request-reducer/request-details.reducer\";\r\n//wireline components\r\nimport { WirelineChangeVendorDetails } from \"../request-details/request-detail-display-types/wireline/wireline-change-vendor-details.component\";\r\nimport { WirelineTerminateCircuitDetails } from \"../request-details/request-detail-display-types/wireline/terminate/wireline-terminate-circuit-details.component\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../utils/constant.utils';\r\nimport { REQUEST_MODAL_TAB } from '../../../../utils/constant.utils';\r\nimport { requestLogActions } from '../../../../store/external/request-reducer/request-log.reducer';\r\nimport {createRequestActions} from '../../../../store/external/request-reducer/create-request.reducer';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { getRequestUserSessionData as getUserData } from '../../../../utils/helpers.utils';\r\nimport { REQUEST_STATUS } from \"../../../../../app/constants/external-constants\";\r\nimport { ConfirmationNotificationModal } from \"../../../common/modal/confirmation-modal.component\";\r\n\r\nexport class RequestOrderDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n openRequestModal = (id, type) => {\r\n const { history, setRequestType, updateOrderRequest } = this.props;\r\n setRequestType(id, type);\r\n updateOrderRequest(true);\r\n \r\n const orderId = this.props.match.params.id;\r\n setTimeout(() => {\r\n history.push(`${history.location.pathname}/Update`);\r\n }, 100); \r\n };\r\n\r\n isAllowUpdate = () => {\r\n const { data } = this.props;\r\n let userData = getUserData();\r\n if (data !== null && data !== undefined) {\r\n let onBehalfId = data.RequestedInBeHalfOf ? data.RequestedInBeHalfOf.EmployeeId.toString() : '';\r\n let ownerId = data.Order.RequestorId ? data.Order.RequestorId.toString() : '';\r\n const showUpdateRequestLink = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n if (showUpdateRequestLink === false) {\r\n return false;\r\n }\r\n if (userData.employeeID === onBehalfId || userData.employeeID === ownerId) {\r\n if (data.Order.OrderStatusDisplay === REQUEST_STATUS.inProgress || data.Order.OrderStatusDisplay === REQUEST_STATUS.open) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n return false;\r\n } \r\n\r\n renderDisplay = (typeId) => {\r\n const { isOtherRequest, isQuotationRequest, data, status, selectedItem } = this.props;\r\n let form;\r\n let isWireline = valueExist(WirelineRequestIds, typeId);\r\n switch (typeId) {\r\n\r\n case RequestType.newMobile:\r\n case RequestType.newCircuitOrder:\r\n form = \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n {isWireline &&\r\n
\r\n | {data.Order.OrderNumber} | \r\n|
| {data.Circuit.CircuitCode} | \r\n|
| \r\n | {data.Subscription.PlanDetails.PlanName} | \r\n
| \r\n | {data.Subscription.VendorName} | \r\n
| \r\n | {data.SimType.SimTypeName} | \r\n
| {convertToDate(data.Order.OrderDisconnectDate, 'DD MMM YYYY')} | \r\n|
| {data.BusinessJustification.BusinessJustification} | \r\n|
| {data.BusinessJustification.AdditionalInformation} | */}\r\n
\r\n \r\n {APPROVAL_MESSAGE.ACTION_CONFIRMATION} \r\n \r\n \r\n {approvalType} \r\n \r\n {APPROVAL_MESSAGE.TARGET_REQUEST}\r\n \r\n }\r\n title={`${approvalType===APPROVAL_MESSAGE.APPROVE ? APPROVAL_MESSAGE.APPROVE_REQUEST : APPROVAL_MESSAGE.REJECT_REQUEST}`}\r\n handleModal={handleConfirmationModal}\r\n disabled={this.state.isSaving}\r\n customClass={'comment-notification-modal approve-dialog modal-text-bold'}\r\n isDecisionModal={true}\r\n />\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const {requestDetail, translation } = state;\r\n return {\r\n ...requestDetail\r\n , ...translation\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestDetailsActions),\r\n dispatch\r\n )\r\n)(RequestOrderProgress);\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { WIRELINE_REQUEST_TYPES_ID as WIRELINEREQUESTIDS } from '../../../../constants/external-constants';\r\nimport { valueExist } from '../../../../utils/helpers.utils';\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport Icons from \"../../../icon\";\r\n\r\nclass RequestOwnerDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n renderManagerDisplay = (isWireline) => {\r\n const { data } = this.props;\r\n const { employeeList, requestOnBehalfData } = this.props.createRequest;\r\n const { newUser } = this.props.wirelessChangeUserRequest\r\n let display;\r\n\r\n if (requestOnBehalfData.EmployeeId > 0 && Object.keys(newUser).length === 0) {\r\n display =\r\n \r\n {\r\n businessHoursNotice &&
\r\n - \r\n {listItem.map((item, id) => (\r\n
- \r\n this.tabSelected(e)}>{item.listTitle}\r\n \r\n ))}\r\n
{showRejectionCommentBox ? this.tabItem(\"1\") : this.tabItem(this.state.toggleTab)}
\r\n \r\n
\r\n
;\r\n } else {\r\n display =\r\n \r\n {requestOnBehalfData.CostCodeApproverFullName != null ?\r\n requestOnBehalfData.CostCodeApproverFullName :\r\n employeeList !== null && employeeList.length > 0 ?\r\n employeeList[0].CostCodeApproverFullName :\r\n 'N/A'\r\n }\r\n
\r\n\r\n 0 ?\r\n employeeList[0].CostCodeApproverEmailAddress :\r\n 'N/A'\r\n }\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n 0 ?\r\n employeeList[0].CostCodeApproverContatcNum !== null ?\r\n employeeList[0].CostCodeApproverContatcNum :\r\n 'N/A' :\r\n 'N/A'\r\n }\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n 0 ?\r\n employeeList[0].CostCodeApproverLocation.CountryName :\r\n 'N/A'\r\n }\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n\r\n 0 && employeeList[0].CostCodeApproverLocation !== null ?\r\n employeeList[0].CostCodeApproverLocation.LocationSite + \" - \" + employeeList[0].CostCodeApproverLocation.LocationCity + \", \" + employeeList[0].CostCodeApproverLocation.CountryName :\r\n 'N/A'\r\n }\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n
\r\n \r\n
\r\n
;\r\n }\r\n\r\n return display;\r\n }\r\n\r\n renderRequesterDisplay = () => { \r\n const { data } = this.props;\r\n const { requestOnBehalfData, employeeList } = this.props.createRequest;\r\n const { newUser } = this.props.wirelessChangeUserRequest\r\n let display;\r\n if (requestOnBehalfData.EmployeeId > 0 && Object.keys(newUser).length === 0) {\r\n display =\r\n \r\n {Object.keys(newUser).length > 0 ? newUser.CostCodeApproverFullName ? newUser.CostCodeApproverFullName : \"\" : data.CostCodeAuthorizer ? data.CostCodeAuthorizer.LastName + ', ' + data.CostCodeAuthorizer.FirstName + ' ' + (data.CostCodeAuthorizer.MiddleInitial !== \"\" ? data.CostCodeAuthorizer.MiddleInitial : \"\")\r\n : 'N/A'}\r\n
\r\n\r\n 0 ? newUser.CostCodeApproverEmailAddress !== null ? newUser.CostCodeApproverEmailAddress : \"N/A\" : data.CostCodeAuthorizer ? data.CostCodeAuthorizer.Email : 'N/A'}\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n 0 ? newUser.CostCodeApproverContatcNum != null ? newUser.CostCodeApproverContatcNum : \"N/A\" : data?.CostCodeAuthorizer?.PrimarySubscription != null ? data.CostCodeAuthorizer?.PrimarySubscription : \"N/A\"}\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n 0 ? newUser.CostCodeApproverLocation.CountryName != null ? newUser.CostCodeApproverLocation.CountryName : \"N/A\" : data.CostCodeAuthorizer != null ? data.CostCodeAuthorizer.CountryName : \"N/A\"}\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n\r\n 0 ? newUser.CostCodeApproverLocation.CountryName ? newUser.CostCodeApproverLocation.LocationSite + \" - \" + newUser.CostCodeApproverLocation.LocationCity + \", \" + newUser.CostCodeApproverLocation.CountryName : \"N/A\" :data.CostCodeAuthorizer != null ? data.CostCodeAuthorizer.LocationSite + \" - \" + data.CostCodeAuthorizer.LocationCity + \", \" + data.CostCodeAuthorizer.CountryName : \"N/A\"}\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n
\r\n \r\n
;\r\n } else {\r\n display =\r\n \r\n {requestOnBehalfData.LastFirstName}\r\n
\r\n\r\n 0 ?\r\n employeeList[0].PrimarySubscription !== null ?\r\n employeeList[0].PrimarySubscription :\r\n 'N/A' :\r\n \"N/A\"}\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n 0 && employeeList[0].LocationModel !== null ?\r\n employeeList[0].LocationModel.LocationSite + \" - \" + employeeList[0].LocationModel.LocationCity + \", \" + employeeList[0].LocationModel.CountryName :\r\n 'N/A'\r\n }\r\n size=\"15px\"\r\n containerClass=\"icon-container\"\r\n />\r\n
\r\n \r\n
;\r\n }\r\n\r\n return display;\r\n }\r\n\r\n render() {\r\n const { isLoading, typeId } = this.props;\r\n\r\n let isWireline = valueExist(WIRELINEREQUESTIDS, typeId);\r\n\r\n return (\r\n !isLoading ?\r\n \r\n {newUser.LastFirstName ?? `${data.LastName}, ${data.FirstName}`}\r\n
\r\n\r\n
\r\n \r\n
\r\n {this.renderRequesterDisplay()}\r\n {this.renderManagerDisplay(isWireline)}\r\n
: \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestDetail, createRequest, wirelessChangeUserRequest } = state;\r\n return {\r\n ...requestDetail\r\n , createRequest\r\n , wirelessChangeUserRequest\r\n };\r\n },\r\n //dispatch =>\r\n // bindActionCreators(\r\n // Object.assign({}, requestDetailsActions),\r\n // dispatch\r\n // )\r\n)(RequestOwnerDetails);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { REQUEST_TYPES_ID as RequestType, RAISE_REQUEST_ORDER_BASE } from '../../../../constants/external-constants';\r\nimport { EXHIBIT_TYPE as EXHIBITTYPE } from '../../../../utils/constant.utils';\r\n//import Translation from '../../../translation/translation.component';\r\nimport { ORFCheckbox, ORFSearchSuggestions as SearchSuggestions } from '../../../common/forms/order-request-form.component';\r\nimport { createRequestActions } from \"./../../../../store/external/request-reducer/create-request.reducer\";\r\n//wireless actions\r\nimport { newMobileSubscriptionActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/new-mobile-subscription.reducer\";\r\nimport { wirelessChangePricePlanActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-price-plan.reducer\";\r\nimport { wirelessChangUserActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-user.reducer\";\r\nimport { wirelessChangeVendorActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-vendor.reducer\";\r\nimport { wirelessReplaceSimActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-replace-sim.reducer\";\r\nimport { wirelessTerminateActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-terminate-subscription.reducer\";\r\nimport { wirelessPortInActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-port-in.reducer\";\r\nimport { wirelessPortOutActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-portout.reducer\";\r\nimport { wirelessAccessoryActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-accessory.reducer\";\r\nimport { wirelessOtherActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-other.reducer\";\r\nimport { wirelessReplaceDeviceActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-replace-device.reducer\";\r\nimport { wirelessIntlRoamingAccessActions } from \"../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-intl-roaming-access.reducer\"\r\n\r\n//wireline actions\r\nimport { newCircuitSubscriptionActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-subscription.reducer\";\r\nimport { wirelineChangeVendorActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-change-vendor.reducer\";\r\nimport { wirelineTerminateCircuitActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate-circuit.reducer\";\r\nimport { wirelineTerminateExhibitBActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate/wireline-terminate-exhibit-b.reducer\";\r\nimport { wirelineUpgradeCircuitActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-upgrade-circuit.reducer\";\r\nimport { newQuotationActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-quotation.reducer\";\r\nimport { wirelineOtherRequestActions } from \"./../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-other-request.reducer\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS as translation } from '../../../../utils/constant.utils';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ConfirmationModal } from \"../../../../components/common/modal/modal.component\";\r\nimport { requestDetailsActions } from \"./../../../../store/external/request-reducer/request-details.reducer\";\r\n\r\nclass RequestOnBehalf extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isROBEnable: false\r\n , error: false\r\n , inputOnce: false\r\n };\r\n\r\n this.SearchSuggestions = React.createRef();\r\n this.ConfirmationModal = React.createRef();\r\n this.ROBCheckbox = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n const { selectedUser } = this.props.sideNavMenu;\r\n const { approverData, selectedItem, requestData } = this.props.requestDetail;\r\n const { isUpdateRequest } = this.props.createRequest;\r\n const { RequestedInBeHalfOf } = this.props.requestDetail.requestData;\r\n\r\n if (isUpdateRequest && requestData?.Order?.IsRequestedInBehalf && (selectedItem.IsRequestor || selectedItem.IsOwner)) {\r\n const requestOnBehalfName = RequestedInBeHalfOf.Name?.trim();\r\n this.props.setRequestOnBehalfUser(requestOnBehalfName);\r\n this.ROBCheckbox.current.setChecked(true);\r\n this.SearchSuggestions.current.onChange(null, { newValue: requestOnBehalfName })\r\n }\r\n else if (selectedUser.EId) {\r\n var robData = {\r\n EmployeeId: selectedUser.EmployeeId\r\n , Name: selectedUser.FullName\r\n , EmailAddress: selectedUser.EmailAddress\r\n , ContactNumber: selectedUser.ContactNumber\r\n , Country: selectedUser.Country\r\n , Location: selectedUser.Location\r\n , LocationSiteCityCountry: selectedUser.LocationSiteCityCountry\r\n , Vip: selectedUser.Vip\r\n };\r\n this.showAutoSuggestion(true, robData);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.setIsRequestOnBehalf(false);\r\n this.props.setIsRequestBehalfToggle(false);\r\n }\r\n\r\n displayReminder = (typeId) => {\r\n\r\n switch (typeId) {\r\n case RequestType.newMobile:\r\n return (\r\n \r\n
);\r\n\r\n case RequestType.portIn:\r\n return (\r\n \r\n
);\r\n default:\r\n }\r\n };\r\n\r\n showAutoSuggestion = (checked, robData) => {\r\n this.resetRequestForm();\r\n this.props.resetSubscriptList();\r\n this.props.setIsRequestOnBehalf(checked, robData);\r\n this.props.setIsRequestBehalfToggle(true);\r\n if (!checked) {\r\n this.SearchSuggestions.current.onChangeSuggestion(null, { newValue: '' });\r\n }\r\n }\r\n\r\n onChangeROBSelect = (value, propsName, objects) => { \r\n this.props.onRequestOnBehalfUserSelect(value, propsName, objects); \r\n if(value === '' || !this.state.inputOnce) { \r\n this.setState({ inputOnce: true }, () => { this.resetRequestForm();\r\n });\r\n } \r\n }\r\n\r\n handleFirstInput = () =>{\r\n this.setState({ inputOnce: false });\r\n }\r\n\r\n resetRequestForm = () => {\r\n switch (this.props.createRequest.requestTypeId) {\r\n //wireless\r\n case RequestType.newMobile:\r\n this.props.resetNewMobileForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.newSubscriptionWireline:\r\n this.props.resetNewMobileForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.changeUser:\r\n this.props.resetWirelessChangeUserForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.changePricePlan:\r\n this.props.resetWirelessChangePricePlanModel(); break;\r\n case RequestType.changeVendor:\r\n this.props.resetWirelessChangeVendorForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.simReplacement:\r\n this.props.resetWirelessReplaceSimForm(); break\r\n case RequestType.deviceReplacement:\r\n this.props.resetWirelessReplaceDeviceForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.terminate:\r\n this.props.resetWirelessTerminateForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.portIn:\r\n this.props.resetWirelessPortInForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.portOut:\r\n this.props.resetWirelessPortOutForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.otherRequestOther:\r\n case RequestType.other:\r\n case RequestType.simActivation:\r\n case RequestType.enableHotspot:\r\n case RequestType.changeNumber:\r\n case RequestType.suspendResumeService:\r\n this.props.resetWirelessOtherForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.accessory:\r\n this.props.resetWirelessAccessoryForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.subscriptionCancellation:\r\n this.props.resetWirelessTerminateForm({ isResetRequestOnBehalf: true }); break;\r\n case RequestType.intlRoamingAccess:\r\n this.props.resetWirelessIntlRoamingAccessForm({ isResetRequestOnBehalf: true }); break;\r\n //case RequestType.other: break;\r\n\r\n //wireline\r\n case RequestType.newCircuitOrder:\r\n this.props.resetNewCircuitForm(); break;\r\n case RequestType.wirelineChangeVendor:\r\n this.props.resetWirelineChangeVendorForm(); break;\r\n case RequestType.terminateSubscriptionWireline:\r\n\r\n const { resetWirelineTerminateCircuitForm, resetWirelineTerminateExhibitBForm } = this.props;\r\n const { exhibitType } = this.props.createRequest;\r\n\r\n if (exhibitType == EXHIBITTYPE.exhibitA) {\r\n resetWirelineTerminateCircuitForm();\r\n } else if (exhibitType == EXHIBITTYPE.exhibitB) {\r\n resetWirelineTerminateExhibitBForm()\r\n } else {\r\n //form = null;\r\n }\r\n break;\r\n\r\n case RequestType.wirelineOtherOther:\r\n this.props.resetWirelineOtherRequestForm(); break;\r\n case RequestType.newQuotation:\r\n this.props.resetQuotationForm(); break;\r\n\r\n default:\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n navigateTo(requestTypeId) {\r\n const { history, createRequest, setRequestType, typeId, updateOrderRequest } = this.props;\r\n \r\n if (typeId == RequestType.portIn || typeId == RequestType.newMobile) {\r\n updateOrderRequest(false);\r\n\r\n const requestTypeName = createRequest.requestTypes.Wireless.NewRequests.find(r => r.RequestTypeID == requestTypeId)?.RequestType ?? \"\";\r\n\r\n this.props.history.goBack();\r\n\r\n setTimeout(() => {\r\n setRequestType(requestTypeId, requestTypeName);\r\n history.push(`${history.location.pathname}/${RAISE_REQUEST_ORDER_BASE + requestTypeId}`);\r\n\r\n }, 100);\r\n }\r\n }\r\n\r\n showDiscardConfirmationModal = () => {\r\n if (this.props.typeId === RequestType.portIn) {\r\n this.navigateTo(RequestType.newMobile);\r\n }\r\n else if (this.props.typeId === RequestType.newMobile) {\r\n this.navigateTo(RequestType.portIn);\r\n }\r\n };\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n handleConfirm = () => {\r\n this.ConfirmationModal.current.handleClose();\r\n }\r\n\r\n checkAndSetROBData = () => {\r\n const { requestOnBehalfData, employeeList, isUpdateRequest } = this.props.createRequest;\r\n let ROBDetail = '';\r\n if(requestOnBehalfData.Name !== undefined && requestOnBehalfData.Name !== null && requestOnBehalfData.Name !== '') {\r\n if (employeeList !== undefined\r\n && employeeList !== null\r\n && employeeList.length > 0) {\r\n if (requestOnBehalfData.Eid !== undefined) {\r\n ROBDetail = `${requestOnBehalfData.Eid} | ${requestOnBehalfData.LocationSiteCityCountry}`;\r\n }\r\n \r\n }\r\n else{\r\n ROBDetail = `${requestOnBehalfData.EmailAddress} | ${requestOnBehalfData.LocationSiteCityCountry}`;\r\n }\r\n }\r\n return ROBDetail;\r\n }\r\n\r\n render() {\r\n const { typeId\r\n , disableROBCheckbox\r\n , fetchROBEmployeeByValue\r\n , withIcon\r\n } = this.props;\r\n const { selectedUser } = this.props.sideNavMenu;\r\n const { isRequestOnBehalf, requestOnBehalfData, employeeList, isUpdateRequest } = this.props.createRequest;\r\n const { selectedItem } = this.props.requestDetail;\r\n\r\n let disableROBforOwnerButNotRequestor = (isUpdateRequest && selectedItem?.IsRequestedInBehalf\r\n && (selectedItem.IsRequestor == false && selectedItem.IsOwner == true) ? true : false)\r\n\r\n const enableROB = selectedUser.EmployeeId != null;\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter(\r\n connect(\r\n state => {\r\n const { createRequest, sideNavMenu, translation, requestLog, requestDetail } = state;\r\n return {\r\n createRequest\r\n , sideNavMenu\r\n , ...translation\r\n , requestLog\r\n , requestDetail\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, createRequestActions\r\n // wireless actions\r\n , newMobileSubscriptionActions\r\n , wirelessChangePricePlanActions\r\n , wirelessChangUserActions\r\n , wirelessChangeVendorActions\r\n , wirelessReplaceSimActions\r\n , wirelessTerminateActions\r\n , wirelessPortInActions\r\n , requestDetailsActions\r\n , wirelessPortOutActions\r\n , wirelessAccessoryActions\r\n , wirelessOtherActions\r\n , wirelessReplaceDeviceActions\r\n , wirelessIntlRoamingAccessActions\r\n //wireline actions\r\n , newCircuitSubscriptionActions\r\n , wirelineChangeVendorActions\r\n , wirelineTerminateCircuitActions\r\n , wirelineTerminateExhibitBActions\r\n , wirelineUpgradeCircuitActions\r\n , newQuotationActions\r\n , wirelineOtherRequestActions\r\n ),\r\n dispatch\r\n )\r\n )(RequestOnBehalf)\r\n);\r\n","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport { Control, actions } from \"react-redux-form\";\r\n\r\nimport store from \"../../../store\";\r\n\r\nexport class CheckBox extends Component {\r\n render(){\r\n const {classWrapper, isRequired, checked, handleOnChange, disabled } = this.props;\r\n return(\r\n \r\n {this.displayReminder(typeId)}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n 0 ? employeeList : ''}\r\n onChangeAction={this.onChangeROBSelect}\r\n handleReset={this.onResetChange}\r\n searchAction={fetchROBEmployeeByValue}\r\n hidden={!isRequestOnBehalf}\r\n disabled={disableROBCheckbox || disableROBforOwnerButNotRequestor}\r\n defaultValue={selectedUser.FullName}\r\n withIcon={withIcon}\r\n errorMessage={this.toLocaleLanguage('error_user_not_exist')}\r\n haveError={this.haveError}\r\n handleFirstInput={this.handleFirstInput}\r\n />\r\n
\r\n \r\n {this.checkAndSetROBData()}\r\n
\r\n \r\n \r\n \r\n {isRequired && *}\r\n {this.props.label}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport class ControlCheckBox extends Component {\r\n handleChange(e) {\r\n var checked = e.target.checked;\r\n store.dispatch(actions.change(this.props.model, checked));\r\n }\r\n\r\n render() {\r\n const { checked, label, classWrapper, isRequired } = this.props;\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React, {useState} from \"react\";\r\nimport { CheckBox } from \"../../../common/custom-form/checkbox.component\";\r\nfunction EmailOptOut() {\r\n const [isChecked, setIsChecked] = useState(false);\r\n\r\n const checkBoxHandler=(e)=>{\r\n setIsChecked(e.target.checked);\r\n }\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default EmailOptOut;","import React, { useEffect, useRef, useState } from 'react';\r\nimport { actions } from 'react-redux-form';\r\n\r\nimport store from '../../../store';\r\n\r\nconst CustomSearchableSelect = (props) => {\r\n const { label, options=[], optionLabelKey, selected, placeholder, requiredField, isError, name, disabled = false, displayOption, maxLength, isMainFilter } = props;\r\n const [inputValue, setInputValue] = useState('');\r\n const [showOptions, setShowOptions] = useState(false);\r\n const [modifiedOptions, setModifiedOptions] = useState([]);\r\n const wrapperRef = useRef(null);\r\n const inputValueRef = useRef('');\r\n\r\n\r\n\r\n const handleClickOutside = (event) => {\r\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\r\n setShowOptions(false);\r\n // display selected value when choosen no value\r\n if (inputValueRef.current && inputValueRef.current.value === \"\") {\r\n setInputValue(selectedValue(undefined)); // clear input value\r\n setModifiedOptions(transformOptions(options)); // reset options\r\n if (isMainFilter === true) {\r\n handleOptionClick(options);\r\n }\r\n }\r\n // Check if input value does not exist in options\r\n else if (inputValueRef.current && modifiedOptions.findIndex(o => o.Value == inputValueRef.current.value) == -1) {\r\n if (name == \"inventoryEquipmentForm.costCodeId\"\r\n && (inputValueRef.current.value != null && inputValueRef.current.value != \"\")\r\n && modifiedOptions.findIndex(o => o.Label == inputValueRef.current.value) >= 0) { //special case for Bug 55079 since Cost Center field is using optionLabelKey={OPTION_LABEL.KEY_VALUE_LABEL}\r\n setInputValue(selectedValue(selected)); // Set your desired default value here\r\n }\r\n else {\r\n setInputValue(selectedValue(undefined)); // clear input value\r\n setModifiedOptions(transformOptions(options)); // reset options\r\n if (isMainFilter === true) {\r\n handleOptionClick(options);\r\n }\r\n }\r\n \r\n }\r\n // Reset input value if no selected\r\n else if (inputValueRef.current && inputValueRef.current.value !== \"\" && !selected) {\r\n setInputValue(selectedValue(undefined)); // clear input value\r\n setModifiedOptions(transformOptions(options)); // reset options\r\n }\r\n }\r\n else {\r\n // Reset if no selected and no input value\r\n if (inputValueRef.current && inputValueRef.current.value === \"\" && !selected) {\r\n setInputValue(selectedValue(undefined)); // clear input value\r\n setModifiedOptions(transformOptions(options)); // reset options\r\n }\r\n \r\n }\r\n };\r\n\r\n const transformOptions = (options=[]) => {\r\n if (options === null || options === undefined || !Array.isArray(options)) {\r\n return [];\r\n }\r\n const transformed = options?.map(option => {\r\n return {\r\n Key: option[optionLabelKey?.Key],\r\n Value: option[optionLabelKey?.Value],\r\n Label: option[optionLabelKey?.Label]\r\n };\r\n });\r\n\r\n return transformed;\r\n };\r\n\r\n\r\n const handleSearchChange = (e) => {\r\n const value = e.target.value;\r\n setInputValue(value);\r\n // Perform live search\r\n if (value === \"\") {\r\n setModifiedOptions(transformOptions(options)); \r\n if (!requiredField) {\r\n store.dispatch(actions.change(name, \"\"));\r\n store.dispatch(actions.change(props.fieldProp, \"\"));\r\n }\r\n } else {\r\n const filteredOptions = options.filter(option =>\r\n option.LocationSite && option.LocationSite.toLowerCase().includes(value.toLowerCase()) ||\r\n option.Idhr && option.Idhr.toLowerCase().includes(value.toLowerCase()) ||\r\n option.BillingAccount && option.BillingAccount.toLowerCase().includes(value.toLowerCase()) ||\r\n option.FilterName && option.FilterName.toLowerCase().includes(value.toLowerCase()) ||\r\n option.CircuitCode && option.CircuitCode.toLowerCase().includes(value.toLowerCase()) ||\r\n option.Value && option.Value.toLowerCase().includes(value.toLowerCase()) ||\r\n option.EquipmentModel && option.EquipmentModel.toLowerCase().includes(value.toLowerCase()) || \r\n option.AccountNumber && option.AccountNumber.toLowerCase().includes(value.toLowerCase()) ||\r\n option.PlanName && option.PlanName.toLowerCase().includes(value.toLowerCase())\r\n );\r\n const limitedOptions = filteredOptions.slice(0, 10);\r\n setModifiedOptions(transformOptions(limitedOptions));\r\n }\r\n };\r\n\r\n const selectedValue = (Key) => {\r\n if (Key === undefined) {\r\n return '';\r\n }\r\n\r\n const transOptions = displayOption ? options : transformOptions(options);\r\n if (props.name == 'inventoryCircuitEquipForm.ModelId') {\r\n const result = transOptions?.find(option => option.Key === Key.toString());\r\n return displayOption ? result?.Label : result?.Value;\r\n } else {\r\n const result = transOptions?.find(option => option.Key === Key);\r\n return displayOption ? result?.Label : result?.Value;\r\n }\r\n };\r\n\r\n const handleOptionClick = (option) => {\r\n\r\n const { onChange, tagName } = props;\r\n setShowOptions(false);\r\n\r\n var valObj = {\r\n target: {\r\n tagName: tagName ? tagName : \"SEARCHABLE-SELECT\",\r\n },\r\n value: option.Value,\r\n text: option.Value,\r\n key: option.Key,\r\n };\r\n\r\n if (typeof onChange === 'function') {\r\n if (tagName === \"SEARCHABLE-SELECT\") {\r\n onChange(valObj);\r\n store.dispatch(actions.change(name, valObj.key));\r\n }\r\n else {\r\n onChange(valObj.key);\r\n store.dispatch(actions.change(name, valObj.key));\r\n }\r\n }\r\n setInputValue(valObj?.value);\r\n\r\n };\r\n\r\n const handleOnBlur = (event) => {\r\n const acceptedEvent = event.code == \"Tab\" || event.type == \"blur\";\r\n if (modifiedOptions.findIndex(o => o.Value == inputValue) == -1 && !showOptions && acceptedEvent) {\r\n store.dispatch(actions.change(name, \"\"));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (selected !== null && selected !== undefined) {\r\n setInputValue(selectedValue(selected))\r\n }\r\n }, [selected])\r\n\r\n useEffect(() => {\r\n document.addEventListener('mousedown', handleClickOutside);\r\n document.addEventListener('keydown', handleOnBlur);\r\n return () => {\r\n document.removeEventListener('mousedown', handleClickOutside);\r\n document.removeEventListener('keydown', handleOnBlur);\r\n };\r\n });\r\n\r\n useEffect(() => {\r\n if (options.length > 0 && props.fieldProp != 'inventoryCicuitPlanDetailsForm.PlanId')\r\n {\r\n setModifiedOptions(transformOptions(options));\r\n }\r\n else if (options.length >= 0 && props.fieldProp == 'inventoryCicuitPlanDetailsForm.PlanId')\r\n {\r\n setModifiedOptions(transformOptions(options));\r\n }\r\n }, [options]);\r\n\r\n return (\r\n Field marked with an asterisk (*) are mandatory to submit a request.
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n setShowOptions(true)}\r\n onBlur={handleOnBlur}\r\n disabled={disabled}\r\n ref={inputValueRef}\r\n maxLength={maxLength}\r\n />\r\n {showOptions && (\r\n
\r\n );\r\n};\r\n\r\nexport default CustomSearchableSelect;\r\n","import React from 'react';\r\nimport { Control, Errors } from 'react-redux-form';\r\nimport CustomSearchableSelect from './custom-searchable-select.component';\r\n\r\nconst CustomSearchableSelectWrapper = ({ fieldProp, ...restProps }) => {\r\n const CustomSearch = (props) => {label}
\r\n - \r\n {modifiedOptions.map((option, index) => (\r\n
{props.children}
;\r\n };\r\n const ErrorBorderWrapper = (props) => {\r\n const isWarning = Object.keys(props.fieldValue.errors).some(r => r.includes(\"warning_\"));\r\n return \r\n };\r\n return (\r\n <>\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { newMobileRequest, createRequest, translation, requestDetail } = state;\r\n const { wirelessLocationFormA } = state.form;\r\n return {\r\n newMobileRequest\r\n , createRequest\r\n , wirelessLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newMobileSubscriptionActions, createRequestActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(WirelessLocationFormA);","import React, { Component } from \"react\";\r\nimport Icons from \"../../icon\";\r\nexport class TabberButton extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n active: false\r\n }\r\n this.onClickTabber=this.onClickTabber.bind(this);\r\n }\r\n onClickTabber() {\r\n const { onToggle } = this.props;\r\n\r\n var isActive = !this.state.active;\r\n this.setState({ active: isActive })\r\n\r\n if (onToggle) {\r\n onToggle(isActive);\r\n }\r\n }\r\n\r\n tabActive = () => {\r\n return this.state.active;\r\n }\r\n\r\n toggle(isActive) {\r\n const { onToggle } = this.props;\r\n this.setState({ active: isActive });\r\n\r\n if (onToggle) {\r\n onToggle(isActive);\r\n }\r\n }\r\n\r\n render(){\r\n const { title } = this.props;\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { debounce } from 'throttle-debounce';\r\nimport Icons from \"../../icon\";\r\nimport { Form, Button, FloatingLabel, DropdownButton } from 'react-bootstrap';\r\nimport Autosuggest from 'react-autosuggest';\r\nimport './custom-form.component.css';\r\nimport { sliceArray } from \"../../../utils/helpers.utils\";\r\n\r\nexport class InputField extends Component {\r\n render(){\r\n const { label, onChange, inputValue, customClass, placeholder, customWrapper, isDisable, requiredField, onBlur, maxLength, disabled } = this.props;\r\n var disableClass = isDisable ? 'disabled' : '';\r\n return (\r\n {title && title}
\r\n\r\n
\r\n \r\n
\r\n {this.props.label}\r\n \r\n {this.state.active &&\r\n
\t\t\t\t\t\t\t\t\t\t\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class CustomSearchableSelectKeyValue extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n search: '',\r\n showOptions: false,\r\n };\r\n this.wrapperRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n handleClickOutside = (event) => {\r\n if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {\r\n this.setState({ showOptions: false });\r\n }\r\n };\r\n\r\n handleSearchChange = (e) => {\r\n this.setState({ search: e.target.value });\r\n // filtering and slicing\r\n };\r\n\r\n handleOptionClick = (option) => {\r\n const { onChange } = this.props;\r\n this.setState({ search: '', showOptions: false });\r\n var valObj = {\r\n target: {\r\n tagName: \"SEARCHABLE-SELECT\",\r\n },\r\n value: option.Key,\r\n text: option.Value\r\n\r\n };\r\n onChange(valObj);\r\n };\r\n\r\n handleBlur = () => {\r\n const { search } = this.state;\r\n const { options } = this.props;\r\n const filteredOptions = search === \"\" ? options : options.filter(option =>\r\n option.Value.toLowerCase().includes(search.toLowerCase())\r\n ).slice(0, 10);\r\n\r\n const match = filteredOptions.some(option => option.Value.toLowerCase() === search.toLowerCase());\r\n\r\n if (!match && !this.state.showOptions) {\r\n this.setState({ search: '' });\r\n }\r\n };\r\n\r\n render() {\r\n const { label, options, selected, placeholder, requiredField, model, maxLength, onBlurAction, disabled } = this.props;\r\n const { search, showOptions } = this.state;\r\n\r\n const filteredOptions = search === \"\"? options : options.filter(option =>\r\n option.Value.toLowerCase().includes(search.toLowerCase())\r\n ).slice(0, 10);\r\n\r\n return (\r\n \r\n
\r\n {label}
\r\n \r\n \r\n this.setState({ showOptions: true })}\r\n onBlur={this.handleBlur}\r\n model={model}\r\n maxLength={maxLength}\r\n disabled={disabled}\r\n />\r\n {showOptions && (\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n","import React, {Component} from \"react\";\r\nimport { TabberButton } from \"../custom-form/tabber-button.component\";\r\nimport Icons from \"../../icon\";\r\nimport { InventoryConfirmation } from \"../../external/inventory/modal/inventory-confirmation.component\";\r\nimport { ACTION_TYPES, MAX_LENGTH, TYPE_FUNCTION } from \"../../../constants/external-constants\";\r\nimport { CustomSearchableSelectKeyValue } from \"../custom-form/input-filter-component\";\r\nimport Translation from '../../common/translation/translation.component';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { ConfirmationNotificationModal } from \"../modal/confirmation-modal.component\";\r\nimport { CONFIRMATION_VALUE } from \"../../../utils/constant.utils\";\r\nimport { ORFCheckbox } from \"../forms/order-request-form.component\";\r\n\r\nclass TableWithButton extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.ShowUpdateBtn = this.ShowUpdateBtn.bind(this)\r\n this.state = {\r\n showUpdateBtn: false,\r\n deleteIndex: 0,\r\n editMode: false,\r\n dataItem: this.props.datatable,\r\n selectedGlCode: null,\r\n selectedCostCenter: null,\r\n percent: null,\r\n editModeIndex: null,\r\n headerCount: 0,\r\n showDltModal: false,\r\n fileChange: false, \r\n value: false, \r\n isUpdateData:false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.calculateHeaderCount(); \r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.datatable !== this.props.datatable) {\r\n this.calculateHeaderCount(); \r\n }\r\n if (prevProps.enableEdit !== this.props.enableEdit) {\r\n if(!this.props.enableEdit) {\r\n this.HideUpdateBtn(); \r\n this.disableEditMode(); \r\n }\r\n }\r\n }\r\n\r\n calculateHeaderCount = () => {\r\n let count = 0;\r\n this.props.datatable.forEach(item => {\r\n item.HeaderItem.forEach(header => {\r\n const columns = Object.values(header).sort((a, b) => (a.order - b.order));\r\n const visibleColumns = columns.filter(row => row.hidden === false);\r\n count += visibleColumns.length;\r\n });\r\n });\r\n if (this.props.haveToggle) {\r\n count += 3;\r\n }\r\n this.setState({count: count});\r\n }\r\n\r\n ShowUpdateBtn(index) {\r\n this.setState({ \r\n showUpdateBtn: true,\r\n fileChange: false\r\n })\r\n this.enableEditMode();\r\n }\r\n HideUpdateBtn() {\r\n this.setState({ showUpdateBtn: false })\r\n if (typeof this.props.handelEnableEdit === TYPE_FUNCTION) {\r\n this.props.handelEnableEdit(false,null) \r\n }\r\n this.disableEditMode()\r\n }\r\n\r\n enableEditMode = () => {\r\n this.setState((prevState) => ({\r\n editMode: true\r\n }));\r\n };\r\n\r\n disableEditMode = () => {\r\n this.setState((prevState) => ({ \r\n editMode: false\r\n }));\r\n }\r\n\r\n enableUpdate() {\r\n if (typeof this.props.enableUpdate === TYPE_FUNCTION) {\r\n this.props.enableUpdate(true)\r\n }\r\n if (typeof this.props.toggleDropdown === TYPE_FUNCTION) {\r\n this.props.toggleDropdown()\r\n }\r\n if (typeof this.props.showDetails === TYPE_FUNCTION) {\r\n this.props.showDetails(false);\r\n }\r\n }\r\n\r\n renderTableDataValue(props, item, c) {\r\n return item[this.getProp(props.datatable[0].HeaderItem[0], c.name)];\r\n }\r\n\r\n getProp(columns, name) {\r\n return Object.entries(columns)\r\n .filter((x) => {\r\n return x[1].name === name;\r\n })\r\n .map((x) => x[0])[0];\r\n }\r\n\r\n checkBoxValue = (isChecked, index) =>{\r\n if (typeof this.props.getCheckboxValue === TYPE_FUNCTION) {\r\n this.props.getCheckboxValue(isChecked, index)\r\n }\r\n } \r\n\r\n renderTableData = (item, itemKey) => {\r\n const { haveCheckBox, enableCheckBox, defaultCheckBoxValue, defaultSelected } = this.props\r\n const headerItem = this.props.datatable[0].HeaderItem[0];\r\n // const headerLength = Object.values(headerItem).filter(value => !value.hidden).length - 1;\r\n var checkBoxValue = this.checkCheckBoxValue(itemKey, defaultCheckBoxValue, defaultSelected);\r\n let listIndex = 0;\r\n\r\n return Object.values(headerItem).map((value, index) => {\r\n if (!value.hidden) {\r\n const result = (\r\n {label}
\r\n - \r\n {filteredOptions.map(option => (\r\n
\r\n {(listIndex === 0 && haveCheckBox) && \r\n this.checkBoxValue(isChecked, itemKey)}\r\n initialValue={checkBoxValue}\r\n disable={!enableCheckBox}\r\n classWrapper=\"custom-checkbox-wrapper\"/> }\r\n {this.renderTableDataValue(this.props, item, value)}\r\n
\r\n \r\n );\r\n listIndex++; // Increment the visible index only if the column is not hidden\r\n return result;\r\n }\r\n });\r\n };\r\n\r\n checkCheckBoxValue = (itemKey, defaultCheckBoxValue, defaultSelected) => {\r\n if (defaultSelected == null || defaultSelected == undefined) {\r\n if (defaultCheckBoxValue !== undefined) {\r\n return defaultCheckBoxValue;\r\n } else {\r\n return true;\r\n }\r\n } else {\r\n if ((defaultSelected.includes(itemKey))) {\r\n return true;\r\n } else {\r\n if (defaultCheckBoxValue !== undefined) {\r\n return defaultCheckBoxValue;\r\n } else {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n handleTableChange = (index, value, e) => {\r\n const newDataTable = this.props.datatable.map((item, itemIndex) => {\r\n if (itemIndex === index) {\r\n return {\r\n ...item,\r\n [value]:e.target.value\r\n };\r\n }\r\n })\r\n this.setState({dataTable: newDataTable})\r\n }\r\n\r\n rowClick(index) {\r\n this.props.rowClickAction(index);\r\n }\r\n\r\n\r\n handleInputValue(value, e){\r\n this.setState({fileChange:true})\r\n this.props.handleInputChange(value, e) \r\n }\r\n\r\n callHandleGetFieldData = (index) => {\r\n if (this.props.datatable && this.props.datatable.length > 0) {\r\n const { dataItem, HeaderItem } = this.props.datatable[0];\r\n \r\n if (dataItem && dataItem.length > index) {\r\n const data = dataItem[index];\r\n const header = HeaderItem[0];\r\n \r\n for (let propName in header) {\r\n let value = header[propName];\r\n \r\n if (!value.hidden && \r\n (this.props.searchableDropdownData.includes(value.propName) ||\r\n this.props.inputField.includes(value.propName))) {\r\n \r\n const dataValue = data[value.propName];\r\n \r\n if (typeof this.props.handleGetFieldData === 'function') {\r\n this.props.handleGetFieldData(value.propName, dataValue);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n\r\n //create a function here that will render a modal\r\n handleBtnClick = (action, index) => {\r\n if (action === 'update') {\r\n this.callHandleGetFieldData(index);\r\n this.setState({\r\n editModeIndex: index,\r\n isUpdateData: false\r\n }, () => {\r\n this.disableEditMode();\r\n this.handleTableUpdate(action, index);\r\n });\r\n if (typeof this.props.clearSelectedValue === 'function') {\r\n this.props.clearSelectedValue()\r\n }\r\n } else {\r\n this.setState({\r\n showDltModal: true,\r\n deleteIndex: index\r\n });\r\n }\r\n };\r\n \r\n\r\n handleDeleteModal = (btnType, index) => {\r\n const {deleteAction, handleOpenNotif} = this.props;\r\n if (btnType === CONFIRMATION_VALUE.Ok){\r\n deleteAction(this.state.deleteIndex); \r\n }\r\n this.setState(prev => ({showDltModal: !prev})); \r\n }\r\n\r\n handleUpdateData =(index)=>{\r\n this.setState({ isUpdateData: true });\r\n const {updateAction, handleOpenNotif} = this.props; \r\n updateAction(index) \r\n }\r\n\r\n handleTableUpdate = (btnType, index) =>{ \r\n if (typeof this.props.handelEnableEdit === TYPE_FUNCTION) { \r\n this.props.handelEnableEdit(true,this.state.editModeIndex) \r\n } \r\n this.ShowUpdateBtn(index)\r\n this.setState(prev => ({showConfirmModal: !prev}));\r\n }\r\n\r\n\r\n renderEditTableData = (item, index) => {\r\n return Object.values(this.props.datatable[0].HeaderItem[0]).map((value, itemKey) => {\r\n if (!value.hidden) {\r\n if(this.props.searchableDropdownData.includes(value.propName))\r\n {\r\n var dataValue = \"\" \r\n dataValue = this.props.selectedItems?.[value.propName] || item[value.propName]\r\n return (\r\n \r\n this.handleDeleteModal(btnType, this.state.deleteIndex)}\r\n customClass={'comment-notification-modal modal-text-bold'}\r\n />\r\n \r\n \r\n
\r\n {/* Delete */} \r\n {this.props.haveExternalDeleteBtn &&\r\n <> \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default TableWithButton","import React, { createRef, Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, Control } from 'react-redux-form';\r\nimport { Row, Col, OverlayTrigger, Popover } from 'react-bootstrap';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation, EQUIPMENT_TYPE as EquipmentType, CIRCUIT_TYPES as CircuitTypes } from '../../../../../../utils/constant.utils';\r\nimport {\r\n OR_RRF_Select as Select\r\n , ORFButton as Button\r\n , ORFSelect\r\n , ORFField\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { newMobileSubscriptionActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/new-mobile-subscription.reducer\";\r\nimport { CheckBox } from '../../../../../common/custom-form/checkbox.component';\r\nimport TableWithButton from '../../../../../common/details-table/table-with-button.component';\r\nimport { ControlCheckBox } from '../../../../../common/custom-form/checkbox.component';\r\nimport CustomSearchableSelectWrapper from '../../../../../common/custom-form/custom-searchable-select-wrapper.component';\r\nimport { MAX_LENGTH } from '../../../../../../constants/external-constants';\r\nimport { addZeroes } from '../../../../../../../../src/app/store/external/request-reducer/order-request.functions';\r\n\r\nclass WirelessSubscriptionFormA extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n serviceTypeExist: false,\r\n serviceTypeExistOnprogress: false,\r\n isDevice:false\r\n }\r\n }\r\n\r\n componentDidMount() { \r\n this.props.onSubscriptionFormLoad();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { wirelessSubscriptionFormA } = this.props;\r\n const { \r\n employeeEquipmentProductNames\r\n , employeeEquipmentOnprogressProductNames } = this.props.newMobileRequest;\r\n \r\n if (wirelessSubscriptionFormA.mobileServiceModel !== prevProps.wirelessSubscriptionFormA.mobileServiceModel) {\r\n const productNamesFilter = employeeEquipmentProductNames.filter(name=>name)\r\n const productNames = productNamesFilter.includes(\r\n wirelessSubscriptionFormA.mobileServiceModel.length > 0 &&\r\n wirelessSubscriptionFormA.mobileServiceModel[0].EquipmentProductName\r\n );\r\n\r\n this.setState({ serviceTypeExist: productNames });\r\n \r\n const onProgressProductNameFilter=employeeEquipmentOnprogressProductNames.filter(name=>name)\r\n const onProgressProductNames = onProgressProductNameFilter.includes(\r\n wirelessSubscriptionFormA.mobileServiceModel.length &&\r\n wirelessSubscriptionFormA.mobileServiceModel[0].EquipmentProductName\r\n );\r\n\r\n this.setState({ serviceTypeExistOnprogress: onProgressProductNames });\r\n \r\n const device = (wirelessSubscriptionFormA.mobileServiceModel.length > 0 ?\r\n wirelessSubscriptionFormA.mobileServiceModel[0].EquipmentTypeId === EquipmentType.Device : false\r\n );\r\n\r\n this.setState({ isDevice: device });\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n renderPopover = (title, body) => {\r\n return (\r\n | {row.name} | \r\n })\r\n )\r\n })\r\n })}\r\n {this.props.haveToggle &&\r\n <>\r\nRead | \r\nWrite | \r\nExecute | \r\n \r\n }\r\n
|---|---|---|---|
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n }\r\n {\r\n (this.props.haveDeleteBtn || this.props.haveEditBtn) &&\r\n \r\n \r\n {/* ACTION BUTTONS */}\r\n \r\n {\r\n (this.state.showUpdateBtn && this.state.editModeIndex === itemKey)\r\n ||\r\n ((this.state.showUpdateBtn===false && this.props.enableEdit) && itemKey===this.props.keyIndex)\r\n ?\r\n \r\n \r\n :\r\n \r\n {this.props.haveDeleteBtn &&\r\n \r\n <> \r\n \r\n\r\n }\r\n\r\n | \r\n }\r\n
\r\n \r\n \r\n | \r\n
\r\n { this.props.datatable.map((item, index) => (\r\n item.dataItem.map((listItem, indexItem) =>\r\n
\r\n \r\n }\r\n \r\n \r\n this.handleBtnClick('delete',indexItem)}\r\n />\r\n
\r\n )\r\n )) } \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport default connect(\r\n state => {\r\n const { newMobileRequest, translation } = state;\r\n const { wirelessSubscriptionFormA } = state.form;\r\n return {\r\n newMobileRequest\r\n , wirelessSubscriptionFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newMobileSubscriptionActions),\r\n dispatch\r\n )\r\n)(WirelessSubscriptionFormA);\r\n","import React, { Component } from \"react\";\r\n\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport { Button } from \"react-bootstrap\";\r\nexport class NotificationModal extends Component {\r\n constructor(props) {\r\n super(props); \r\n this.state={\r\n show: false,\r\n closeButton: this.props.closeButton ?? true,\r\n }\r\n }\r\n\r\n handleAcceptConfirmation = () => {\r\n this.props.handleModal() \r\n }\r\n\r\n render(){\r\n return(\r\n <> \r\n \r\n {this.props.message}\r\n
\r\n \r\n {\r\n this.props.subMessage &&\r\n \r\n {this.props.subMessage}\r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n};\r\nexport default withRouter (connect(\r\n state => {\r\n const { newMobileRequest, translation, requestDetail, createRequest } = state;\r\n const { wirelessBusinessFormA } = state.form;\r\n const { wirelessSubscriptionFormA, wirelessLocationFormA } = state.form.forms;\r\n return {\r\n newMobileRequest\r\n , wirelessBusinessFormA\r\n , wirelessSubscriptionFormA\r\n , wirelessLocationFormA\r\n , createRequest\r\n , requestDetail\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newMobileSubscriptionActions, requestLogActions),\r\n dispatch\r\n )\r\n)(WirelessBusinessFormA));","import React,{Component} from \"react\";\r\nimport \"./milestone.css\";\r\nimport Translation from '../../common/translation/translation.component';\r\nimport Icons from \"../../icon\";\r\nimport { TYPE_FUNCTION } from \"../../../constants/external-constants\";\r\nexport class Milestone extends Component {\r\n render(){\r\n const {milestones,activeIndex,icon,milestonesLabel,containerClass}=this.props\r\n const handleMilestoneClick= (index)=>{\r\n if (typeof this.props.handleAction === TYPE_FUNCTION) {\r\n this.props.handleAction(index)\r\n } \r\n }\r\n\r\n return(\r\n \r\n {\r\n milestonesLabel &&\r\n
\r\n )\r\n }\r\n}","import React, {Component} from \"react\";\r\n\r\nexport class Loading extends Component {\r\n render(){\r\n return(\r\n \r\n {(milestones && this.props.milestones.length > 0) && milestones.map((milestone, index) => (\r\n
\r\n \r\n {\r\n icon ?\r\n {handleMilestoneClick(index)} \r\n : this.props.isReadAndWrite? (index <= activeIndex || index === activeIndex + 1 )? ()=>{handleMilestoneClick(index)} \r\n : undefined : \r\n undefined} \r\n />\r\n :\r\n
\r\n ))}\r\n \r\n {index + 1}\r\n
\r\n \r\n }\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport WirelessLocationFormA from './wireless-location-form.component';\r\nimport WirelessSubscriptionFormA from './wireless-subscription-form.component';\r\nimport WirelessBusinessFormA from './wireless-business-form.component';\r\nimport { newMobileSubscriptionActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/new-mobile-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport Icons from '../../../../../icon';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport { Milestone } from '../../../../../common/milestone/milestone.component';\r\nimport { Loading } from '../../../../../common/loading';\r\nimport { requestDetailsActions } from \"./../../../../../../store/external/request-reducer/request-details.reducer\";\r\n\r\nclass NewMobileSubscription extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false,\r\n activeIndex: 0,\r\n isLoading:true,\r\n milestones: [\r\n \"location\",\r\n \"subscription\",\r\n \"business_justification\"\r\n ]\r\n\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.props.disableAutoScroll(true);\r\n }\r\n\r\n componentWillMount() {\r\n this.props.getNewMobileFormData().then(() => {\r\n this.setState({ isLoading: false });\r\n }); \r\n }\r\n\r\n componentWillUnmount() {\r\n const { updateOrderRequest } = this.props;\r\n updateOrderRequest(false);\r\n this.props.resetNewMobileForm();\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n this.props.disableAutoScroll(false);\r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: false,\r\n isBusinessForm: true,\r\n activeIndex: 2 \r\n }); \r\n }\r\n else if (isLocationForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false,\r\n activeIndex: 1\r\n });\r\n this.props.getNewMobileFormData()\r\n disableROBCheckbox(true);\r\n }\r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isBusinessForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false,\r\n activeIndex: 1\r\n });\r\n }\r\n else if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false,\r\n activeIndex: 0\r\n });\r\n if(this.props.wirelessLocationFormA.locationId !== -1){\r\n this.props.disableAutoScroll(true);\r\n } else{\r\n this.props.disableAutoScroll(false);\r\n } \r\n disableROBCheckbox(false);\r\n }\r\n\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose !== null && modalClose !== undefined) {\r\n modalClose();\r\n }\r\n }\r\n\r\n displayForm = () => {\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { modalMessage,closeAction } = this.props;\r\n let form;\r\n\r\n if (isLocationForm) {\r\n form = \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.label}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { createRequest, translation } = state;\r\n const { wirelessLocationFormA } = state.form;\r\n return {\r\n createRequest\r\n , wirelessLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newMobileSubscriptionActions\r\n , createRequestActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(NewMobileSubscription);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, Control } from 'react-redux-form';\r\nimport { Row, Col, OverlayTrigger, Popover } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { wirelessChangePricePlanActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-price-plan.reducer\";\r\n\r\nclass MobileChangePricePlanForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentWillUnmount() {\r\n const { resetWirelessChangePricePlanForm\r\n , resetWirelessChangePricePlanModel, resetRequestData } = this.props;\r\n\r\n resetWirelessChangePricePlanForm();\r\n resetWirelessChangePricePlanModel();\r\n resetRequestData();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems } = this.props;\r\n \r\n var success = await submitRequest();\r\n\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n } else {\r\n var submitRequesResult = {...success, Message: this.toLocaleLanguage(\"modal_error_content\")};\r\n success = submitRequesResult;\r\n }\r\n\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n \r\n const { modalClose } = this.props;\r\n\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n\r\n renderPopover = (title, body) => {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelessChangePricePlanRequest, createRequest, translation } = state;\r\n const { wirelessChangePricePlanFormA } = state.form;\r\n return {\r\n wirelessChangePricePlanRequest\r\n , wirelessChangePricePlanFormA\r\n , createRequest\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessChangePricePlanActions, createRequestActions, requestLogActions),\r\n dispatch\r\n )\r\n)(MobileChangePricePlanForm);\r\n","import React, { Component, PureComponent } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from '../../../../common/translation/translation.component';\r\nimport { CIRCUIT_STATUS, PROPERTY_NAME as propName } from '../../../../../constants/external-constants';\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n ORFSelect, ORFButton\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelessChangUserActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-user.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport './wireless-change-user.component.css';\r\nimport store from '../../../../../store';\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { Loading } from '../../../../common/loading/index';\r\nimport { MAX_LENGTH } from \"../../../../../constants/external-constants\";\r\n\r\nclass MobileChangeUserForm extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n businessCaseText: \"\",\r\n isSaving: false,\r\n showConModal: false,\r\n title: \"\",\r\n isLoading: true,\r\n error: false\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, fetchSubscriptionByRequestDetail, onLoadUpdateChangeUserRequest, setLoadForm, onSubscriptionSelect, fetchEmployeeByValue, fetchSubscriptionByValue } = this.props;\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = null;\r\n\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n \r\n subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n if(takeActionCircuitId === undefined)\r\n {\r\n subscriptionList = await fetchSubscriptionByValue(null, circuitCodePropName);\r\n }\r\n }\r\n\r\n this.props.getListOfPurpose();\r\n this.props.getBusinessCase();\r\n\r\n if (isUpdateRequest) {\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode; \r\n var circuitCodePropName = 'CircuitCode';\r\n setLoadForm(true);\r\n await fetchEmployeeByValue(requestDetail.requestData.NewRequest.User.LastFirstName, propName.Name)\r\n subscriptionList = await fetchSubscriptionByValue(currentCircuitCode, circuitCodePropName);\r\n await onLoadUpdateChangeUserRequest(subscriptionList, circuitCodePropName);\r\n setLoadForm(false);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessChangeUserForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n submitRequest = () => {\r\n this.setState({showConModal:true})\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState( prev => ({\r\n isSaving:true,\r\n }))\r\n var success = await submitRequest();\r\n let resultMessage = success.Message;\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title:\"Success\"\r\n });\r\n const { isUpdateRequest } = this.props.createRequest;\r\n resultMessage = isUpdateRequest ? this.toLocaleLanguage(\"order_has_been_updated\") : this.toLocaleLanguage(\"order_has_been_submitted\");\r\n this.props.hideRequestModal();\r\n }else {\r\n this.setState({\r\n title:\"Error\"\r\n });\r\n resultMessage = success.Message ? success.Message : this.toLocaleLanguage(\"order_save_error_message\");\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show:true,\r\n isSaving:false,\r\n message: resultMessage,\r\n }));\r\n } else {\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false });\r\n if (this.state.title !== \"Error\") {\r\n this.props.history.goBack();\r\n }\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n businessCaseOnChange = (model, value) => {\r\n const { businessCaseOptions } = this.props.wirelessChangeUserRequest;\r\n const businessCaseText = businessCaseOptions.find((r) => r.Key == value)?.Value;\r\n const businessCaseId = businessCaseOptions.find((r) => r.Key == value)?.Key;\r\n this.setState({ businessCaseText: businessCaseText });\r\n\r\n const isOtherOption = businessCaseText === \"Other\";\r\n\r\n if (businessCaseText) {\r\n store.dispatch(actions.change(\"wirelessChangeUserFormA.busJustiCodeDetailId\", businessCaseId));\r\n\r\n const businessJustificationInput = document.getElementById(\"wirelessChangeUserFormA.businessJustification\"); \r\n if (businessJustificationInput) {\r\n businessJustificationInput.disabled = isOtherOption;\r\n }\r\n\r\n if (!isOtherOption) {\r\n store.dispatch(actions.change(\"wirelessChangeUserFormA.businessJustification\", businessCaseText));\r\n } else {\r\n store.dispatch(actions.change(\"wirelessChangeUserFormA.businessJustification\", \"\"));\r\n }\r\n } else {\r\n store.dispatch(actions.change(\"wirelessChangeUserFormA.businessJustification\", \"\"));\r\n }\r\n };\r\n\r\n render() {\r\n const { subscriptionList, employeeList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { changeUserRequestOptions, isFormLoading, isResetLoading } = this.props.wirelessChangeUserRequest;\r\n const { requestData } = this.props.requestDetail;\r\n const { wirelessChangeUserFormA, onSubscriptionSelect\r\n , onEmployeeSelect\r\n , fetchSubscriptionByValue\r\n , fetchEmployeeByValue } = this.props;\r\n const { formSubmitted, purposeOptions, businessCaseOptions, newUser, subscription } = this.props.wirelessChangeUserRequest;\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n\r\n const initialRequired = wirelessChangeUserFormA.circuitId == 0\r\n || wirelessChangeUserFormA.employeeId == 0\r\n || wirelessChangeUserFormA.purposeOfUseId == 0\r\n || wirelessChangeUserFormA.busJustiCodeDetailId == 0\r\n || wirelessChangeUserFormA.businessJustification == ''\r\n || formSubmitted;\r\n const updateRequired = isUpdateRequest && !(requestData.Circuit.CircuitCode != wirelessChangeUserFormA.circuitCode\r\n || requestData.BusinessJustification.PurposeOfUseId != wirelessChangeUserFormA.purposeOfUseId\r\n || requestData.NewRequest.User.LastFirstName != wirelessChangeUserFormA.employeeEmail\r\n || requestData.BusinessJustification.BusJustiCodeDetailId != wirelessChangeUserFormA.busJustiCodeDetailId\r\n || requestData.BusinessJustification.BusinessJustification != wirelessChangeUserFormA.businessJustification\r\n || requestData.BusinessJustification.AdditionalInformation != wirelessChangeUserFormA.additionalInformation);\r\n\r\n return isFormLoading ?\r\n (\r\n
) : (\r\n \r\n
\r\n )\r\n }\r\n};\r\n\r\nexport default withRouter (connect(\r\n state => {\r\n const { createRequest, wirelessChangeUserRequest, translation, requestDetail } = state;\r\n const { wirelessChangeUserFormA } = state.form;\r\n return {\r\n wirelessChangeUserFormA\r\n , createRequest\r\n , wirelessChangeUserRequest\r\n , ...translation\r\n , requestDetail\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}\r\n , wirelessChangUserActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(MobileChangeUserForm));","import React, {Component} from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport Icons from \"../../../../../icon\";\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport { ORFButton } from \"../../../../../common/forms/order-request-form.component\";\r\nimport { Col, Form, Row } from \"react-bootstrap\";\r\nimport { wirelessChangeVendorActions } from \"../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-vendor.reducer\";\r\nimport { createRequestActions } from \"../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { SUBMIT_REQUEST, MODAL_TITLE, SUBMIT_REQUEST_TITLE, BUSINESS_CASE } from \"../../../../../../constants/external-constants\";\r\nimport {\r\n OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n , ORFSearchSuggestions as SearchSuggestions,\r\n ORFCheckbox\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { NotificationModal } from \"../../../../../common/modal/notification-modal.component\";\r\nimport { Milestone } from \"../../../../../common/milestone/milestone.component\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ConfirmationNotificationModal } from \"../../../../../common/modal/confirmation-modal.component\";\r\nimport { MAX_LENGTH } from '../../../../../../constants/external-constants';\r\nimport store from '../../../../../../store';\r\nimport { actions } from 'react-redux-form';\r\nclass ChangeVendorBusinessFormA extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n show:false,\r\n message:\"\",\r\n isSaving:false, \r\n showConModal:false,\r\n title: \"\",\r\n \r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { isUpdateRequest } = this.props.createRequest;\r\n const { requestDetail, wirelessChangeVendorFormA } = this.props; \r\n const { businessCaseOptions } = this.props.wirelessChangeVendorRequest;\r\n if (isUpdateRequest && requestDetail.requestData.BusinessJustification.BusJustiCodeDetailId != 0 && businessCaseOptions.findIndex(r => r.Key == requestDetail.requestData.BusinessJustification.BusJustiCodeDetailId && r.Value.toLowerCase() == 'other') > -1) {\r\n this.setState({ disableBusinessJustification: false })\r\n } \r\n if (wirelessChangeVendorFormA.busJustiCodeDetailId == 0 || businessCaseOptions.findIndex(r => r.Key == wirelessChangeVendorFormA.busJustiCodeDetailId && r.Value.toLowerCase() != 'other') > -1) {\r\n this.setState({ disableBusinessJustification: true })\r\n } \r\n } \r\n submitRequest = (event) => {\r\n event.preventDefault();\r\n this.setState({showConModal:true})\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n \r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState( prev => ({\r\n isSaving:true,\r\n }))\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title:\"Success\"\r\n })\r\n this.props.hideRequestModal(); \r\n }else {\r\n this.setState({\r\n title:\"Error\"\r\n })\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show:true, \r\n isSaving:true,\r\n message:success.Message\r\n })); \r\n }else{\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false }); \r\n if(this.state.title!==\"Error\")\r\n { \r\n this.props.history.goBack();\r\n } \r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n onChangeBusinessCase(model, value) {\r\n const { businessCaseOptions } = this.props.wirelessChangeVendorRequest;\r\n\r\n var disableBusinessJustification = businessCaseOptions.findIndex(r => r.Key == value && r.Value.toLowerCase() != 'other') > -1;\r\n var businessCaseSelected = businessCaseOptions.find(r => r.Key == value);\r\n var businessJustificationValue = disableBusinessJustification == true ? businessCaseSelected?.Value : \"\";\r\n\r\n store.dispatch(actions.change(model, value));\r\n store.dispatch(actions.change(\"wirelessChangeVendorFormA.businessJustification\", businessJustificationValue));\r\n this.setState({\r\n disableBusinessJustification: disableBusinessJustification\r\n });\r\n }\r\n\r\n render(){\r\n\r\n const {\r\n //form\r\n wirelessChangeVendorFormA\r\n //reducer action\r\n , setRequestorAddress\r\n , onSubscriptionSelect\r\n , fetchSubscriptionByValue\r\n , onVendorSelect\r\n , onPlanSelect\r\n , onOtherPlanSelect\r\n , onOrderSelect\r\n , onServiceTypeSelect\r\n , onAccessorySelect\r\n , onCountrySelect\r\n , onAddressSelect\r\n , onPurposeOfUseSelect\r\n , onBusinessCaseSelect\r\n } = this.props;\r\n const {\r\n requestData\r\n } = this.props.requestDetail;\r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { preferredVendorOptions\r\n , userLocation\r\n , accountOptions\r\n , planOptions\r\n , otherPlanOptions\r\n , simOptions\r\n , orderOptions\r\n , deviceOptions\r\n , countryOptions\r\n , addressOptions\r\n , businessCaseOptions\r\n , purposeOfUseOptions\r\n , planDetails\r\n , vendorDetails\r\n , serviceTypeDetail\r\n , showDeviceOptions\r\n , deviceAccessories\r\n , showPreferredAddress\r\n , formSubmitted\r\n , subscription } = this.props.wirelessChangeVendorRequest;\r\n\r\n const initialRequired = wirelessChangeVendorFormA.circuitId == 0\r\n || wirelessChangeVendorFormA.newVendorId == 0\r\n || wirelessChangeVendorFormA.equipmentCatalogId == 0\r\n //|| wirelessChangeVendorFormA.orderOptionId == 0\r\n //|| wirelessChangeVendorFormA.newAccountId == 0\r\n || wirelessChangeVendorFormA.newPlanId == 0\r\n || wirelessChangeVendorFormA.planDetailsModel.length == 0\r\n //|| wirelessChangeVendorFormA.newSimTypeId == 0\r\n || wirelessChangeVendorFormA.businessJustification == ''\r\n || wirelessChangeVendorFormA.countryCode == ''\r\n || wirelessChangeVendorFormA.locationId == ''\r\n || wirelessChangeVendorFormA.busJustiCodeDetailId == 0\r\n || wirelessChangeVendorFormA.businessJustification == ''\r\n || wirelessChangeVendorFormA.purposeOfUseDetailId == 0\r\n || formSubmitted;\r\n\r\n const updateRequired = !((requestData.OtherLocationName != '' ? requestData.OtherLocationName != wirelessChangeVendorFormA.otherDeliveryAddress : wirelessChangeVendorFormA.otherDeliveryAddress != null)\r\n || requestData.BillingAddress.LocationId != wirelessChangeVendorFormA.locationId\r\n || requestData.BillingAddress.CountryCode != wirelessChangeVendorFormA.countryCode\r\n || requestData.NewRequest.PlanDetails.PlanId != wirelessChangeVendorFormA.newPlanId\r\n || requestData.Subscription.PhoneCaseAccessory != wirelessChangeVendorFormA.isPhoneAccessory\r\n || requestData.Subscription.EquipmentInventoryId != wirelessChangeVendorFormA.equipmentCatalogId\r\n || requestData.NewRequest.CircuitTypeId != wirelessChangeVendorFormA.circuitTypeId\r\n || requestData.NewRequest.Vendor.VendorDetailId != wirelessChangeVendorFormA.newVendorId\r\n || requestData.BusinessJustification.PurposeOfUseId != wirelessChangeVendorFormA.purposeOfUseDetailId\r\n || requestData.BusinessJustification.BusJustiCodeDetailId != wirelessChangeVendorFormA.busJustiCodeDetailId\r\n || requestData.BusinessJustification.BusinessJustification != wirelessChangeVendorFormA.businessJustification\r\n || requestData.BusinessJustification.AdditionalInformation != wirelessChangeVendorFormA.additionalInformation);\r\n \r\n // if (showDeviceOptions) {\r\n // disable = disable || wirelessChangeVendorFormA.equipmentCatalogId == 0;\r\n // }\r\n\r\n // if (showPreferredAddress) {\r\n // disable = disable || wirelessChangeVendorFormA.otherDeliveryAddress == '';\r\n // }\r\n\r\n const accessoryCost = wirelessChangeVendorFormA.accessoryDetailsModel.length > 0 ?\r\n wirelessChangeVendorFormA.accessoryDetailsModel.reduce((accum, item) => accum + item.OrderCost, 0) : 0;\r\n\r\n\r\n return(\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter ( connect(\r\n state => {\r\n const { wirelessChangeVendorRequest, createRequest, requestDetail, translation } = state;\r\n const { wirelessChangeVendorFormA } = state.form;\r\n return {\r\n wirelessChangeVendorRequest\r\n , wirelessChangeVendorFormA\r\n , createRequest\r\n , requestDetail\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessChangeVendorActions, createRequestActions, requestLogActions),\r\n dispatch\r\n )\r\n)(ChangeVendorBusinessFormA));","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, Control } from 'react-redux-form';\r\nimport { Row, Col, OverlayTrigger, Popover, Button } from 'react-bootstrap';\r\nimport Translation from \"../../../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport Icons from \"../../../../../icon\";\r\nimport {\r\n ORFButton\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n , ORFSearchSuggestions as SearchSuggestions,\r\n ORFCheckbox\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { wirelessChangeVendorActions } from \"../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-change-vendor.reducer\";\r\nimport { createRequestActions } from \"../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport ChangeVendorBusinessFormA from './wireless-change-vendor-business-form.component';\r\nimport { CheckBox } from '../../../../../common/custom-form/checkbox.component';\r\nimport TableWithButton from '../../../../../common/details-table/table-with-button.component';\r\nimport { Milestone } from '../../../../../common/milestone/milestone.component';\r\nimport { Loading } from '../../../../../common/loading';\r\nimport CustomSearchableSelectWrapper from \"../../../../../common/custom-form/custom-searchable-select-wrapper.component\";\r\nimport { MAX_LENGTH, CIRCUIT_STATUS } from \"../../../../../../constants/external-constants\";\r\nimport { ControlCheckBox } from '../../../../../common/custom-form/checkbox.component';\r\n\r\nclass MobileChangeVendorForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n isSubscriptionForm:true,\r\n isBusinessForm:false,\r\n isDevice: true,\r\n error: false,\r\n isLoading: true, \r\n activeIndex:0,\r\n milestones:[\r\n \"subscription\",\r\n \"business_justification\"\r\n ],\r\n isToggle: true\r\n }\r\n this.SearchSuggestions = React.createRef();\r\n this.PhoneAccessoryCheckbox = React.createRef();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessChangeVendorForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n async componentDidMount(){\r\n const { updateDataList, isUpdateRequest, subscriptionList, isRequestOnBehalf } = this.props.createRequest;\r\n const { onUpdateAutoPopulate, fetchSubscriptionByValue, onSubscriptionSelect, onROBSubscripitionAutoSelect, wirelessChangeVendorFormA, requestDetail } = this.props\r\n\r\n this.props.resetWirelessChangeVendorForm();\r\n this.props.getChangeVendorFormData();\r\n\r\n if (isUpdateRequest) {\r\n const selectedItem = requestDetail.requestData.Order;\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n if(selectedItem?.IsRequestedInBehalf){ \r\n this.SearchSuggestions.current.onChange(null, { newValue: currentCircuitCode })\r\n await onROBSubscripitionAutoSelect(currentCircuitCode, selectedItem.EndUserId)\r\n await onUpdateAutoPopulate(updateDataList, selectedItem?.IsRequestedInBehalf);\r\n }\r\n else {\r\n await fetchSubscriptionByValue(currentCircuitCode).then(() => {\r\n this.setState({ isLoading: false });\r\n });\r\n if(this.state.isLoading == false)\r\n {\r\n await onSubscriptionSelect(currentCircuitCode, \"CircuitCode\", subscriptionList)\r\n await onUpdateAutoPopulate(updateDataList);\r\n this.SearchSuggestions.current.onChange(null, { newValue: currentCircuitCode })\r\n }\r\n }\r\n }\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n \r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isSubscriptionForm:false,\r\n isBusinessForm:true,\r\n activeIndex: 1 \r\n }); \r\n\r\n disableROBCheckbox(true);\r\n } \r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isBusinessForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n \r\n if (isBusinessForm) {\r\n this.setState({\r\n isSubscriptionForm: true, \r\n isBusinessForm: false,\r\n activeIndex: 0\r\n });\r\n\r\n disableROBCheckbox(false);\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n renderPopover = (title, body) => {\r\n return (\r\n \r\n {\r\n (this.state.milestones && this.state.milestones.length > 0) &&\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n } \r\n {this.state.isSubscriptionForm ?\r\n <> \r\n \r\n \r\n :\r\n this.displayForm() \r\n }\r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelessChangeVendorRequest, createRequest, translation, requestDetail } = state;\r\n const { wirelessChangeVendorFormA } = state.form;\r\n return {\r\n wirelessChangeVendorRequest\r\n , wirelessChangeVendorFormA\r\n , createRequest\r\n , requestDetail\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessChangeVendorActions, createRequestActions, requestLogActions),\r\n dispatch\r\n )\r\n)(MobileChangeVendorForm);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\"\r\nimport { TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n , ORFButton\r\n , ORFSearchSuggestions as SearchSuggestions\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { wirelessReplaceSimActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-replace-sim.reducer\";\r\n\r\n\r\nclass MobileReplaceSimForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.onReplaceSimFormLoad();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessReplaceSimForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems } = this.props;\r\n\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //form\r\n wirelessReplaceSimFormA\r\n //reducer action\r\n , setRequestorAddress\r\n , onSubscriptionSelect\r\n , fetchSubscriptionByValue\r\n , onCountrySelect\r\n , onAddressSelect\r\n } = this.props;\r\n const { subscriptionList, takeActionCircuitCode } = this.props.createRequest;\r\n const { subscription, simOptions, countryOptions, addressOptions, formSubmitted } = this.props.wirelessReplaceSimRequest;\r\n\r\n let showPreferredAddress = wirelessReplaceSimFormA.deliveryAddressId === \"0\";\r\n\r\n let disable = wirelessReplaceSimFormA.circuitId == 0\r\n || wirelessReplaceSimFormA.simTypeId == 0\r\n || wirelessReplaceSimFormA.circuitId == 0\r\n || wirelessReplaceSimFormA.deliveryAddressId == ''\r\n || formSubmitted;\r\n\r\n if (showPreferredAddress) {\r\n disable = disable || wirelessReplaceSimFormA.otherLocationAddress == '';\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelessReplaceSimRequest, createRequest, translation } = state;\r\n const { wirelessReplaceSimFormA } = state.form;\r\n return {\r\n wirelessReplaceSimRequest\r\n , wirelessReplaceSimFormA\r\n , createRequest\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessReplaceSimActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(MobileReplaceSimForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, Control } from 'react-redux-form';\r\nimport { Row, Col, OverlayTrigger, Popover } from 'react-bootstrap';\r\nimport {\r\n ORFButton as Button\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { ControlCheckBox } from '../../../../common/custom-form/checkbox.component';\r\nimport { wirelessReplaceDeviceActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-replace-device.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation, CIRCUIT_TYPES as CircuitTypes } from '../../../../../utils/constant.utils';\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { CIRCUIT_STATUS } from '../../../../../constants/external-constants';\r\nimport { MAX_LENGTH } from './../../../../../constants/external-constants';\r\nimport CustomSearchableSelectWrapper from '../../../../common/custom-form/custom-searchable-select-wrapper.component';\r\nimport { SUBMIT_REQUEST_TITLE } from '../../../../../constants/external-constants';\r\n\r\nclass ReplaceDeviceForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n show:false,\r\n message:\"\",\r\n showConModal:false,\r\n title:\"\",\r\n error: false,\r\n isSaving: false\r\n }\r\n this.SearchSuggestions = React.createRef();\r\n }\r\n \r\n async componentDidMount() {\r\n \r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, fetchSubscriptionByRequestDetail, updateSubscriptionDetails, setLoadForm, onSubscriptionSelect, fetchSubscriptionByValue } = this.props;\r\n this.props.resetWirelessReplaceDeviceForm();\r\n this.props.getReplaceDeviceFormData();\r\n this.props.onCountrySelect(\"wirelessLocationFormA.countryCode\", this.props.wirelessReplaceDeviceFormA?.countryCode);\r\n\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n\r\n if (isUpdateRequest) {\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n var circuitCodePropName = 'CircuitCode';\r\n\r\n setLoadForm(true); \r\n var subscriptionList = await fetchSubscriptionByRequestDetail(currentCircuitCode, circuitCodePropName);\r\n await updateSubscriptionDetails(subscriptionList, circuitCodePropName);\r\n this.SearchSuggestions.current.onChange(null, { newValue: requestDetail.requestData.Circuit.CircuitCode })\r\n setLoadForm(false);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessReplaceDeviceForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n submitRequest = () => { \r\n this.setState({showConModal:true})\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n \r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems, createRequest } = this.props;\r\n const isUpdateRequest = createRequest ? createRequest.isUpdateRequest : false;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\",\r\n isSaving: false\r\n })\r\n this.props.hideRequestModal(); \r\n }else {\r\n this.setState({\r\n title: \"Error\",\r\n isSaving: false\r\n })\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show:true,\r\n message: success.ok != false ? (isUpdateRequest && success.Success)? this.toLocaleLanguage(\"order_has_been_updated\") : success.Message : 'Incorrect Data'\r\n }))\r\n }else{\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false });\r\n if (this.state.title !== \"Error\") {\r\n this.props.history.goBack();\r\n }\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n renderPopover = (title, body) => {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter (connect(\r\n state => {\r\n const { createRequest, wirelessReplaceDeviceRequest, requestDetail, setLoadForm, translation } = state;\r\n const { wirelessReplaceDeviceFormA } = state.form;\r\n return {\r\n wirelessReplaceDeviceFormA\r\n , createRequest\r\n , wirelessReplaceDeviceRequest\r\n , requestDetail\r\n , setLoadForm\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessReplaceDeviceActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(ReplaceDeviceForm));","import React, { Component } from \"react\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport { connect } from \"react-redux\";\r\nimport Icon from \"../../icon\";\r\nimport moment from \"moment\";\r\nclass DATEPICKER_OR extends Component {\r\n render() {\r\n const { label, subLabel, startDate, selectedDate, isDisable, dateFormat, placeholder, requiredField, minDate, maxDate, isRequired, customClass, dateOnly } = this.props;\r\n const { activeDateFormat } = this.props.adminSetting;\r\n\r\n var disableClass = isDisable ? \"disabled\" : \"\"; \r\n \r\n const CustomInput = React.forwardRef(({ value, onClick, onChange }, ref) => {\r\n let dateValue = (dateFormat === \"MMMM yyyy\" && value) ? new Date(value).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) : value;\r\n return (\r\n \r\n ) \r\n });\r\n\r\n const onChange = (date) => {\r\n if (moment(date, activeDateFormat.CSFormat, true).isValid()) {\r\n let dt = dateOnly && date ? new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`) : date;\r\n selectedDate(dt);\r\n } else {\r\n // Handle invalid date input, e.g., show an error message\r\n console.error(\"Invalid date\");\r\n selectedDate(null);\r\n }\r\n };\r\n\r\n\r\n const handleInput = (e)=>{\r\n const inputValue = e.target.value;\r\n if (inputValue === \"\") {\r\n selectedDate(null); // If input is empty, clear the date\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { adminSetting } = state;\r\n\r\n return {\r\n adminSetting\r\n };\r\n }\r\n)(DATEPICKER_OR)","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\"\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton, ORFDatePicker\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelessTerminateActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-terminate-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport DATEPICKER_OR from '../../../../common/custom-form/custom-date-picker.component';\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { MAX_LENGTH, CIRCUIT_STATUS } from \"../../../../../constants/external-constants\"\r\nimport { Loading } from '../../../../common/loading/index';\r\nimport { convertUtcToLocalDate } from '../../../../../utils/helpers.utils';\r\nimport {SUBMIT_REQUEST_TITLE} from \"../../../../../constants/external-constants\"\r\n\r\nclass MobileTerminateSubscriptionForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n terminateDate: '',\r\n circuitCode: '',\r\n showConModal: false,\r\n isLoading: false,\r\n title: \"\",\r\n error: false,\r\n isSaving: false\r\n }\r\n }\r\n\r\n async componentWillMount() {\r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestData } = this.props.requestDetail;\r\n const { fetchSubscriptionByCostCode, fetchSubscriptionByValue, onSubscriptionSelect } = this.props;\r\n\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n\r\n if (isUpdateRequest) {\r\n this.setState({ isLoading: true })\r\n let propName = 'CircuitCode';\r\n let requestOnBehalf = requestData.RequestedInBeHalfOf ? requestData.RequestedInBeHalfOf : null;\r\n await fetchSubscriptionByCostCode(requestData.Circuit.CircuitCode, propName, requestOnBehalf)\r\n this.props.setRequestSelectedData();\r\n this.setState({ isLoading: false })\r\n }\r\n \r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessTerminateForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n setTerminateDate = (dt) => {\r\n if(dt !== ''){\r\n this.setState({\r\n terminateDate: dt\r\n });\r\n }\r\n }\r\n\r\n submitRequest = async () => {\r\n this.setState({showConModal:true})\r\n }\r\n\r\n isSameParam = () => { \r\n const { circuitCode, businessJustification, additionalInformation, terminateDate } = this.props.wirelessTerminateFormA;\r\n const { requestData } = this.props.requestDetail;\r\n let isTermenateDt = (requestData.Order.OrderDisconnectDate ? new Date(convertUtcToLocalDate(requestData.Order.OrderDisconnectDate)) : '').toDateString() === (!terminateDate == false ? terminateDate.toDateString() : '');\r\n \r\n return (requestData.Circuit.CircuitCode === circuitCode\r\n && requestData.BusinessJustification.BusinessJustification === businessJustification\r\n && requestData.BusinessJustification.AdditionalInformation === additionalInformation\r\n && isTermenateDt)\r\n }\r\n validateData = () => {\r\n const { wirelessTerminateFormA } = this.props;\r\n const { formSubmitted } = this.props.wirelessTerminateRequest;\r\n const { requestOnBehalfData, isRequestOnBehalf, isUpdateRequest } = this.props.createRequest;\r\n \r\n if (!wirelessTerminateFormA.circuitId || !wirelessTerminateFormA.terminateDate || !wirelessTerminateFormA.businessJustification || formSubmitted) {\r\n return true;\r\n }\r\n\r\n if (isRequestOnBehalf) {\r\n if (requestOnBehalfData && requestOnBehalfData.EmployeeId > 0 && wirelessTerminateFormA.circuitCode !== '') {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n } else {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n \r\n return false;\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n handleCloseNotif = () => {\r\n const { closeAction } = this.props;\r\n this.setState({ show: false }); \r\n if(this.state.title!==\"Error\")\r\n {\r\n closeAction();\r\n } \r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n let resultMessage = success.Message;\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\",\r\n isSaving: false\r\n })\r\n\r\n const { isUpdateRequest } = this.props.createRequest;\r\n resultMessage = isUpdateRequest ? this.toLocaleLanguage(\"order_has_been_updated\") : this.toLocaleLanguage(\"order_has_been_submitted\");\r\n this.props.hideRequestModal();\r\n }else {\r\n this.setState({\r\n title: \"Error\",\r\n isSaving: false\r\n })\r\n resultMessage = success.Message ? success.Message : this.toLocaleLanguage(\"order_save_error_message\");\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show:true, \r\n message:success.Message,\r\n }))\r\n }else{\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n\r\n render() {\r\n const { terminateDate, isLoading } = this.state;\r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { wirelessTerminateFormA, onSubscriptionSelect, fetchSubscriptionByValue } = this.props;\r\n const { subscription, isResetLoading } = this.props.wirelessTerminateRequest;\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n\r\n return isLoading ?\r\n (\r\n
\r\n \r\n
\r\n\r\n {label}
\r\n {subLabel}
\r\n \r\n
) : (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { createRequest, wirelessTerminateRequest, translation, requestDetail } = state;\r\n const { wirelessTerminateFormA } = state.form;\r\n return {\r\n wirelessTerminateFormA\r\n , createRequest\r\n , wirelessTerminateRequest\r\n , ...translation\r\n , requestDetail\r\n };\r\n }\r\n , dispatch => ({\r\n ...bindActionCreators(\r\n Object.assign({}, wirelessTerminateActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n ),\r\n FormChange: (Model, value) => {\r\n dispatch(actions.change(Model, value))\r\n }\r\n })\r\n)(MobileTerminateSubscriptionForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\"\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelessPortOutActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-portout.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport DATEPICKER_OR from '../../../../common/custom-form/custom-date-picker.component';\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Loading } from '../../../../common/loading/index';\r\nimport { CIRCUIT_STATUS, SUBMIT_REQUEST_TITLE } from '../../../../../constants/external-constants';\r\nimport { convertUtcToLocalDate } from '../../../../../utils/helpers.utils';\r\n\r\nclass MobilePortOutForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showConModal: false,\r\n isSaving: false,\r\n show: false,\r\n error: false,\r\n title:\"\"\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessPortOutForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n async componentDidMount() { \r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, fetchSubscriptionByRequestDetail, onLoadUpdatePortOut, setLoadForm, fetchSubscriptionByValue, onSubscriptionSelect } = this.props;\r\n\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n\r\n if (isUpdateRequest) {\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n var circuitCodePropName = 'CircuitCode';\r\n setLoadForm(true);\r\n var subscriptionList = await fetchSubscriptionByRequestDetail(currentCircuitCode, circuitCodePropName);\r\n onLoadUpdatePortOut(subscriptionList, circuitCodePropName);\r\n setLoadForm(false);\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n submitRequest = () => { \r\n this.setState({showConModal:true})\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n let resultMessage = success.Message;\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\"\r\n });\r\n\r\n const { isUpdateRequest } = this.props.createRequest;\r\n resultMessage = isUpdateRequest ? this.toLocaleLanguage(\"order_has_been_updated\") : this.toLocaleLanguage(\"order_has_been_submitted\");\r\n this.props.hideRequestModal();\r\n }else {\r\n this.setState({\r\n title: \"Error\"\r\n });\r\n resultMessage = success.Message ? success.Message : this.toLocaleLanguage(\"order_save_error_message\");\r\n }\r\n \r\n this.setState( prev => ({ \r\n showConModal: !prev.showConModal,\r\n show: true,\r\n isSaving: false,\r\n message: resultMessage,\r\n }))\r\n \r\n }else{\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false }); \r\n \r\n if(this.state.title!==\"Error\")\r\n {\r\n this.props.history.goBack();\r\n } \r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n isSameParam = () => { \r\n const { circuitCode, businessJustification, additionalInformation, terminateDate } = this.props.wirelessPortOutFormA;\r\n const { requestData } = this.props.requestDetail;\r\n let isPortOutDt = (requestData.Order.OrderDisconnectDate ? new Date(convertUtcToLocalDate(requestData.Order.OrderDisconnectDate)) : '').toDateString() === (!terminateDate == false ? terminateDate.toDateString() : '');\r\n let additionalInfo = requestData.BusinessJustification.AdditionalInformation !== null && requestData.BusinessJustification.AdditionalInformation !== '' ? requestData.BusinessJustification.AdditionalInformation : '';\r\n \r\n return (requestData.Circuit.CircuitCode === circuitCode\r\n && requestData.BusinessJustification.BusinessJustification === businessJustification\r\n && additionalInfo === additionalInformation\r\n && isPortOutDt)\r\n }\r\n validateData = () => {\r\n const { wirelessPortOutFormA } = this.props;\r\n const { formSubmitted } = this.props.wirelessPortOutRequest;\r\n const { requestOnBehalfData, isRequestOnBehalf, isUpdateRequest } = this.props.createRequest;\r\n \r\n if (!wirelessPortOutFormA.circuitId || !wirelessPortOutFormA.terminateDate || !wirelessPortOutFormA.businessJustification || formSubmitted) {\r\n return true;\r\n }\r\n\r\n if (isRequestOnBehalf) {\r\n if (requestOnBehalfData && requestOnBehalfData.EmployeeId > 0 && wirelessPortOutFormA.circuitCode !== '') {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n } else {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n \r\n return false;\r\n }\r\n\r\n render() {\r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { wirelessPortOutFormA, onSubscriptionSelect, fetchSubscriptionByValue, requestDetail } = this.props;\r\n const { formSubmitted, subscription, isFormLoading, isResetLoading } = this.props.wirelessPortOutRequest;\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n\r\n const initialRequired = wirelessPortOutFormA.circuitId == 0\r\n || wirelessPortOutFormA.terminateDate == 0\r\n || wirelessPortOutFormA.businessJustification == ''\r\n || formSubmitted\r\n\r\n if (isUpdateRequest) { \r\n var oldDate = new Date(convertUtcToLocalDate(requestDetail.requestData.Order.OrderDisconnectDate)).toDateString();\r\n var newDate = (!wirelessPortOutFormA.terminateDate == false ? wirelessPortOutFormA.terminateDate.toDateString() : '');\r\n var isTerminateDt = !(oldDate === newDate ? true : false);\r\n\r\n var updateRequired = isUpdateRequest && !(requestDetail.requestData.Circuit.CircuitCode != wirelessPortOutFormA.circuitCode\r\n || isTerminateDt\r\n || requestDetail.requestData.BusinessJustification.BusinessJustification != wirelessPortOutFormA.businessJustification\r\n || requestDetail.requestData.BusinessJustification.AdditionalInformation != wirelessPortOutFormA.additionalInformation);\r\n }\r\n\r\n return isFormLoading ?\r\n (\r\n
) : (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter(connect(\r\n state => {\r\n const { createRequest, wirelessPortOutRequest, translation, requestDetail } = state;\r\n const { wirelessPortOutFormA } = state.form;\r\n return {\r\n wirelessPortOutFormA\r\n , createRequest\r\n , wirelessPortOutRequest\r\n , ...translation\r\n , requestDetail\r\n };\r\n }\r\n , dispatch => ({\r\n ...bindActionCreators(\r\n Object.assign({}, wirelessPortOutActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n ),\r\n FormChange: (model, value) => {\r\n dispatch(actions.change(model, value))\r\n }\r\n })\r\n)(MobilePortOutForm));","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport { ORFButton\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelessOtherActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-other.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { CIRCUIT_STATUS, SUBMIT_REQUEST, SUBMIT_REQUEST_TITLE } from '../../../../../constants/external-constants';\r\nimport { Loading } from '../../../../common/loading/index';\r\nimport { MAX_LENGTH, REQUEST_TYPES_ID, REQUEST_TYPES_LABEL } from \"../../../../../constants/external-constants\";\r\n\r\nclass MobileOtherForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { \r\n showConModal:false\r\n ,title: \"\"\r\n ,error: false\r\n ,isSaving: false\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessOtherForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n async componentDidMount() {\r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, fetchSubscriptionByRequestDetail, onLoadUpdateOtherRequest, setLoadForm, onSubscriptionSelect, fetchSubscriptionByValue } = this.props;\r\n\r\n if (takeActionCircuitId) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n \r\n if (isUpdateRequest) {\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n\r\n var circuitCodePropName = 'CircuitCode';\r\n setLoadForm(true);\r\n var subscriptionList = await fetchSubscriptionByRequestDetail(currentCircuitCode, circuitCodePropName);\r\n onLoadUpdateOtherRequest(subscriptionList, circuitCodePropName);\r\n setLoadForm(false);\r\n }\r\n }\r\n\r\n submitRequest = () => { \r\n this.setState({showConModal:true})\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n let resultMessage = success.Message;\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\",\r\n isSaving: false\r\n });\r\n const { isUpdateRequest } = this.props.createRequest;\r\n resultMessage = isUpdateRequest ? this.toLocaleLanguage(\"order_has_been_updated\") : this.toLocaleLanguage(\"order_has_been_submitted\");\r\n this.props.hideRequestModal();\r\n } else {\r\n this.setState({\r\n title: \"Error\",\r\n isSaving: false\r\n });\r\n resultMessage = success.Message ? success.Message : this.toLocaleLanguage(\"order_save_error_message\");\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show:true, \r\n message: resultMessage,\r\n }))\r\n \r\n } else {\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false }); \r\n \r\n if(this.state.title!==\"Error\")\r\n {\r\n this.props.history.goBack();\r\n } \r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n isSameParam = () => {\r\n const { circuitCode, otherRequestTypeId, otherRequestDetails } = this.props.wirelessOtherFormA;\r\n const { requestData } = this.props.requestDetail;\r\n const { wirelessOtherFormA } = this.props;\r\n const otherRequestTypeIdInt = parseInt(otherRequestTypeId, 10);\r\n\r\n return (otherRequestTypeIdInt == REQUEST_TYPES_ID.other\r\n ? wirelessOtherFormA.otherRequestDetails == '' || requestData.Order.RequestDetails === otherRequestDetails\r\n && requestData.Circuit.CircuitCode === circuitCode && requestData.Order.RequestType.RequestTypeID === otherRequestTypeIdInt\r\n : requestData.Order.RequestType.RequestTypeID === otherRequestTypeIdInt\r\n && requestData.Circuit.CircuitCode === circuitCode\r\n && requestData.Order.RequestDetails === otherRequestDetails)\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error:value\r\n })\r\n }\r\n\r\n validateData = () => {\r\n const { wirelessOtherFormA } = this.props;\r\n const { formSubmitted } = this.props.wirelessOtherFormA;\r\n const { requestOnBehalfData, isRequestOnBehalf, isUpdateRequest } = this.props.createRequest;\r\n const { otherRequestOptions } = this.props.wirelessOtherRequest;\r\n\r\n if (otherRequestOptions.find(x => x.Key == wirelessOtherFormA.otherRequestTypeId && x.Value == REQUEST_TYPES_LABEL.OTHER) !== undefined ?\r\n wirelessOtherFormA.otherRequestDetails == '' : !wirelessOtherFormA.circuitId || !wirelessOtherFormA.otherRequestTypeId || !wirelessOtherFormA.otherRequestDetails || formSubmitted) {\r\n if (wirelessOtherFormA.otherRequestTypeId === '') {\r\n return true;\r\n }\r\n else {\r\n if (wirelessOtherFormA.otherRequestTypeId === REQUEST_TYPES_ID.other.toString()) {\r\n if (this.state.error) {\r\n return true; \r\n }\r\n else {\r\n if (wirelessOtherFormA.otherRequestDetails == '') {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (isRequestOnBehalf) {\r\n if (requestOnBehalfData && requestOnBehalfData.EmployeeId > 0 && wirelessOtherFormA.circuitCode !== '') {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n } else {\r\n if (isUpdateRequest) {\r\n return this.isSameParam();\r\n }\r\n }\r\n\r\n if (wirelessOtherFormA.otherRequestTypeId !== REQUEST_TYPES_ID.other.toString()) {\r\n if (wirelessOtherFormA.circuitId && wirelessOtherFormA.otherRequestDetails) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n } else {\r\n if (this.state.error) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n }\r\n render() {\r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { wirelessOtherFormA, onSubscriptionSelect, fetchSubscriptionByValue } = this.props;\r\n const { otherRequestOptions, subscription, isFormLoading, isResetLoading } = this.props.wirelessOtherRequest;\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n\r\n return isFormLoading ?\r\n (\r\n
) : (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter (connect(\r\n state => {\r\n const { createRequest, wirelessOtherRequest, translation, requestDetail } = state;\r\n const { wirelessOtherFormA } = state.form;\r\n return {\r\n wirelessOtherFormA\r\n , createRequest\r\n , wirelessOtherRequest\r\n , ...translation\r\n , requestDetail\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessOtherActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(MobileOtherForm));","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport {\r\n OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n , ORFButton as Button\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { wirelessPortInActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-port-in.reducer\";\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport CustomSearchableSelectWrapper from \"../../../../../common/custom-form/custom-searchable-select-wrapper.component\";\r\nimport { MAX_LENGTH } from \"../../../../../../constants/external-constants\";\r\nimport { createRequestActions } from \"../../../../../../store/external/request-reducer/create-request.reducer\";\r\n\r\nclass PortInLocationFormA extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n if(this.props.wirelessPortInLocationFormA.locationId !== -1)\r\n {\r\n this.props.disableAutoScroll(true);\r\n } else {\r\n this.props.disableAutoScroll(false);\r\n } \r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n handleNextAction = () =>{\r\n this.props.disableAutoScroll(false);\r\n this.props.nextAction();\r\n }\r\n handleChange = (field, value) =>{\r\n if(value !== -1){\r\n this.props.disableAutoScroll(true);\r\n } else{\r\n this.props.disableAutoScroll(false);\r\n } \r\n this.props.onAddressSelect(field, value);\r\n }\r\n render() {\r\n const {\r\n //component props\r\n nextAction, onClickCancel\r\n // form\r\n , wirelessPortInLocationFormA\r\n // reducer action\r\n , setRequestorAddress\r\n , onCountrySelect\r\n , onAddressSelect\r\n } = this.props;\r\n\r\n const { countryOptions, addressOptions } = this.props.wirelessPortInRequest;\r\n const { isRequestOnBehalf, requestOnBehalfData } = this.props.createRequest;\r\n let isROB = isRequestOnBehalf && (requestOnBehalfData.EmployeeId === '' || requestOnBehalfData.EmployeeId === 0) \r\n let showPreferredAddress = wirelessPortInLocationFormA.locationId.toString() === \"-1\";\r\n\r\n let disable = wirelessPortInLocationFormA.countryCode == ''\r\n || wirelessPortInLocationFormA.locationId === '' || isROB;\r\n \r\n if (showPreferredAddress) {\r\n disable = disable || wirelessPortInLocationFormA.otherDeliveryAddress == '';\r\n }\r\n\r\n return (\r\n \r\n \r\n onCountrySelect('wirelessPortInLocationFormA.countryCode', e)}\r\n optionLabelKey={{\r\n Key: 'Key',\r\n Value: 'Value'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n \r\n this.handleChange('wirelessPortInLocationFormA.locationId', e)} \r\n optionLabelKey={{\r\n Key: 'Key',\r\n Value: 'Value'\r\n }}\r\n maxLength={MAX_LENGTH.limit_500} \r\n />\r\n {\r\n wirelessPortInLocationFormA.deliveryAddress !== '' && !disable &&\r\n
\r\n {showPreferredAddress &&\r\n \r\n
\r\n }\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelessPortInRequest, translation, createRequest } = state;\r\n const { wirelessPortInLocationFormA } = state.form;\r\n return {\r\n wirelessPortInRequest\r\n , wirelessPortInLocationFormA\r\n , ...translation\r\n , createRequest\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessPortInActions, createRequestActions),\r\n dispatch\r\n )\r\n)(PortInLocationFormA);","\r\nimport React, { Component, forwardRef } from \"react\";\r\nimport './custom-form.component.css'\r\nimport { Control, Errors, actions } from 'react-redux-form';\r\nimport { Form, Button, FloatingLabel, DropdownButton } from 'react-bootstrap';\r\nimport DatePicker from \"react-datepicker\";\r\nimport { capitalizeFirstLetter } from '../../../utils/helpers.utils'\r\nimport { INVALID_CHARS, INPUT_FIELD_TYPE, DATA_TYPE } from \"../../../constants/external-constants\"\r\nimport store from \"../../../store\";\r\n\r\nexport class SelectField extends Component {\r\n\r\n render() {\r\n const { label, options, onChange, selected, customClass, placeholder, requiredField } = this.props;\r\n\r\n return (\r\n \r\n Use Requestor Address\r\n
\r\n \r\n {wirelessPortInLocationFormA.deliveryAddress}\r\n
\r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nexport class SelectFieldEquipment extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n //field validation\r\n , validators, errorMessages, valid, className, customClass } = this.props;\r\n return (\r\n {label}
\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n
\r\n\r\n );\r\n }\r\n\r\n}\r\n\r\nexport class SelectFieldKeyValue extends Component {\r\n\r\n render() {\r\n const { label, options, onChange, selected } = this.props;\r\n\r\n return (\r\n {label}
\r\n \r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nexport class SelectFieldBillingAccount extends Component {\r\n\r\n render() {\r\n const { label, options, onChange, selected } = this.props;\r\n\r\n return (\r\n {label}
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nexport class SelectFieldFloatingLabel_BillingAccount extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n , validators, errorMessages, valid, className } = this.props;\r\n return (\r\n {label}
\r\n \r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class SelectFieldFloatingLabel_UserHRID extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n , validators, errorMessages, valid, className } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class SelectFieldFloatingLabel_Ranking extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n , validators, errorMessages, valid, className } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class SelectFieldFloatingLabel extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n const { className, optionLabelKey } = this.props;\r\n var targetOption = { Key: 0, Value: this.props.placeholder };\r\n if (className && className.includes(\"required\")) {\r\n targetOption = [...data];\r\n } else {\r\n targetOption = [targetOption, ...data];\r\n }\r\n if (optionLabelKey) {\r\n return targetOption.map((x,index) => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n else {\r\n return targetOption.map((x,index) => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n //field validation\r\n , validators, errorMessages, valid, className, isError } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n //
\r\n );\r\n }\r\n}\r\n\r\nexport class SelectFieldFloatingLabel_LocationSite extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n selected: false\r\n };\r\n }\r\n\r\n displayOptions = data => {\r\n if (data !== undefined && data !== null && data.length > 0) {\r\n return data.map(x => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n };\r\n\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { options, value, fieldProp, placeholder, label, disabled, onChangeAction\r\n , validators, errorMessages, valid, className } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(options)}\r\n \r\n \r\n {\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class InputFieldFloatingLabel extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n localValue: '',\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n localValue: this.props.value\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.value !== this.props.value) {\r\n this.setState({\r\n localValue: this.props.value\r\n });\r\n }\r\n }\r\n\r\n handleChangeAction = (model, value) => {\r\n const { onChangeAction, inputType } = this.props;\r\n\r\n let newValue = value;\r\n\r\n if (inputType == DATA_TYPE.decimal) {\r\n newValue = newValue.replace(/[^0-9.]/g, '');\r\n if (newValue === '' || !isNaN(newValue)) {\r\n if (newValue.includes('.')) {\r\n if (newValue.length > 49) {\r\n newValue = newValue.slice(0, 50);\r\n }\r\n } else {\r\n if (newValue.length > 47) {\r\n newValue = newValue.slice(0, 47);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, newValue);\r\n }\r\n this.setState({ localValue: newValue });\r\n store.dispatch(actions.change(model, newValue));\r\n };\r\n\r\n handleOnBlur = () => {\r\n const { onBlurAction, value, fieldProp, inputType } = this.props;\r\n let newValue = value;\r\n\r\n if (inputType == DATA_TYPE.decimal) {\r\n if (newValue !== '' && /^\\d+$/.test(newValue)) {\r\n newValue += \".00\";\r\n }\r\n else if (newValue === '') {\r\n newValue = \"0.00\";\r\n }\r\n }\r\n\r\n if (onBlurAction !== undefined && onBlurAction !== null) {\r\n onBlurAction(fieldProp, newValue);\r\n }\r\n\r\n store.dispatch(actions.change(fieldProp, newValue));\r\n }\r\n\r\n checkValue = (e) => {\r\n const { type, inputType } = this.props\r\n var value = e.target.value;\r\n var number = value.split('.');\r\n var isValid = this.validateDecimal(value);\r\n if (inputType == DATA_TYPE.decimal) {\r\n if (isValid === 0 || isValid === 1) {\r\n if (this.isProperDecimal(value)) {\r\n if (number.length === 2 && e.key == '.') {\r\n e.preventDefault();\r\n }\r\n }\r\n else {\r\n e.preventDefault();\r\n }\r\n }\r\n else if (isValid == 2) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n if (INVALID_CHARS.includes(e.key) && type === INPUT_FIELD_TYPE.type) {\r\n e.preventDefault();\r\n }\r\n }\r\n validateDecimal = (value) => {\r\n var re = /^[0-9.]*$/\r\n if (value == null || value == \"\") {\r\n return 1;\r\n }\r\n else {\r\n return (re.test(value)) ? 0 : 2;\r\n }\r\n }\r\n isProperDecimal = (value) => {\r\n var number = value.split('.');\r\n if (number.length === 1) {\r\n if (value.length < 49) {\r\n return true;\r\n }\r\n }\r\n else if (number.length === 2) {\r\n var wholeNum = number[0];\r\n var decimalNum = number[1];\r\n if (wholeNum.length < 43 && decimalNum.length < 7) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n render() {\r\n const { hidden, disabled, label, value, fieldProp, className, type, maxLength, placeholder, requiredField } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n {this.displayOptions(fieldProp, options)}\r\n \r\n \r\n {\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class InventoryDatePicker extends Component {\r\n render() {\r\n const { hidden, label, className, placeholder, id, value, disabled, minDate } = this.props;\r\n const DatePickerText = forwardRef(({ onClick, value, disabled }, ref) => (\r\n \r\n \r\n
\r\n ));\r\n return (\r\n \r\n \r\n this.props.validateMobileNumber(model, value, this.props.match.params.orderId)}\r\n fieldProp='wirelessPortInSubscriptionFormA.personalMobile'\r\n placeholder={\"Enter text here...\"}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n item.Value.includes('Preferred'))}\r\n placeholder=\"Select...\"\r\n fieldProp='wirelessPortInSubscriptionFormA.vendorDetailId'\r\n selected={wirelessPortInSubscriptionFormA.vendorDetailId}\r\n onChange={(val) => onVendorSelect(val)}\r\n requiredField\r\n optionLabelKey={{\r\n Key: 'Key',\r\n Value: 'Value'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n \r\n onCircuitTypeSelect(val)}\r\n requiredField\r\n optionLabelKey={{\r\n Key: 'Key',\r\n Value: 'Value'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n \r\n onServiceTypeSelect(\"wirelessPortInSubscriptionFormA.equipmentInventoryId\", val, orderId)}\r\n requiredField\r\n optionLabelKey={{\r\n Key: 'EquipmentInventoryId',\r\n Value: 'EquipmentModel'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n {\r\n wirelessPortInSubscriptionFormA.circuitTypeId == CircuitTypes.mobile_or_cellphone && wirelessPortInSubscriptionFormA.equipmentInventoryId != undefined && wirelessPortInSubscriptionFormA.equipmentInventoryId != 0 &&\r\n \r\n onPlanSelect(\"wirelessPortInSubscriptionFormA.planId\", val)}\r\n optionLabelKey={{\r\n Key: 'Key',\r\n Value: 'Value'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100} \r\n />\r\n \r\n
\r\n\r\n {wirelessPortInSubscriptionFormA.planId ?\r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport default withRouter(\r\n connect(\r\n state => {\r\n const { wirelessPortInRequest, translation } = state;\r\n const { wirelessPortInSubscriptionFormA, forms } = state.form;\r\n return {\r\n wirelessPortInRequest\r\n , wirelessPortInSubscriptionFormA\r\n , forms\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessPortInActions),\r\n dispatch\r\n )\r\n )(PortInSubscriptionFormA)\r\n);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport { PURPOSEOFUSEOPTIONS, SUBMIT_REQUEST_TITLE } from \"../../../../../../constants/external-constants\";\r\nimport {\r\n OR_RRF_TextArea as TextArea\r\n , ORFButton as Button\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { SelectFieldFloatingLabel } from '../../../../../../components/common/custom-form/select-filter.component';\r\nimport { wirelessPortInActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-port-in.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { CheckBox } from '../../../../../common/custom-form/checkbox.component';\r\nimport { NotificationModal } from '../../../../../common/modal/notification-modal.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ControlCheckBox } from '../../../../../common/custom-form/checkbox.component';\r\nimport store from '../../../../../../store';\r\nimport { ConfirmationNotificationModal } from '../../../../../common/modal/confirmation-modal.component';\r\nimport { MAX_LENGTH } from '../../../../../../constants/external-constants'; \r\nclass PortInBusinessFormA extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false,\r\n showConModal:false,\r\n isSaving:false,\r\n disableBusinessJustification: false\r\n };\r\n }\r\n\r\n submitRequest = async () => { \r\n this.setState({showConModal:true})\r\n }\r\n \r\n handleCloseNotif = () => {\r\n this.setState({ show: false });\r\n this.props.history.goBack();\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n if (buttonType === CONFIRMATION_VALUE.Ok) { \r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n const orderId = this.props.match.params.orderId;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest(orderId);\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.props.hideRequestModal();\r\n }\r\n \r\n this.setState({\r\n showConModal: false,\r\n show: true,\r\n isSaving: false,\r\n message: success.Message\r\n });\r\n }else{\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n toReduceOptions = (obj) => {\r\n return obj?.filter(obj => obj.Value !== PURPOSEOFUSEOPTIONS.directLine && obj.Value !== PURPOSEOFUSEOPTIONS.backupLine)\r\n }\r\n\r\n onChangeBusinessCase(model, value) {\r\n const { businessCaseOptions } = this.props.wirelessPortInRequest;\r\n\r\n var disableBusinessJustification = businessCaseOptions.findIndex(r => r.Key == value && r.Value.toLowerCase() != 'other') > -1;\r\n var businessCaseSelected = businessCaseOptions.find(r => r.Key == value);\r\n var businessJustificationValue = disableBusinessJustification == true ? businessCaseSelected?.Value : \"\";\r\n\r\n store.dispatch(actions.change(model, value));\r\n store.dispatch(actions.change(\"wirelessPortInBusinessFormA.businessJustification\", businessJustificationValue));\r\n this.setState({\r\n disableBusinessJustification: disableBusinessJustification\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n // component props\r\n prevAction\r\n , onClickCancel\r\n //form\r\n , wirelessPortInLocationFormA\r\n , wirelessPortInBusinessFormA\r\n , wirelessPortInSubscriptionFormA\r\n , createRequest\r\n } = this.props;\r\n const { purposeOfUseOptions, businessCaseOptions, formSubmitting } = this.props.wirelessPortInRequest;\r\n const { requestData } = this.props.requestDetail;\r\n const showAcceptRequestSubmit = !wirelessPortInSubscriptionFormA.equipmentInventoryId.valid;\r\n const initialRequired = wirelessPortInBusinessFormA.purposeOfUseId == 0\r\n || wirelessPortInBusinessFormA.businessJustification == ''\r\n || wirelessPortInBusinessFormA.busJustiCodeDetailId == 0\r\n || (showAcceptRequestSubmit && !wirelessPortInBusinessFormA.termAgreement)\r\n || formSubmitting;\r\n const updateRequired = !((requestData.OtherLocationName != '' ? requestData.OtherLocationName != wirelessPortInLocationFormA.otherDeliveryAddress.value : wirelessPortInLocationFormA.otherDeliveryAddress.value != null)\r\n || (wirelessPortInLocationFormA.locationId.value != -1 ? (requestData.Location.LocationId != wirelessPortInLocationFormA.locationId.value) : (requestData.OtherLocationID != wirelessPortInLocationFormA.otherDeliveryAddressId.value))\r\n || requestData.Location.CountryCode != wirelessPortInLocationFormA.countryCode.value\r\n || requestData.Subscription.PersonalMobile != wirelessPortInSubscriptionFormA.personalMobile.value\r\n || requestData.Subscription.CurrentVendor != wirelessPortInSubscriptionFormA.currentVendor.value\r\n || requestData.Subscription.AccountNumber != wirelessPortInSubscriptionFormA.accountNumber.value\r\n || requestData.Subscription.PortPinCode != wirelessPortInSubscriptionFormA.portPinCode.value\r\n || requestData.Subscription.CurrentBillingAddress != wirelessPortInSubscriptionFormA.currentBillingAddress.value\r\n || requestData.Subscription.EquipmentInventoryId != wirelessPortInSubscriptionFormA.equipmentInventoryId.value\r\n || requestData.Subscription.PlanId != wirelessPortInSubscriptionFormA.planId.value\r\n || requestData.Subscription.PhoneCaseAccessory != wirelessPortInSubscriptionFormA.phoneCaseAccessory.value\r\n || requestData.Subscription.EquipmentCatalogId != wirelessPortInSubscriptionFormA.equipmentCatalogId.value\r\n || requestData.Subscription.CircuitTypeId != wirelessPortInSubscriptionFormA.circuitTypeId.value\r\n || requestData.Subscription.VendorDetailId != wirelessPortInSubscriptionFormA.vendorDetailId.value\r\n || requestData.BusinessJustification.PurposeOfUseId != wirelessPortInBusinessFormA.purposeOfUseId\r\n || requestData.BusinessJustification.BusJustiCodeDetailId != wirelessPortInBusinessFormA.busJustiCodeDetailId\r\n || requestData.BusinessJustification.BusinessJustification != wirelessPortInBusinessFormA.businessJustification\r\n || requestData.BusinessJustification.AdditionalInformation != wirelessPortInBusinessFormA.additionalInformation);\r\n const disableBusinessJustificationTextbox = wirelessPortInBusinessFormA.busJustiCodeDetailId == 0 || businessCaseOptions.findIndex(r => r.Key == wirelessPortInBusinessFormA.busJustiCodeDetailId && r.Value.toLowerCase() != 'other') > -1;\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {vendorDetails.Currency}\r\n {totalOrderCostFormatted}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n this.onChangeBusinessCase(model, value)}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {\r\n showAcceptRequestSubmit\r\n &&
\r\n );\r\n }\r\n};\r\nexport default withRouter (connect(\r\n state => {\r\n const { wirelessPortInRequest, translation, requestDetail, createRequest } = state;\r\n const { wirelessPortInBusinessFormA } = state.form;\r\n const { wirelessPortInSubscriptionFormA, wirelessPortInLocationFormA } = state.form.forms;\r\n return {\r\n wirelessPortInRequest\r\n , wirelessPortInBusinessFormA\r\n , wirelessPortInSubscriptionFormA\r\n , wirelessPortInLocationFormA\r\n , createRequest\r\n , requestDetail\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessPortInActions, requestLogActions),\r\n dispatch\r\n )\r\n)(PortInBusinessFormA));","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport PortInLocationFormA from './port-in-location-form.component';\r\nimport PortInSubscriptionFormA from './port-in-subscription-form.component';\r\nimport PortInBusinessFormA from './port-in-business-form.component';\r\nimport { wirelessPortInActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-port-in.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport { Milestone } from '../../../../../common/milestone/milestone.component';\r\nimport { Loading } from '../../../../../common/loading/index';\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass PortInSubscription extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false,\r\n activeIndex:0,\r\n milestones: [\r\n \"location\",\r\n \"subscription\",\r\n \"business_justification\"\r\n ]\r\n }\r\n }\r\n\r\n componentWillMount() {\r\n const orderId = this.props.match.params.orderId;\r\n this.props.getNewPortInFormData(orderId);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessPortInForm();\r\n //this.props.resetRequestData();\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: false,\r\n isBusinessForm: true,\r\n activeIndex: 2 \r\n });\r\n }\r\n else if (isLocationForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false,\r\n activeIndex: 1\r\n });\r\n\r\n disableROBCheckbox(true);\r\n }\r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isBusinessForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false,\r\n activeIndex: 1\r\n });\r\n }\r\n else if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false,\r\n activeIndex: 0\r\n });\r\n\r\n if(this.props.wirelessPortInLocationFormA.locationId !== -1){\r\n this.props.disableAutoScroll(true);\r\n } else{\r\n this.props.disableAutoScroll(false);\r\n } \r\n \r\n disableROBCheckbox(false);\r\n }\r\n\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose !== null && modalClose !== undefined) {\r\n modalClose();\r\n }\r\n }\r\n\r\n displayForm = () => {\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { modalMessage, closeAction } = this.props;\r\n let form;\r\n\r\n if (isLocationForm) {\r\n form = \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {\r\n wirelessPortInRequest.isLoading ?\r\n <>\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter(\r\n connect(\r\n state => {\r\n const { createRequest, wirelessPortInRequest, translation } = state;\r\n const { wirelessPortInLocationFormA } = state.form;\r\n return {\r\n createRequest\r\n , wirelessPortInRequest\r\n , wirelessPortInLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelessPortInActions\r\n , createRequestActions),\r\n dispatch\r\n )\r\n )(PortInSubscription)\r\n);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, Control, actions } from 'react-redux-form';\r\nimport { Row, Col, Popover } from 'react-bootstrap';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {\r\n ORFButton\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelessAccessoryActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-accessory.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport TableWithButton from '../../../../common/details-table/table-with-button.component';\r\nimport { NotificationModal } from '../../../../common/modal/notification-modal.component';\r\nimport { ConfirmationNotificationModal } from '../../../../common/modal/confirmation-modal.component';\r\nimport { BUSINESS_CASE, MODAL_TITLE, ORDER_MSG, OPTION_LABEL, MAX_LENGTH, CIRCUIT_STATUS, SUBMIT_REQUEST_TITLE } from '../../../../../constants/external-constants';\r\nimport CustomSearchableSelectWrapper from '../../../../common/custom-form/custom-searchable-select-wrapper.component';\r\nimport { Loading } from '../../../../common/loading/index';\r\nimport { assignDefaultIfEmptyString } from './../../../../../utils/helpers.utils';\r\n\r\nclass AccessoryForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getAccessoryDetailsModel = this.getAccessoryDetailsModel.bind(this);\r\n this.fetchAddressOptions = this.fetchAddressOptions.bind(this);\r\n this.state = {\r\n showConModal: false,\r\n isSaving: false,\r\n title: \"\",\r\n checkboxValue: true,\r\n selectedEquipment: [],\r\n totalCost: 0,\r\n defaultCheckBoxValue: false,\r\n selectedCountry: \"\",\r\n selectedAddress: \"\",\r\n datatable: [\r\n {\r\n \"HeaderItem\": [],\r\n \"dataItem\": []\r\n }\r\n ],\r\n originalcircuitId: 0,\r\n originalcircuitCode: '',\r\n originalcountryCode: '',\r\n originalbillingLocationAddressId: 0,\r\n originalbusinessCaseId: 0,\r\n originalbusinessJustification: '',\r\n originaladditionalInformation: '',\r\n originalselectedEquipmentInventortyId: [],\r\n selectedEquipmentInventoryId: [],\r\n error: false,\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n const { isUpdateRequest, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, fetchSubscriptionByRequestDetail, onLoadUpdateAccessoryRequest, setLoadForm, fetchSubscriptionByValue, onSubscriptionSelect } = this.props;\r\n\r\n this.props.getAccessoryFormData();\r\n\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionList = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionList, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n\r\n if (isUpdateRequest) {\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n var circuitCodePropName = 'CircuitCode';\r\n setLoadForm(true);\r\n var subscriptionList = await fetchSubscriptionByRequestDetail(currentCircuitCode, circuitCodePropName);\r\n\r\n await onLoadUpdateAccessoryRequest(subscriptionList, circuitCodePropName);\r\n const { deviceAccessories } = this.props.wirelessAccessoryRequest;\r\n var tmpDataItem = deviceAccessories[0].dataItem.length ? deviceAccessories[0].dataItem : [];\r\n\r\n var tmpselectedEquipment = [];\r\n var tmpselectedEquipmentInventoryId = [];\r\n var tmptotalCost = 0;\r\n\r\n for (let i = 0; i < tmpDataItem.length; i++) {\r\n for (let k = 0; k < requestDetail.requestData.Subscription.Accessories.length; k++) {\r\n if (tmpDataItem[i].EquipmentInventoryId == requestDetail.requestData.Subscription.Accessories[k].EquipmentInventoryId) {\r\n tmpselectedEquipment.push(i);\r\n tmpselectedEquipmentInventoryId.push(tmpDataItem[i].EquipmentInventoryId);\r\n tmptotalCost = tmptotalCost + tmpDataItem[i].OrderCost;\r\n }\r\n }\r\n }\r\n\r\n var dataTable = {\r\n datatable: [\r\n {\r\n \"HeaderItem\": [...deviceAccessories[0].HeaderItem],\r\n \"dataItem\": [...tmpDataItem],\r\n }\r\n ],\r\n selectedEquipment: tmpDataItem.length === 1 ? [0] : tmpselectedEquipment,\r\n originalselectedEquipmentInventortyId: tmpDataItem.length === 1 ? [0] : tmpselectedEquipmentInventoryId,\r\n selectedEquipmentInventoryId: tmpDataItem.length === 1 ? [0] : tmpselectedEquipmentInventoryId,\r\n totalCost: tmpDataItem.length === 1 ? parseFloat(tmpDataItem[0].OrderCost) : tmptotalCost,\r\n defaultCheckBoxValue: tmpDataItem.length === 1\r\n }\r\n this.setState({ ...dataTable });\r\n\r\n setLoadForm(false);\r\n } \r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessAccessoryForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.state.originalcircuitId == 0 &&\r\n this.props.wirelessAccessoryForm.circuitId !== prevProps.wirelessAccessoryForm.circuitId) {\r\n this.setState({\r\n originalcircuitId: this.props.wirelessAccessoryForm.circuitId\r\n });\r\n\r\n }\r\n if (this.state.originalcircuitCode == '' &&\r\n this.props.wirelessAccessoryForm.circuitCode !== prevProps.wirelessAccessoryForm.circuitCode) {\r\n this.setState({\r\n originalcircuitCode: this.props.wirelessAccessoryForm.circuitCode\r\n });\r\n\r\n }\r\n if (this.state.originalcountryCode == '' &&\r\n this.props.wirelessAccessoryForm.countryCode !== prevProps.wirelessAccessoryForm.countryCode) {\r\n this.setState({\r\n originalcountryCode: this.props.wirelessAccessoryForm.countryCode\r\n });\r\n\r\n }\r\n if (this.state.originalbillingLocationAddressId == '' &&\r\n this.props.wirelessAccessoryForm.billingLocationAddressId !== prevProps.wirelessAccessoryForm.billingLocationAddressId) {\r\n this.setState({\r\n originalbillingLocationAddressId: this.props.wirelessAccessoryForm.billingLocationAddressId\r\n });\r\n\r\n }\r\n if (this.state.originalbusinessCaseId == '' &&\r\n this.props.wirelessAccessoryForm.businessCaseId !== prevProps.wirelessAccessoryForm.businessCaseId) {\r\n this.setState({\r\n originalbusinessCaseId: this.props.wirelessAccessoryForm.businessCaseId\r\n });\r\n\r\n }\r\n if (this.state.originalbusinessJustification == '' &&\r\n this.props.wirelessAccessoryForm.businessJustification !== prevProps.wirelessAccessoryForm.businessJustification) {\r\n this.setState({\r\n originalbusinessJustification: this.props.wirelessAccessoryForm.businessJustification\r\n });\r\n\r\n }\r\n if (this.state.originaladditionalInformation == '' &&\r\n this.props.wirelessAccessoryForm.additionalInformation !== prevProps.wirelessAccessoryForm.additionalInformation) {\r\n this.setState({\r\n originaladditionalInformation: this.props.wirelessAccessoryForm.additionalInformation\r\n });\r\n\r\n }\r\n }\r\n\r\n submitRequest = () => {\r\n this.setState({showConModal:true})\r\n }\r\n\r\n getAccessoryDetailsModel() {\r\n var accessoryDetailsModel = [];\r\n const dataItem = this.state.datatable[0].dataItem;\r\n this.state.selectedEquipment.map(i => accessoryDetailsModel.push(dataItem[i]));\r\n return accessoryDetailsModel;\r\n }\r\n\r\n handleConfirmationModal = async (buttonType) => {\r\n \r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems, setAccessoryDetailsModel } = this.props;\r\n\r\n setAccessoryDetailsModel(this.getAccessoryDetailsModel());\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n let resultMessage = success.Message;\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\"\r\n });\r\n this.props.hideRequestModal();\r\n const { isUpdateRequest } = this.props.createRequest;\r\n resultMessage = isUpdateRequest ? this.toLocaleLanguage(\"order_has_been_updated\") : this.toLocaleLanguage(\"order_has_been_submitted\");\r\n }else {\r\n this.setState({\r\n title: \"Error\"\r\n });\r\n resultMessage = success.Message ? success.Message : this.toLocaleLanguage(\"order_save_error_message\");\r\n }\r\n this.setState( prev => ({\r\n showConModal: !prev.showConModal,\r\n show: true,\r\n isSaving: false,\r\n message: resultMessage,\r\n })\r\n )\r\n } else {\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false }); \r\n if(this.state.title!==\"Error\")\r\n {\r\n this.props.history.goBack();\r\n } \r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n renderPopover = (title, body) => {\r\n return (\r\n \r\n {circuitStatusName} | \r\n {vendorName} | \r\n {planName} | \r\n {deviceName}\r\n
\r\n );\r\n };\r\n\r\n async handleChangeSubscription(value, propsName, objects, index) {\r\n await this.props.onSubscriptionSelect(value, propsName, objects, index);\r\n const { deviceAccessories } = this.props.wirelessAccessoryRequest;\r\n var tmpDataItem = deviceAccessories[0]?.dataItem?.length ? deviceAccessories[0].dataItem : [];\r\n var dataTable = {\r\n datatable: [\r\n {\r\n \"HeaderItem\": [...(deviceAccessories[0]?.HeaderItem ?? [])],\r\n \"dataItem\": [...tmpDataItem],\r\n }\r\n ],\r\n selectedEquipment: tmpDataItem.length === 1 ? [0] : [],\r\n totalCost: tmpDataItem.length === 1 ? parseFloat(tmpDataItem[0].OrderCost) : 0,\r\n defaultCheckBoxValue: tmpDataItem.length === 1\r\n }\r\n this.setState({ ...dataTable });\r\n }\r\n\r\n async fetchAddressOptions() {\r\n const { wirelessAccessoryForm, onCountrySelect } = this.props;\r\n const { selectedCountry, selectedAddress } = this.state;\r\n \r\n if (wirelessAccessoryForm.countryCode?.trim() !== \"\"\r\n && (wirelessAccessoryForm.countryCode !== selectedCountry || selectedAddress !== wirelessAccessoryForm.billingLocationAddressId)){\r\n await onCountrySelect(\"wirelessAccessoryForm.countryCode\", wirelessAccessoryForm.countryCode);\r\n this.setState({\r\n selectedCountry: wirelessAccessoryForm.countryCode,\r\n selectedAddress: wirelessAccessoryForm.billingLocationAddressId\r\n });\r\n return this.props.wirelessAccessoryRequest.addressOptions;\r\n }\r\n\r\n return [];\r\n }\r\n\r\n render() {\r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { wirelessAccessoryForm, setRequestorAddress, fetchSubscriptionByValue, onBusinessCaseSelect, onAddressSelect, requestDetail } = this.props;\r\n const { countryOptions, addressOptions, businessCaseOptions, formSubmitted, subscription, isFormLoading, isResetLoading } = this.props.wirelessAccessoryRequest;\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n let showPreferredAddress = wirelessAccessoryForm.billingLocationAddressId.toString() === \"-1\";\r\n let disable = wirelessAccessoryForm.countryCode == ''\r\n || wirelessAccessoryForm.billingLocationAddressId === '';\r\n\r\n if (showPreferredAddress) {\r\n disable = disable || wirelessAccessoryForm.otherLocationAddress === '';\r\n }\r\n\r\n const initialRequired = wirelessAccessoryForm.circuitId == 0\r\n || wirelessAccessoryForm.countryCode == ''\r\n || wirelessAccessoryForm.billingLocationAddressId == 0\r\n || wirelessAccessoryForm.deliveryAddress == ''\r\n || (wirelessAccessoryForm.billingLocationAddressId == -1 && wirelessAccessoryForm.otherLocationAddress == '' ? true : false)\r\n || wirelessAccessoryForm.businessCaseId == 0\r\n || wirelessAccessoryForm.businessJustification == ''\r\n || this.state.selectedEquipment.length === 0\r\n || formSubmitted\r\n\r\n if (isUpdateRequest) {\r\n\r\n const originalselectedEquipmentInventortyId = this.state.originalselectedEquipmentInventortyId.slice().sort();\r\n const selectedEquipmentInventoryId = this.state.selectedEquipmentInventoryId.slice().sort();\r\n\r\n const IsUpdatedSelectedEquipment = ((JSON.stringify(originalselectedEquipmentInventortyId) == JSON.stringify(selectedEquipmentInventoryId)) ? false : true)\r\n\r\n var updateRequired = isUpdateRequest && !(requestDetail.requestData.Circuit.CircuitCode != wirelessAccessoryForm.circuitCode\r\n || requestDetail.requestData.BillingAddress.CountryCode != wirelessAccessoryForm.countryCode\r\n || requestDetail.requestData.BillingAddress.LocationId != wirelessAccessoryForm.billingLocationAddressId\r\n || requestDetail.requestData.BillingAddress.OtherDeliveryAddress != assignDefaultIfEmptyString(wirelessAccessoryForm.otherLocationAddress, null)\r\n || requestDetail.requestData.BusinessJustification.BusJustiCodeDetailId != wirelessAccessoryForm.businessCaseId\r\n || requestDetail.requestData.BusinessJustification.BusinessJustification != wirelessAccessoryForm.businessJustification\r\n || requestDetail.requestData.BusinessJustification.AdditionalInformation != assignDefaultIfEmptyString(wirelessAccessoryForm.additionalInformation, null)\r\n || IsUpdatedSelectedEquipment);\r\n }\r\n\r\n return isFormLoading ?\r\n (\r\n
) : (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withRouter (connect(\r\n state => {\r\n const { createRequest, wirelessAccessoryRequest, translation, requestDetail } = state;\r\n const { wirelessAccessoryForm } = state.form;\r\n return {\r\n wirelessAccessoryForm\r\n , createRequest\r\n , wirelessAccessoryRequest\r\n , ...translation\r\n , requestDetail\r\n };\r\n }\r\n , dispatch => ({\r\n ...bindActionCreators(\r\n Object.assign({}, wirelessAccessoryActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n ),\r\n FormChange: (model, value) => {\r\n dispatch(actions.change(model, value))\r\n }\r\n })\r\n)(AccessoryForm));","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\"\r\nimport { CONFIRMATION_VALUE, TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton, ORFDatePicker\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_TextArea as TextArea, OR_RRF_Select as Select\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { MAX_LENGTH, CIRCUIT_STATUS, SUBMIT_REQUEST_TITLE } from '../../../../../constants/external-constants';\r\nimport { wirelessIntlRoamingAccessActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireless-request/wireless-intl-roaming-access.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport DATEPICKER_OR from '../../../../common/custom-form/custom-date-picker.component';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ConfirmationNotificationModal } from \"../../../../common/modal/confirmation-modal.component\";\r\nimport { NotificationModal } from \"../../../../common/modal/notification-modal.component\";\r\nimport { convertToUtcDate, assignDefaultIfEmptyString } from '../../../../../utils/helpers.utils';\r\n\r\n\r\nclass IntlRoamingAccessForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: true\r\n , startDate: ''\r\n , endDate: ''\r\n , error: false\r\n , isSaving: false\r\n , RequestTypeId :''\r\n }\r\n this.SearchSuggestions = React.createRef();\r\n }\r\n async componentDidMount() {\r\n const { updateDataList, isUpdateRequest, subscriptionList, isRequestOnBehalf, takeActionCircuitCode, takeActionCircuitId } = this.props.createRequest;\r\n const { requestDetail, onUpdateAutoPopulate, fetchSubscriptionByValue, onSubscriptionSelect, onROBSubscripitionAutoSelect, getNewIntlRoamingAccessFormData} = this.props\r\n const orderId = this.props.match.params.orderId;\r\n \r\n this.props.fetchIntlOptions();\r\n if (takeActionCircuitId != null || takeActionCircuitId !== undefined) {\r\n var circuitCodePropName = 'CircuitCode';\r\n var subscriptionLists = await fetchSubscriptionByValue(takeActionCircuitCode, circuitCodePropName);\r\n\r\n onSubscriptionSelect(takeActionCircuitCode, circuitCodePropName, subscriptionLists, null, takeActionCircuitId);\r\n }\r\n else {\r\n onSubscriptionSelect('');\r\n }\r\n\r\n if (isUpdateRequest) {\r\n const selectedItem = requestDetail.requestData.Order;\r\n const currentCircuitCode = requestDetail.requestData.Circuit.CircuitCode;\r\n var circuitCodePropName = 'CircuitCode';\r\n if (selectedItem?.IsRequestedInBehalf) {\r\n this.SearchSuggestions.current.onChange(null, { newValue: currentCircuitCode })\r\n await onROBSubscripitionAutoSelect(currentCircuitCode, selectedItem.EndUserId)\r\n await getNewIntlRoamingAccessFormData(orderId);\r\n }\r\n else {\r\n await fetchSubscriptionByValue(currentCircuitCode).then(() => {\r\n this.setState({ isLoading: false });\r\n });\r\n if (this.state.isLoading == false) {\r\n await onSubscriptionSelect(currentCircuitCode, circuitCodePropName, subscriptionList)\r\n await getNewIntlRoamingAccessFormData(orderId);\r\n this.SearchSuggestions.current.onChange(null, { newValue: currentCircuitCode })\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelessIntlRoamingAccessForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n setStartDate = (v) => {\r\n this.setState({\r\n startDate: v\r\n });\r\n }\r\n\r\n setEndDate = (v) => {\r\n this.setState({\r\n endDate: v\r\n });\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems } = this.props;\r\n const { startDate, endDate } = this.state;\r\n\r\n this.setState({ showConModal: true })\r\n }\r\n handleConfirmationModal = async (buttonType) => {\r\n\r\n if (buttonType === CONFIRMATION_VALUE.Ok) {\r\n const { submitRequest, fetchRequestLogItems } = this.props;\r\n this.setState({\r\n isSaving: true,\r\n });\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n this.setState({\r\n title: \"Success\",\r\n isSaving: false\r\n })\r\n this.props.hideRequestModal();\r\n } else {\r\n this.setState({\r\n title: \"Error\",\r\n isSaving: false\r\n })\r\n }\r\n this.setState(prev => ({\r\n showConModal: !prev.showConModal,\r\n show: true,\r\n message: success.ok != false ? success.Message : 'Incorrect Data'\r\n }))\r\n } else {\r\n this.setState({\r\n showConModal: false\r\n });\r\n }\r\n }\r\n\r\n haveError = (value) => {\r\n this.setState({\r\n error: value\r\n })\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ show: false });\r\n if (this.state.title !== \"Error\") {\r\n this.props.history.goBack();\r\n }\r\n }\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n \r\n render() { \r\n const { subscriptionList, takeActionCircuitCode, isUpdateRequest } = this.props.createRequest;\r\n const { wirelessIntlRoamingAccessForm, onSubscriptionSelect, fetchSubscriptionByValue } = this.props;\r\n const { requestData } = this.props.requestDetail;\r\n const { subscription, formSubmitted, isResetLoading,internationalRequestOptions } = this.props.wirelessIntlRoamingAccessRequest;\r\n var isUpdateDate = wirelessIntlRoamingAccessForm.startDate != '' || wirelessIntlRoamingAccessForm.endDate != '';\r\n var circuitStatusName = isUpdateRequest && subscriptionList.length ? subscriptionList[0].CircuitStatus : subscription.CircuitStatus != null && subscription.CircuitStatus != \"\" ? subscription.CircuitStatus : \"\";\r\n var initialRequest = !(wirelessIntlRoamingAccessForm.circuitId != 0 && wirelessIntlRoamingAccessForm.startDate != '' && internationalRequestOptions.find(x => x.Key == wirelessIntlRoamingAccessForm.RequestTypeId) !== undefined && wirelessIntlRoamingAccessForm.endDate != '' && wirelessIntlRoamingAccessForm.businessJustification != '' && !formSubmitted);\r\n var updateRequest = isUpdateRequest ?\r\n (wirelessIntlRoamingAccessForm.circuitId != 0 && (wirelessIntlRoamingAccessForm.startDate != '') && (wirelessIntlRoamingAccessForm.endDate != '') && wirelessIntlRoamingAccessForm.businessJustification != '' && !formSubmitted) &&\r\n (requestData.CircuitId != wirelessIntlRoamingAccessForm.circuitId \r\n || requestData.Order.CountriesToBeVisited != wirelessIntlRoamingAccessForm.countriesToBeVisited\r\n || requestData.Order.RequestType.RequestTypeID != wirelessIntlRoamingAccessForm.RequestTypeId\r\n || requestData.BusinessJustification.BusinessJustification != wirelessIntlRoamingAccessForm.businessJustification\r\n || requestData.BusinessJustification.AdditionalInformation != assignDefaultIfEmptyString(wirelessIntlRoamingAccessForm.additionalInformation, null)\r\n || convertToUtcDate(requestData.Order.StartDate, true, \"DD MMM YYYY\") != convertToUtcDate(wirelessIntlRoamingAccessForm.startDate, true, \"DD MMM YYYY\")\r\n || convertToUtcDate(requestData.Order.EndDate, true, \"DD MMM YYYY\") != convertToUtcDate(wirelessIntlRoamingAccessForm.endDate, true, \"DD MMM YYYY\") ) ? false : true : false;\r\n let minDate = new Date();\r\n minDate.setDate(minDate.getDate() - 7);\r\n\r\n return (\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n};\r\n\r\nexport default withRouter(\r\n connect(\r\n state => {\r\n const { createRequest, wirelessIntlRoamingAccessRequest, translation, requestDetail } = state;\r\n const { wirelessIntlRoamingAccessForm } = state.form;\r\n return {\r\n wirelessIntlRoamingAccessForm\r\n , createRequest\r\n , requestDetail\r\n , wirelessIntlRoamingAccessRequest\r\n , ...translation,\r\n };\r\n }\r\n , dispatch => ({\r\n ...bindActionCreators(\r\n Object.assign({}, wirelessIntlRoamingAccessActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n ),\r\n FormChange: (Model, value) => {\r\n dispatch(actions.change(Model, value))\r\n }\r\n })\r\n)(IntlRoamingAccessForm));","\r\nexport function validateEmail(email) {\r\n if (email) {\r\n return String(email)\r\n .toLowerCase()\r\n .match(\r\n /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/\r\n );\r\n }\r\n\r\n return false;\r\n}","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { toast } from 'react-toastify';\r\nimport { createRequestActions } from './../../../store/external/request-reducer/create-request.reducer';\r\nimport { fileAttachmentActions } from './../../../store/external/common-reducer/file-attachment.reducer';\r\nimport Translation from '../../common/translation/translation.component';\r\nimport Icons from \"../../icon\";\r\nimport \"./file-attachment.component.css\";\r\nimport 'react-toastify/dist/ReactToastify.css';\r\n\r\nclass FileAttachment extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedFile: null,\r\n files: [],\r\n attaching: false\r\n };\r\n }\r\n \r\n\r\n onclickAttacheFile = () => {\r\n var inputFile = document.getElementById(\"request-attach-file\");\r\n\r\n this.setState({ attaching: true })\r\n inputFile.click();\r\n\r\n document.body.onfocus = this.fileFocus;\r\n };\r\n\r\n onFileChange = (e) => {\r\n var files = e.target.files;\r\n var acceptedFiles = ['.pdf', '.msg', 'docx', '.xls', 'xlsx', '.txt'];\r\n\r\n this.setState({ attaching: false });\r\n\r\n let attachFiles = this.props.fileAttachment.files;\r\n var fileCount = (files.length + attachFiles.length);\r\n\r\n if (fileCount > 3) {\r\n toast.error('You can only upload a maximum of 3 files.', this.getToastSettings());\r\n } else {\r\n for (var i = 0; i < files.length; i++) {\r\n var fileType = files[i].name.substr(files[i].name.length - 4);\r\n if (!acceptedFiles.includes(fileType.toLowerCase())) {\r\n toast.error('Unsupported file format.', this.getToastSettings());\r\n }\r\n else if (files[i].size > 10 * 1024 * 1024) {\r\n toast.error('Attachment size exceeds the allowable limit of 10 MB.', this.getToastSettings());\r\n } else {\r\n attachFiles.push(files[i]);\r\n }\r\n }\r\n\r\n this.props.updateAttachFile(attachFiles);\r\n }\r\n };\r\n\r\n getToastSettings = () => {\r\n return {\r\n position: \"top-center\",\r\n theme: \"colored\",\r\n hideProgressBar: true,\r\n closeOnClick: true,\r\n pauseOnHover: true,\r\n draggable: true,\r\n progress: undefined,\r\n };\r\n }\r\n\r\n removeFileByName = (name) => {\r\n //const { updateOrderAmmendFileNames, orderFile, orderAmmendFileNames, addOrderFile, isDisabled } = this.props;\r\n\r\n //if (uploadingAPFile || isDisabled)\r\n //return;\r\n\r\n const { files } = this.props.fileAttachment;\r\n\r\n var newAttachFile = files.filter(function (obj) {\r\n return obj.name !== name;\r\n });\r\n //if (orderAmmendFileNames != undefined) {\r\n // var oldFileNames = orderAmmendFileNames.filter(function (n) {\r\n // return n !== name;\r\n // });\r\n // updateOrderAmmendFileNames(oldFileNames);\r\n //}\r\n var inputFile = document.getElementById(\"request-attach-file\");\r\n inputFile.value = \"\";\r\n\r\n this.props.updateAttachFile(newAttachFile);\r\n }\r\n\r\n displayAttachment = (files) => {\r\n //const { orderAmmendFileNames } = this.props;\r\n if (files && files.length > 0) {\r\n return files.map((x, i) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {x.name}\r\n this.removeFileByName(x.name)}\r\n />\r\n
\r\n \r\n //
\r\n // \r\n // this.removeFileByName(x)} data-dz-remove>\r\n //
\r\n // {x}
\r\n // \r\n {isUnmounted ? this.onRemoveData() : null}\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { createRequest, fileAttachment } = state;\r\n return {\r\n fileAttachment\r\n , createRequest\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, createRequestActions\r\n , fileAttachmentActions),\r\n dispatch\r\n )\r\n)(FileAttachment);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport { validateEmail } from '../../../../../utils/validation.utils';\r\nimport {\r\n ORFButton\r\n , ORFDatePicker\r\n , OR_RRF_TextArea as TextArea\r\n , OR_RRF_InputField as InputField\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { wirelineChangeVendorActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-change-vendor.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../common/file-attachment/file-attachment.component';\r\nimport { trueFalseToBoolean } from '../../../../../utils/helpers.utils';\r\nimport Icons from '../../../../icon';\r\n\r\nclass WirelineChangeVendorForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n needByDate: '',\r\n localToggle: false,\r\n alterToggle: false,\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelineChangeVendorForm();\r\n this.props.resetRequestData();\r\n this.props.resetFileAttachment();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems\r\n , uploadFile, saveOrderFile} = this.props;\r\n\r\n var success = await submitRequest(this.state.needByDate);\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n setNeedByDate = (v) => {\r\n this.setState({\r\n needByDate: v\r\n });\r\n }\r\n\r\n toggleLocalContainer() {\r\n this.setState({ localToggle: !this.state.localToggle })\r\n }\r\n\r\n toggleAlterContainer() {\r\n this.setState({ alterToggle: !this.state.alterToggle })\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //form\r\n wirelineChangeVendorFormA\r\n //reducer action\r\n , onSubscriptionSelect\r\n , onEmployeeSelect\r\n , fetchSubscriptionByValue\r\n , fetchEmployeeByValue\r\n , onVendorSelect\r\n , onChangeExpedite\r\n } = this.props;\r\n\r\n const { subscriptionList, employeeList, takeActionCircuitCode } = this.props.createRequest;\r\n const { preferredVendorOptions, accountOptions, formSubmitted, subscription } = this.props.wirelineChangeVendorRequest;\r\n const { needByDate } = this.state;\r\n\r\n let minDate = new Date();\r\n minDate.setDate(minDate.getDate() + 1);\r\n\r\n let expediteOptions = [\r\n {\r\n \"Key\": true,\r\n \"Value\": \"Yes\"\r\n },\r\n {\r\n \"Key\": false,\r\n \"Value\": \"No\"\r\n }\r\n ];\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelineChangeVendorRequest, createRequest, translation } = state;\r\n const { wirelineChangeVendorFormA } = state.form;\r\n return {\r\n wirelineChangeVendorRequest\r\n , wirelineChangeVendorFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelineChangeVendorActions\r\n , createRequestActions\r\n , requestLogActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(WirelineChangeVendorForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { wirelineUpgradeCircuitActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-upgrade-circuit.reducer\";\r\n\r\nclass WirelineUpgradeCircuitForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelineUpgradeCircuit();\r\n this.props.resetRequestData();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems } = this.props;\r\n\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n\r\n render() {\r\n const {\r\n //form\r\n wirelineUpgradeCircuitFormA\r\n //reducer action\r\n , onSubscriptionSelect\r\n , fetchSubscriptionByValue\r\n , onPlanSelect\r\n } = this.props;\r\n\r\n const { subscriptionList } = this.props.createRequest;\r\n const { formSubmitted, planOptions, primaryPlanDetails, vendorDetails, subscription } = this.props.wirelineUpgradeCircuitRequest;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelineUpgradeCircuitRequest, createRequest, translation } = state;\r\n const { wirelineUpgradeCircuitFormA } = state.form;\r\n return {\r\n wirelineUpgradeCircuitRequest\r\n , wirelineUpgradeCircuitFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelineUpgradeCircuitActions\r\n , createRequestActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(WirelineUpgradeCircuitForm);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport { validateEmail } from '../../../../../../utils/validation.utils';\r\nimport {\r\n ORFButton\r\n , ORFDatePicker\r\n , OR_RRF_TextArea as TextArea\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_InputField as InputField\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { wirelineTerminateCircuitActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate-circuit.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../../common/file-attachment/file-attachment.component';\r\nimport Icons from '../../../../../icon';\r\n\r\nclass WirelineTerminateExhibitA extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n terminateDate: '',\r\n localToggle: false,\r\n alterToggle: false,\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetFileAttachment();\r\n this.props.resetRequestData();\r\n this.props.resetFileAttachment();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems, uploadFile, saveOrderFile } = this.props;\r\n\r\n var success = await submitRequest(this.state.terminateDate);\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toggleLocalContainer() {\r\n this.setState({ localToggle: !this.state.localToggle })\r\n }\r\n\r\n toggleAlterContainer() {\r\n this.setState({ alterToggle: !this.state.alterToggle })\r\n }\r\n\r\n setTerminateDate = (v) => {\r\n this.setState({\r\n terminateDate: v\r\n });\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n\r\n const {\r\n //form\r\n wirelineTerminateCircuitFormA\r\n //reducer action\r\n , onSubscriptionSelect\r\n , onEmployeeSelect\r\n , fetchSubscriptionByValue\r\n , fetchEmployeeByValue\r\n } = this.props;\r\n\r\n const { subscriptionList, employeeList, takeActionCircuitCode } = this.props.createRequest;\r\n const { formSubmitted, subscription } = this.props.wirelineTerminateCircuitRequest;\r\n const { terminateDate } = this.state;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelineTerminateCircuitRequest, createRequest, translation } = state;\r\n const { wirelineTerminateCircuitFormA } = state.form;\r\n return {\r\n wirelineTerminateCircuitRequest\r\n , wirelineTerminateCircuitFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelineTerminateCircuitActions\r\n , createRequestActions\r\n , requestLogActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(WirelineTerminateExhibitA);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton\r\n , ORFDatePicker\r\n , OR_RRF_TextArea as TextArea\r\n , ORFSearchSuggestions as SearchSuggestions\r\n} from '../../../../../common/forms/order-request-form.component';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { wirelineTerminateExhibitBActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate/wireline-terminate-exhibit-b.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../../common/file-attachment/file-attachment.component';\r\n\r\nclass WirelineTerminateExhibitB extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n terminateDate: '',\r\n localToggle: false,\r\n alterToggle: false,\r\n }\r\n }\r\n componentWillUnmount() {\r\n this.props.resetFileAttachment();\r\n }\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems, uploadFile, saveOrderFile} = this.props;\r\n\r\n var success = await submitRequest(this.state.terminateDate);\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n this.setState({\r\n clearAttachment: true\r\n });\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toggleLocalContainer() {\r\n this.setState({ localToggle: !this.state.localToggle })\r\n }\r\n\r\n toggleAlterContainer() {\r\n this.setState({ alterToggle: !this.state.alterToggle })\r\n }\r\n\r\n setTerminateDate = (v) => {\r\n this.setState({\r\n terminateDate: v\r\n });\r\n }\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n render() {\r\n\r\n const {\r\n //form\r\n wirelineTerminateCircuitFormB\r\n //reducer action\r\n , onSubscriptionSelect\r\n , fetchSubscriptionByValue\r\n } = this.props;\r\n\r\n const { subscriptionList } = this.props.createRequest;\r\n const { formSubmitted, subscription } = this.props.wirelineTerminateExhibitBRequest;\r\n const { terminateDate } = this.state;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelineTerminateExhibitBRequest, createRequest, translation } = state;\r\n const { wirelineTerminateCircuitFormB } = state.form;\r\n return {\r\n wirelineTerminateExhibitBRequest\r\n , wirelineTerminateCircuitFormB\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelineTerminateExhibitBActions\r\n , createRequestActions\r\n , requestLogActions\r\n , fileAttachmentActions),\r\n dispatch\r\n )\r\n)(WirelineTerminateExhibitB);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { EXHIBIT_TYPE as EXHIBITTYPE } from \"./../../../../../../utils/constant.utils\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { wirelineTerminateCircuitActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate-circuit.reducer\";\r\nimport { wirelineTerminateExhibitBActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-terminate/wireline-terminate-exhibit-b.reducer\";\r\nimport WirelineTerminateExhibitA from \"./wireline-terminate-exhibit-a.component\";\r\nimport WirelineTerminateExhibitB from \"./wireline-terminate-exhibit-b.component\";\r\n\r\nclass WirelineTerminateForm extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n await this.props.getExhibitType();\r\n }\r\n\r\n componentWillUnmount() {\r\n const { resetWirelineTerminateCircuitForm, resetWirelineTerminateExhibitBForm} = this.props;\r\n const { exhibitType } = this.props.createRequest;\r\n\r\n if (exhibitType == EXHIBITTYPE.exhibitA) {\r\n resetWirelineTerminateCircuitForm();\r\n } else if (exhibitType == EXHIBITTYPE.exhibitB) {\r\n resetWirelineTerminateExhibitBForm()\r\n } else {\r\n //form = null;\r\n }\r\n\r\n this.props.resetRequestData();\r\n }\r\n\r\n displayForm = () => {\r\n\r\n const { modalMessage, modalClose} = this.props;\r\n const { exhibitType } = this.props.createRequest;\r\n let form;\r\n\r\n if (exhibitType == EXHIBITTYPE.exhibitA) {\r\n form = \r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { createRequest } = state;\r\n return {\r\n createRequest\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, createRequestActions\r\n , wirelineTerminateCircuitActions\r\n , wirelineTerminateExhibitBActions),\r\n dispatch\r\n )\r\n)(WirelineTerminateForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport Translation from '../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../utils/constant.utils';\r\nimport { validateEmail } from '../../../../../utils/validation.utils';\r\nimport {\r\n ORFButton\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , OR_RRF_InputField as InputField\r\n} from '../../../../common/forms/order-request-form.component';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Icons from '../../../../icon';\r\nimport { trueFalseToBoolean } from '../../../../../utils/helpers.utils';\r\nimport { wirelineOtherRequestActions } from \"./../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-other-request.reducer\";\r\nimport { createRequestActions } from \"./../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../common/file-attachment/file-attachment.component';\r\n\r\nclass WirelineOtherForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n localToggle: false,\r\n alterToggle: false,\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.props.fetchOtherOptions();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetWirelineOtherRequestForm();\r\n this.props.resetRequestData();\r\n this.props.resetFileAttachment();\r\n }\r\n\r\n submitRequest = async () => {\r\n const { submitRequest, modalMessage, fetchRequestLogItems, uploadFile, saveOrderFile } = this.props;\r\n\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose) {\r\n modalClose();\r\n }\r\n }\r\n\r\n toggleLocalContainer() {\r\n this.setState({ localToggle: !this.state.localToggle })\r\n }\r\n\r\n toggleAlterContainer() {\r\n this.setState({ alterToggle: !this.state.alterToggle })\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //form\r\n wirelineOtherRequestFormA\r\n //reducer action\r\n , onSubscriptionSelect\r\n , onEmployeeSelect\r\n , fetchSubscriptionByValue\r\n , fetchEmployeeByValue\r\n , onChangeExpedite\r\n } = this.props;\r\n\r\n const { subscriptionList, employeeList, takeActionCircuitCode } = this.props.createRequest;\r\n const { otherOptions, formSubmitted, subscription } = this.props.wirelineOtherRequestRequest;\r\n\r\n let expediteOptions = [\r\n {\r\n \"Key\": true,\r\n \"Value\": \"Yes\"\r\n },\r\n {\r\n \"Key\": false,\r\n \"Value\": \"No\"\r\n }\r\n ];\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { wirelineOtherRequestRequest, createRequest, translation } = state;\r\n const { wirelineOtherRequestFormA } = state.form;\r\n return {\r\n wirelineOtherRequestRequest\r\n , wirelineOtherRequestFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, wirelineOtherRequestActions\r\n , createRequestActions\r\n , requestLogActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(WirelineOtherForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newQuotationActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-quotation.reducer\";\r\nimport '../../new-circuit/exhibit-a/wireline-location-form.component.css';\r\n\r\n\r\nclass QuotationLocationForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.getQuotationFormData();\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //component props\r\n onClickCancel\r\n , nextAction\r\n // form\r\n , quotationLocationFormA\r\n // reducer action\r\n , onCountrySelect\r\n } = this.props;\r\n\r\n const { countryOptions } = this.props.quotationRequest;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { quotationRequest, translation } = state;\r\n const { quotationLocationFormA } = state.form;\r\n return {\r\n quotationRequest\r\n , quotationLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newQuotationActions),\r\n dispatch\r\n )\r\n)(QuotationLocationForm);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton as Button\r\n , OR_RRF_InputField as InputField\r\n , OR_RRF_Select as Select\r\n , ORFDropdownCheckbox\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newQuotationActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-quotation.reducer\";\r\n\r\nclass QuotationSubscriptionForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //component props\r\n onClickCancel\r\n , prevAction\r\n , nextAction\r\n // form\r\n , quotationSubscriptionFormA\r\n // reducer action\r\n , onVendorSelect\r\n , onCircuitTypeSelect\r\n , onContractTermSelect\r\n , onBandwidthSelect\r\n } = this.props;\r\n\r\n const { requestTypeOptions\r\n , preferredVendorOptions, allVendorSelected\r\n , circuitTypeOptions, allCircuitTypeSelected\r\n , contractTermOptions, allContractTermSelected\r\n , bandwidthOptions, allBandwidthSelected, showOtherBandwidthField } = this.props.quotationRequest;\r\n\r\n let disableSubmit = quotationSubscriptionFormA.quotationRequestTypeId == 0\r\n || quotationSubscriptionFormA.quotationVendorListIds.length == 0\r\n || quotationSubscriptionFormA.quotationCircuitTypeIds.length == 0\r\n || quotationSubscriptionFormA.quotationBandwidthIds.length == 0;\r\n\r\n disableSubmit = showOtherBandwidthField ? disableSubmit || quotationSubscriptionFormA.quotationBandwidthOther == '' : disableSubmit;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { quotationRequest, translation } = state;\r\n const { quotationSubscriptionFormA } = state.form;\r\n return {\r\n quotationRequest\r\n , quotationSubscriptionFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newQuotationActions),\r\n dispatch\r\n )\r\n)(QuotationSubscriptionForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n ORFButton as Button\r\n , OR_RRF_Select as Select\r\n , OR_RRF_TextArea as TextArea\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newQuotationActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-quotation.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../../store/external/request-reducer/request-log.reducer\";\r\n\r\nclass QuotationBusinessForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n submitRequest = async () => {\r\n const { modalMessage, submitRequest, fetchRequestLogItems } = this.props;\r\n\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //component props\r\n onClickCancel\r\n , prevAction\r\n // form\r\n , quotationBusinessFormA\r\n // reducer action\r\n } = this.props;\r\n\r\n const { purposeOfUseOptions, formSubmitted } = this.props.quotationRequest;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { quotationRequest, translation } = state;\r\n const { quotationBusinessFormA } = state.form;\r\n return {\r\n quotationRequest\r\n , quotationBusinessFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newQuotationActions\r\n , requestLogActions),\r\n dispatch\r\n )\r\n)(QuotationBusinessForm);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\n\r\nimport { newQuotationActions } from \"./../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/wireline-quotation.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport QuotationLocationForm from '../new-quotation/quotation-exhibit-a/quotation-location-form.component';\r\nimport QuotationSubscriptionForm from '../new-quotation/quotation-exhibit-a/quotation-subscription-form.component';\r\nimport QuotationBusinessForm from '../new-quotation/quotation-exhibit-a/quotation-business-form.component';\r\nimport Icons from '../../../../../icon';\r\nimport Translation from '../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../utils/constant.utils';\r\n\r\nclass NewQuotationForm extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetQuotationForm();\r\n this.props.resetRequestData();\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: false,\r\n isBusinessForm: true\r\n });\r\n }\r\n else if (isLocationForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(true);\r\n }\r\n else {\r\n console.log(\"Submit\")\r\n }\r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isBusinessForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n }\r\n else if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(false);\r\n }\r\n\r\n }\r\n\r\n onClickCancel = () => {\r\n const { modalClose } = this.props;\r\n\r\n if (modalClose !== null && modalClose !== undefined) {\r\n modalClose();\r\n }\r\n }\r\n\r\n displayForm = () => {\r\n const { isLocationForm, isSubscriptionForm, isBusinessForm } = this.state;\r\n let form;\r\n\r\n if (isLocationForm) {\r\n form = \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { createRequest, translation } = state;\r\n const { wirelessLocationFormA } = state.form;\r\n return {\r\n createRequest\r\n , wirelessLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newQuotationActions\r\n , createRequestActions),\r\n dispatch\r\n )\r\n)(NewQuotationForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n ORFSelect\r\n , ORFTextArea\r\n , ORFButton\r\n , OR_RRF_InputField as InputField\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newCircuitSubscriptionActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\n\r\nimport './wireline-location-form.component.css';\r\n\r\nclass NewCircuitLocationForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showComponent: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.props.getNewCircuitFormData();\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n\r\n render() {\r\n const {\r\n //component props\r\n onClickCancel\r\n , nextAction\r\n // form\r\n , wirelineLocationFormA\r\n // reducer action\r\n , onCountrySelect\r\n , onBillingAddressSelect\r\n , fetchAddressByValue\r\n } = this.props;\r\n\r\n const { addressList } = this.props.createRequest;\r\n const { countryOptions, addressOptions } = this.props.newCircuitRequest;\r\n\r\n return (\r\n Location
\r\n\r\n
\r\n :\r\n (isSubscriptionForm ?\r\n //Subscription
\r\n\r\n
\r\n :\r\n // Business
\r\n\r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { newCircuitRequest, createRequest, translation } = state;\r\n const { wirelineLocationFormA } = state.form;\r\n return {\r\n newCircuitRequest\r\n , wirelineLocationFormA\r\n , createRequest\r\n , ...translation,\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitSubscriptionActions, createRequestActions),\r\n dispatch\r\n )\r\n)(NewCircuitLocationForm);\r\n\r\n// export class NewQuotationLocationForm extends Component {\r\n// constructor(props) {\r\n// super(props);\r\n// }\r\n\r\n// render() {\r\n// let countries = [\r\n// {\r\n// \"Key\": \"AR\",\r\n// \"Value\": \"Argentina\"\r\n// },\r\n// {\r\n// \"Key\": \"CN\",\r\n// \"Value\": \"China\"\r\n// },\r\n// {\r\n// \"Key\": \"FI\",\r\n// \"Value\": \"Finland\"\r\n// },\r\n// {\r\n// \"Key\": \"FR\",\r\n// \"Value\": \"France\"\r\n// },\r\n// {\r\n// \"Key\": \"DE\",\r\n// \"Value\": \"Germany\"\r\n// },\r\n// {\r\n// \"Key\": \"GT\",\r\n// \"Value\": \"Guatemala\"\r\n// },\r\n// {\r\n// \"Key\": \"HK\",\r\n// \"Value\": \"Hong Kong\"\r\n// },\r\n// {\r\n// \"Key\": \"HU\",\r\n// \"Value\": \"Hungary\"\r\n// },\r\n// {\r\n// \"Key\": \"IN\",\r\n// \"Value\": \"India\"\r\n// },\r\n// {\r\n// \"Key\": \"IE\",\r\n// \"Value\": \"Ireland\"\r\n// },\r\n// {\r\n// \"Key\": \"IT\",\r\n// \"Value\": \"Italy\"\r\n// },\r\n// {\r\n// \"Key\": \"KE\",\r\n// \"Value\": \"Kenya\"\r\n// },\r\n// {\r\n// \"Key\": \"MX\",\r\n// \"Value\": \"Mexico\"\r\n// },\r\n// {\r\n// \"Key\": \"PH\",\r\n// \"Value\": \"Philippines\"\r\n// },\r\n// {\r\n// \"Key\": \"PL\",\r\n// \"Value\": \"Poland\"\r\n// },\r\n// {\r\n// \"Key\": \"PT\",\r\n// \"Value\": \"Portugal\"\r\n// },\r\n// {\r\n// \"Key\": \"QA\",\r\n// \"Value\": \"Qatar\"\r\n// },\r\n// {\r\n// \"Key\": \"RO\",\r\n// \"Value\": \"Romania\"\r\n// },\r\n// {\r\n// \"Key\": \"SA\",\r\n// \"Value\": \"Saudi Arabia\"\r\n// },\r\n// {\r\n// \"Key\": \"SG\",\r\n// \"Value\": \"Singapore\"\r\n// },\r\n// {\r\n// \"Key\": \"SK\",\r\n// \"Value\": \"Slovakia\"\r\n// },\r\n// {\r\n// \"Key\": \"KR\",\r\n// \"Value\": \"South Korea\"\r\n// },\r\n// {\r\n// \"Key\": \"ES\",\r\n// \"Value\": \"Spain\"\r\n// },\r\n// {\r\n// \"Key\": \"TH\",\r\n// \"Value\": \"Thailand\"\r\n// },\r\n// {\r\n// \"Key\": \"GB\",\r\n// \"Value\": \"United Kingdom\"\r\n// }\r\n// ];\r\n\r\n// return (\r\n// \r\n// \r\n//
\r\n// \r\n//
\r\n// \r\n//
\r\n//
\r\n// );\r\n// }\r\n// };\r\n","import React, { createRef, Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n ORFSelect\r\n , ORFButton as Button\r\n , OR_RRF_InputField as InputField\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , ORFDropdownCheckbox\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { PrimarySecondaryInt as PrimarySecondary } from \"./../../../../../../../constants/external-constants\"\r\nimport { newCircuitSubscriptionActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\n\r\nclass NewCircuitSubscriptionForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isSecondary: false,\r\n isBoth: false,\r\n disableSubmit: true\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.formChanges(this.props);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { wirelineSubscriptionFormA } = this.props;\r\n if (JSON.stringify(prevProps.wirelineSubscriptionFormA) !== JSON.stringify(wirelineSubscriptionFormA)) {\r\n this.formChanges(prevProps);\r\n } else {\r\n return;\r\n }\r\n }\r\n\r\n formChanges = (prevProps) => {\r\n const { wirelineSubscriptionFormA } = this.props;\r\n\r\n let disable = wirelineSubscriptionFormA.vendorDetailId == 0\r\n || wirelineSubscriptionFormA.itemUseId == 0\r\n || wirelineSubscriptionFormA.circuitTypeId == 0\r\n || wirelineSubscriptionFormA.primarySecondaryId == 0\r\n || wirelineSubscriptionFormA.mrc == 0;\r\n\r\n this.primarySecondaryChanges(wirelineSubscriptionFormA.primarySecondaryId, disable);\r\n }\r\n\r\n primarySecondaryChanges = (value, disable) => {\r\n if (value == PrimarySecondary.secondary) {\r\n disable = disable || this.props.wirelineSubscriptionFormA.btnId == 0;\r\n this.setState({\r\n isSecondary: true,\r\n isBoth: false,\r\n disableSubmit: disable\r\n });\r\n } else if (value == PrimarySecondary.both) {\r\n disable = disable || this.props.wirelineSubscriptionFormA.mrc2 == 0;\r\n this.setState({\r\n isSecondary: false,\r\n isBoth: true,\r\n disableSubmit: disable\r\n });\r\n } else {\r\n this.setState({\r\n isSecondary: false,\r\n isBoth: false,\r\n disableSubmit: disable\r\n });\r\n }\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const { isSecondary, isBoth, disableSubmit } = this.state;\r\n const {\r\n //component props\r\n onClickCancel\r\n , nextAction\r\n , prevAction\r\n // form\r\n , wirelineSubscriptionFormA\r\n // reducer action\r\n , fetchPrimarySubscriptionByValue\r\n , onCategorySelect\r\n , onCircuitTypeSelect\r\n , onChangeSubCircuitType\r\n , onChangePrimarySecondary\r\n , onBTNSelect\r\n , onChangeMRC\r\n , onChangeNRC\r\n , onChangeMRC2\r\n , onChangeNRC2\r\n } = this.props;\r\n const { primarySubscriptionList } = this.props.createRequest;\r\n const { preferredVendorOptions, categoryOptions, circuitTypeOptions, subCircuitTypeOptions, primarySecondaryOptions, vendorDetails } = this.props.newCircuitRequest;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { newCircuitRequest, createRequest, translation } = state;\r\n const { wirelineSubscriptionFormA } = state.form;\r\n return {\r\n newCircuitRequest\r\n , wirelineSubscriptionFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitSubscriptionActions, createRequestActions),\r\n dispatch\r\n )\r\n)(NewCircuitSubscriptionForm);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from '../../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport { validateEmail } from '../../../../../../../utils/validation.utils';\r\nimport {\r\n OR_RRF_TextArea as TextArea\r\n , ORFButton as Button\r\n , OR_RRF_InputField as InputField\r\n , OR_RRF_Select as Select\r\n , ORFSearchSuggestions as SearchSuggestions\r\n , ORFDatePicker\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newCircuitSubscriptionActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../../../common/file-attachment/file-attachment.component';\r\nimport Icons from '../../../../../../icon';\r\nimport { trueFalseToBoolean } from '../../../../../../../utils/helpers.utils';\r\n\r\nclass NewCircuitBusinessForm extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {}\r\n }\r\n\r\n toggleLocalContainer() {\r\n this.setState({ localToggle: !this.state.localToggle })\r\n }\r\n\r\n toggleAlterContainer() {\r\n this.setState({ alterToggle: !this.state.alterToggle })\r\n }\r\n\r\n setNeedByDate = (v) => {\r\n this.props.onDateSelect(v);\r\n }\r\n\r\n submitRequest = async () => {\r\n /*const { needByDate } = this.state*/\r\n const { modalMessage, submitRequest, fetchRequestLogItems, uploadFile, saveOrderFile } = this.props;\r\n\r\n var success = await submitRequest(this.props.wirelineBusinessFormA.needByDate);\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n modalMessage(success);\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n /* const { needByDate } = this.state*/\r\n const {\r\n //component props\r\n onClickCancel\r\n , prevAction\r\n //form\r\n , wirelineBusinessFormA\r\n //reducer action\r\n , onApproverSelect\r\n , onGLCodeSelect\r\n , onCostCenterSelect\r\n , onDateSelect\r\n , fetchEmployeeByValue\r\n , fetchGLCodeByValue\r\n , fetchCostCenterByValue\r\n } = this.props;\r\n const { employeeList, glCodeList, costCenterList } = this.props.createRequest;\r\n const { purposeOfUseOptions, formSubmitted } = this.props.newCircuitRequest;\r\n \r\n const today = new Date()\r\n\r\n let tomorrow = new Date()\r\n\r\n tomorrow.setDate(today.getDate() + 1)\r\n\r\n const mindate = tomorrow;\r\n\r\n //mindate.setDate(mindate.getDay + 1)\r\n\r\n let expediteOptions = [\r\n {\r\n \"Key\": true,\r\n \"Value\": \"Yes\"\r\n },\r\n {\r\n \"Key\": false,\r\n \"Value\": \"No\"\r\n }\r\n ];\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { newCircuitRequest, createRequest, translation } = state;\r\n const { wirelineBusinessFormA } = state.form;\r\n return {\r\n newCircuitRequest\r\n , wirelineBusinessFormA\r\n , createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitSubscriptionActions\r\n , createRequestActions\r\n , requestLogActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(NewCircuitBusinessForm);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport NewCircuitLocationForm from './wireline-location-form.component';\r\nimport NewCircuitSubscriptionForm from './wireline-subscription-form.component';\r\nimport NewCircuitBusinessForm from './wireline-business-form.component';\r\nimport { newCircuitSubscriptionActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-subscription.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport Icons from '../../../../../../icon';\r\nimport Translation from '../../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\n\r\nclass NewCircuitFormExhibitA extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetNewCircuitForm();\r\n this.props.resetRequestData();\r\n this.props.resetFileAttachment();\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: false,\r\n isBusinessForm: true\r\n });\r\n }\r\n else if (isLocationForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(true);\r\n }\r\n else {\r\n console.log(\"Submit\")\r\n }\r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isBusinessForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n }\r\n else if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(false);\r\n }\r\n\r\n }\r\n\r\n displayForm = () => {\r\n const { isLocationForm, isSubscriptionForm, isBusinessForm } = this.state;\r\n let form;\r\n\r\n if (isLocationForm) {\r\n form = \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { createRequest, translation } = state;\r\n const { wirelessLocationFormA } = state.form;\r\n return {\r\n createRequest\r\n , wirelessLocationFormA\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitSubscriptionActions\r\n , createRequestActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(NewCircuitFormExhibitA);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form, actions } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport {\r\n OR_RRF_TextArea as TextArea\r\n , OR_RRF_Select as Select\r\n , OR_RRF_InputField as InputField\r\n , ORFButton as Button\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newCircuitExhibitBActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-exhibit-b.reducer\";\r\nimport Translation from '../../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\n//import './wireless-location-form.component.css';\r\n\r\nclass WirelineLocationFormB extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.getNewCircuitFormData();\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n //component props\r\n nextAction, onClickCancel\r\n // form\r\n , wirelineLocationFormB\r\n // reducer action\r\n , onCountrySelect\r\n , onAddressSelect\r\n } = this.props;\r\n\r\n const { countryOptions } = this.props.newCircuitExhibitBRequest;\r\n\r\n //const requiredValidation = { required: (val) => val && val.length};\r\n //const countryValidationsErrorMsgs = { required: 'Country field is required.'};\r\n //const addressValidationsErrorMsgs = { required: 'Address field is required.' };\r\n //let showPreferredAddress = wirelineLocationFormB.locationId === \"0\";\r\n let disable = wirelineLocationFormB.countryCode == ''\r\n || wirelineLocationFormB.wirelineDeliveryAddress === ''\r\n || wirelineLocationFormB.companyCode === '';\r\n\r\n //if (showPreferredAddress) {\r\n // disable = disable || wirelineLocationFormB.otherDeliveryAddress == '';\r\n //}\r\n\r\n return (\r\n Location
\r\n\r\n
\r\n :\r\n (isSubscriptionForm ? \r\n //Subscription
\r\n\r\n
\r\n :\r\n // Business
\r\n\r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { newCircuitExhibitBRequest, translation } = state;\r\n const { wirelineLocationFormB } = state.form;\r\n return {\r\n newCircuitExhibitBRequest\r\n , wirelineLocationFormB\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitExhibitBActions),\r\n dispatch\r\n )\r\n)(WirelineLocationFormB);","import React, { createRef, Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport Translation from '../../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n OR_RRF_Select as Select\r\n , ORFButton as Button\r\n , OR_RRF_InputField as InputField\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newCircuitExhibitBActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-exhibit-b.reducer\";\r\n\r\nclass WirelineSubscriptionFormB extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.onSubscriptionFormLoad();\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n\r\n const {\r\n // component props\r\n onClickCancel\r\n , prevAction\r\n , nextAction\r\n // form\r\n , wirelineSubscriptionFormB\r\n // reducer action\r\n , onVendorSelect\r\n , onPlanSelect\r\n , onQuantityChange\r\n } = this.props;\r\n\r\n const { planOptions\r\n , preferredVendorOptions\r\n , vendorDetails\r\n , primaryPlanDetail} = this.props.newCircuitExhibitBRequest;\r\n\r\n //const requiredValidation = { required: (val) => val && val.length };\r\n //const vendorValidationErrorMsgs = { required: 'Vendor field is required.' };\r\n //const planValidationErrorMsgs = { required: 'Plan field is required.' };\r\n //const simValidationErrorMsgs = { required: 'Plan field is required.' };\r\n\r\n let disable = wirelineSubscriptionFormB.vendorDetailId == 0\r\n || wirelineSubscriptionFormB.planId == 0\r\n || wirelineSubscriptionFormB.quantity <= 0;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport default connect(\r\n state => {\r\n const { newCircuitExhibitBRequest, translation } = state;\r\n const { wirelineSubscriptionFormB } = state.form;\r\n return {\r\n newCircuitExhibitBRequest\r\n , wirelineSubscriptionFormB\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitExhibitBActions),\r\n dispatch\r\n )\r\n)(WirelineSubscriptionFormB);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Form } from 'react-redux-form';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\nimport {\r\n OR_RRF_TextArea as TextArea\r\n , OR_RRF_Select as Select\r\n , ORFButton as Button\r\n , ORFSearchSuggestions as SearchSuggestions\r\n} from '../../../../../../common/forms/order-request-form.component';\r\nimport { newCircuitExhibitBActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-exhibit-b.reducer\";\r\nimport { requestLogActions } from \"./../../../../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport FileAttachment from '../../../../../../common/file-attachment/file-attachment.component';\r\n\r\nclass WirelineBusinessFormB extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n submitRequest = async () => {\r\n const { modalMessage, submitRequest, fetchRequestLogItems, uploadFile, saveOrderFile } = this.props;\r\n\r\n var success = await submitRequest();\r\n if (success.Success) {\r\n var res = await uploadFile(success.OrderId);\r\n if (res != null && res.Result) {\r\n saveOrderFile(success.OrderId, res.FileNames);\r\n }\r\n\r\n fetchRequestLogItems(0);\r\n }\r\n\r\n modalMessage(success);\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n render() {\r\n const {\r\n // component props\r\n prevAction\r\n , onClickCancel\r\n //form\r\n , wirelineBusinessFormB\r\n //reducer action\r\n , onApproverSelect\r\n , fetchEmployeeByValue\r\n } = this.props;\r\n const { employeeList } = this.props.createRequest;\r\n const { purposeOfUseOptions, formSubmitted } = this.props.newCircuitExhibitBRequest;\r\n\r\n return (\r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { newCircuitExhibitBRequest, createRequest, translation } = state;\r\n const { wirelineBusinessFormB } = state.form;\r\n return {\r\n newCircuitExhibitBRequest\r\n , createRequest\r\n , wirelineBusinessFormB\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitExhibitBActions, requestLogActions, createRequestActions, fileAttachmentActions),\r\n dispatch\r\n )\r\n)(WirelineBusinessFormB);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport WirelineLocationFormB from './wireline-location-form-ex-b.component';\r\nimport WirelineSubscriptionFormB from './wireline-subscription-form-ex-b.component';\r\nimport WirelineBusinessFormB from './wireline-business-form-ex-b.component';\r\nimport { newCircuitExhibitBActions } from \"./../../../../../../../store/external/request-reducer/order-request-reducer/wireline-request/new-circuit/new-circuit-exhibit-b.reducer\";\r\nimport { createRequestActions } from \"./../../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { fileAttachmentActions } from \"./../../../../../../../store/external/common-reducer/file-attachment.reducer\";\r\nimport Icons from '../../../../../../icon';\r\nimport Translation from '../../../../../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../../../../../utils/constant.utils';\r\n\r\nclass NewCircuitFormExhibitB extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetNewCircuitForm();\r\n this.props.resetRequestData();\r\n this.props.resetFileAttachment();\r\n }\r\n\r\n nextAction = () => {\r\n\r\n const { isLocationForm, isSubscriptionForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: false,\r\n isBusinessForm: true\r\n });\r\n }\r\n else if (isLocationForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(true);\r\n }\r\n else {\r\n console.log(\"Submit\")\r\n }\r\n }\r\n\r\n prevAction = () => {\r\n\r\n const { isSubscriptionForm, isBusinessForm } = this.state;\r\n const { disableROBCheckbox } = this.props;\r\n\r\n if (isBusinessForm) {\r\n this.setState({\r\n isLocationForm: false,\r\n isSubscriptionForm: true,\r\n isBusinessForm: false\r\n });\r\n }\r\n else if (isSubscriptionForm) {\r\n this.setState({\r\n isLocationForm: true,\r\n isSubscriptionForm: false,\r\n isBusinessForm: false\r\n });\r\n\r\n disableROBCheckbox(false);\r\n }\r\n\r\n }\r\n\r\n displayForm = () => {\r\n const { isLocationForm, isSubscriptionForm, isBusinessForm } = this.state;\r\n let form;\r\n\r\n if (isLocationForm) {\r\n form = \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { createRequest, translation } = state;\r\n return {\r\n createRequest\r\n , ...translation\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, newCircuitExhibitBActions\r\n , createRequestActions\r\n , fileAttachmentActions\r\n ),\r\n dispatch\r\n )\r\n)(NewCircuitFormExhibitB);","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { EXHIBIT_TYPE as EXHIBITTYPE } from \"./../../../../../../utils/constant.utils\";\r\nimport { createRequestActions } from \"./../../../../../../store/external/request-reducer/create-request.reducer\";\r\nimport NewCircuitFormA from \"./exhibit-a/new-circuit-form.component\";\r\nimport NewCircuitFormB from \"./exhibit-b/new-circuit-form-ex-b.component\";\r\n\r\nclass NewCircuitForm extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n await this.props.getExhibitType();\r\n }\r\n\r\n displayForm = () => {\r\n\r\n const { modalMessage, modalClose, disableROBCheckbox } = this.props;\r\n const { exhibitType } = this.props.createRequest;\r\n let form;\r\n\r\n if (exhibitType == EXHIBITTYPE.exhibitA) {\r\n form = Location
\r\n\r\n
\r\n :\r\n (isSubscriptionForm ?\r\n //Subscription
\r\n\r\n
\r\n :\r\n // Business
\r\n\r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n {this.displayForm()}\r\n
\r\n );\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { createRequest } = state;\r\n return {\r\n createRequest\r\n };\r\n }\r\n , dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, createRequestActions),\r\n dispatch\r\n )\r\n)(NewCircuitForm);","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Modal, Button, ModalBody, Row, Col, FloatingLabel } from 'react-bootstrap';\r\nimport { Control } from 'react-redux-form';\r\nimport { requestDetailsActions } from '../../../store/external/request-reducer/request-details.reducer';\r\nimport { csatActions } from '../../../store/external/csat-survey-reducer/csat-survey.reducer';\r\nimport { CSAT_SETTINGS } from '../../../constants/external-constants';\r\n\r\nimport { ModalHeaderOrderRequestDetail as ModalHeader } from '../../common/modal/modal-head.component';\r\n\r\nclass CSATModal extends Component {\r\n\r\n handleClose = () => {\r\n this.props.toggleSurveyModal();\r\n }\r\n\r\n handleSubmit = async (e) => {\r\n e.preventDefault();\r\n const { selectedItem } = this.props.requestDetail;\r\n var success = await this.props.submitCsat(e);\r\n if (success) {\r\n this.props.isShowSurvey(selectedItem, true);\r\n this.props.handleShowCompletion();\r\n setTimeout((e) => { this.props.resetCsatToInitial(e); }, 2000);\r\n }\r\n }\r\n\r\n componentDidMount(){\r\n const { selectedItem } = this.props.requestDetail;\r\n this.props.fetchCsatSurvey(selectedItem);\r\n }\r\n\r\n loading = () => {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderSurvey = () => {\r\n const { surveyModel, disableSubmit } = this.props.csatSurveyRequest;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.renderQuestions()}\r\n \r\n { this.handleSubmit(e) }}>\r\n Submit\r\n \r\n
\r\n
\r\n );\r\n }\r\n\r\n renderQuestions = () => {\r\n const { csatQuestions = [], csatSurvey = [] } = this.props.csatSurveyRequest;\r\n \r\n const questionsToRender = csatSurvey.length > 0 ? csatSurvey : csatQuestions;\r\n\r\n return questionsToRender.map((q, i) => {\r\n const isSurvey = csatSurvey.length > 0;\r\n const questionText = isSurvey ? q.QuestionText : q.Question;\r\n \r\n if (isSurvey && q.Rate === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n x.questionID == 1).comment}\r\n onChange={this.props.setCsatFormData}\r\n //changeAction={onChangeAction !== undefined ? this.onChangeAction : undefined}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n {isSurvey ? this.renderCsatSurvey(q) : this.renderOptions(q)}\r\n
\r\n
\r\n );\r\n });\r\n }\r\n\r\n renderOptions = (question) => {\r\n const { csatRateTypes } = this.props.csatSurveyRequest;\r\n \r\n return csatRateTypes\r\n .filter(rateType => rateType.CSATRateID !== 0)\r\n .map(rateType => (\r\n {i + 1}. {questionText}
\r\n \r\n this.props.setCsatFormData(e, question)} \r\n />\r\n {rateType.CSATRateName}\r\n
\r\n \r\n ));\r\n }\r\n\r\n renderCsatSurvey = (question) => {\r\n const { csatRateTypes, csatSurvey } = this.props.csatSurveyRequest;\r\n \r\n const isOptionChecked = (questionText, rateID) => \r\n csatSurvey.some(data => data.QuestionText === questionText && data.Rate === rateID);\r\n \r\n return csatRateTypes.map(rateType => (\r\n \r\n this.props.setCsatFormData(e, question)} \r\n />\r\n {rateType.CSATRateName}\r\n
\r\n \r\n ));\r\n }\r\n \r\n\r\n renderCsatComment = () =>{\r\n const { csatSurvey } = this.props.csatSurveyRequest;\r\n const comment = () => {\r\n const commentData = csatSurvey.find(data => data.Rate === 0);\r\n return commentData ? commentData.Comment : \"\"; \r\n };\r\n\r\n return (\r\n \r\n {this.renderQuestions()}\r\n
\r\n );\r\n }\r\n\r\n render() {\r\n \r\n const { isShowCompletion, isShow, isLoading, csatSurvey } = this.props.csatSurveyRequest; \r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {isShowCompletion ?\r\n
\r\n\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const { csatSurveyRequest, requestDetail } = state;\r\n return {\r\n csatSurveyRequest,\r\n requestDetail\r\n };\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n dispatch => bindActionCreators(Object.assign({}, csatActions, requestDetailsActions), dispatch)\r\n)(CSATModal);\r\n\r\n","import React, { Component } from \"react\";\r\nimport ModalBody from \"react-bootstrap/ModalBody\";\r\nimport { Button, Col, Row } from \"react-bootstrap\";\r\nimport { ToastContainer } from 'react-toastify';\r\nimport { Form } from 'react-bootstrap';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport RequestOrderProgress, { ConnectedRequestOrderDetails as RequestOrderDetails } from \"../../external/request/request-details/order-request-details.component\";\r\nimport RequestOwnerDetails from \"../../external/request/request-details/request-owner-details.component\";\r\nimport { APPROVAL_MESSAGE, REQUEST_TYPES_ID as RequestType, REQUEST_SUB_LINKS as RequestTable } from '../../../constants/external-constants';\r\n\r\nimport RequestOnBehalf from \"../../external/request/request-form/request-on-behalf.component\";\r\nimport EmailOptOut from \"../../external/request/request-form/email-opt-out.component\";\r\nimport { NoSubscription } from \"../../external/dashboard/no-subscription/no-subscription.component\";\r\n\r\n//Wireless\r\nimport NewMobileSubscription from \"../../external/request/request-form/wireless/new-mobile-subscription/new-mobile-subscription.component\";\r\nimport MobileChangePricePlanForm from \"../../external/request/request-form/wireless/wireless-change-price-plan.component\";\r\nimport MobileChangeUserForm from \"../../external/request/request-form/wireless/wireless-change-user.component\";\r\nimport MobileChangeVendorForm from \"../../external/request/request-form/wireless/change-vendor/wireless-change-vendor.component\";\r\nimport MobileReplaceSimForm from \"../../external/request/request-form/wireless/wireless-replace-sim.component\";\r\nimport ReplaceDeviceForm from \"../../external/request/request-form/wireless/wireless-replace-device.component\";\r\nimport MobileTerminateSubscriptionForm from \"../../external/request/request-form/wireless/wireless-terminate-subscription.component\";\r\nimport MobilePortOutForm from \"../../external/request/request-form/wireless/wireless-portout.component\";\r\nimport MobileOtherForm from \"../../external/request/request-form/wireless/wireless-other.component\";\r\nimport PortInSubscription from \"../../external/request/request-form/wireless/port-in-subscription/port-in-subscription.component\";\r\nimport AccessoryForm from \"../../external/request/request-form/wireless/wireless-accessory.component\";\r\nimport IntlRoamingAccessForm from \"../../external/request/request-form/wireless/intl-raoming-access.component\";\r\n\r\n//Wireline\r\nimport WirelineChangeVendorForm from \"../../external/request/request-form/wireline/wireline-change-vendor.component\";\r\nimport WirelineUpgradeCircuitForm from \"../../external/request/request-form/wireline/upgrade-circuit/wireline-upgrade-circuit.component\";\r\nimport WirelineTerminateForm from \"../../external/request/request-form/wireline/terminate-circuit/wireline-terminate-form.component\";\r\nimport WirelineOtherForm from \"../../external/request/request-form/wireline/wireline-other.component\";\r\nimport NewQuotationForm from \"../../external/request/request-form/wireline/new-quotation/wireline-quotation-form.component\";\r\nimport NewCircuitForm from \"../../external/request/request-form/wireline/new-circuit/new-circuit-display-form.component\";\r\n\r\nimport CSATModal from \"../modal-popover/csat-modal.component\";\r\nimport { csatActions } from \"../../../store/external/csat-survey-reducer/csat-survey.reducer\";\r\nimport { ORDER_STATUS } from \"../../../constants/external-constants\";\r\n\r\nimport Translation from \"../../common/translation/translation.component\";\r\nimport ButtonIcon from \"../../button\";\r\nimport { CONFIRMATION_VALUE } from \"../../../utils/constant.utils\";\r\nimport { requestDetailsActions } from \"../../../store/external/request-reducer/request-details.reducer\"\r\nimport { requestLogActions } from \"../../../store/external/request-reducer/request-log.reducer\";\r\n\r\nexport class ModalTextBody extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n const { messageBody } = this.props;\r\n return (\r\n \r\n {CSAT_SETTINGS.lbl_completionVerbiage}\r\n
\r\n :\r\n \r\n \r\n {CSAT_SETTINGS.lbl_surveyVerbiage}\r\n
\r\n
\r\n }\r\n \r\n \r\n
\r\n
\r\n {isLoading ? this.loading() : csatSurvey.length > 0 ? this.renderCsatComment() : \r\n this.renderSurvey()\r\n }\r\n {messageBody}
\r\n \r\n {messageBody}\r\n\r\n
\r\n \r\n {csatSurveyRequest.isShow ? \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst orderRequestMapStateToProps = (state) => {\r\n const { requestDetail, csatSurveyRequest } = state;\r\n return {\r\n requestDetail,\r\n csatSurveyRequest\r\n };\r\n}\r\n\r\nexport default connect(\r\n orderRequestMapStateToProps,\r\n dispatch => bindActionCreators(Object.assign({}, csatActions, requestDetailsActions, requestLogActions), dispatch)\r\n)(ModalBodyOrderRequestDetail);\r\n\r\nexport class NewRequestModalBody extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n disableROBCheckbox: false\r\n }\r\n }\r\n\r\n disableROBCheckbox = (v) => {\r\n this.setState({\r\n disableROBCheckbox: v\r\n });\r\n }\r\n\r\n renderForm = (typeId) => {\r\n \r\n let form;\r\n\r\n switch (typeId) {\r\n\r\n //Wireless Request\r\n case RequestType.newMobile:\r\n form = \r\n
\r\n \r\n \r\n
\r\n \r\n {milestone[3]?.IsCompleted && IsOwner ?\r\n \r\n handleShowSurvey(e)}\r\n >\r\n {showCSATButton ?
\r\n : (\r\n \r\n {canCancelOrder && \r\n \r\n } \r\n {canHandleRequest && \r\n
\r\n )\r\n }\r\n \r\n \r\n this.handleApprovalModal(APPROVAL_MESSAGE.REJECT)} customClassName=\"btn-custom-secondary\" labelName={this.handleApprovalModal(APPROVAL_MESSAGE.APPROVE)} isDisable={false} customClassName=\"btn-custom-secondary\" labelName={
}\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class FailMessage extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {/*{this.props.message}*/}\r\n
\r\n
\r\n \r\n {/*{this.props.message}*/}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { ModalHeaderOrderRequestDetail as ModalHeader } from './modal-head.component';\r\nimport ModalBodyOrderRequestDetail, { NewRequestModalBody, ModalTextBody, ModalRejectBody } from './modal-body.component';\r\nimport { ModalFooterExhibit1 as ModalFooter1, ConfirmationModalFooter } from './modal-footer.component';\r\nimport { SuccessMessage, FailMessage } from '../../common/success-message/success-messaage.component';\r\nimport Translation from \"../../common/translation/translation.component\";\r\nimport { NoSubscription } from '../../external/dashboard/no-subscription/no-subscription.component';\r\nimport { OTHER_MENU_FILTER, REQUEST_TYPES_ID, GET_REQUEST_HEADER_TITLE, INTERNATIONAL_REQUEST_FILTER, REQUEST_TYPE } from \"../../../constants/external-constants\";\r\nimport { NotificationModal } from \"../../common/modal/notification-modal.component\";\r\n\r\nimport './modal.component.css';\r\n\r\nexport class RequestDetailModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false,\r\n hideModal: false\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n this.handleShow();\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n const { hasCloseAction, closeAction } = this.props;\r\n\r\n if (hasCloseAction) {\r\n closeAction();\r\n }\r\n\r\n this.setState({\r\n show: false\r\n });\r\n }\r\n\r\n modifyModalTitle = (title) => {\r\n \r\n const result = OTHER_MENU_FILTER.find(obj => obj.Value === title)\r\n const result_roamingaAccess = INTERNATIONAL_REQUEST_FILTER.find(obj => obj.Value === title)\r\n\r\n if (result != null) {\r\n return `Other - ${result.Value} Request`\r\n }\r\n if (result_roamingaAccess != null) {\r\n return `International Access - ${result_roamingaAccess.Value} Request`\r\n } else {\r\n return `${title} Request`\r\n }\r\n }\r\n\r\n render() {\r\n const { title , id \r\n //data props\r\n , data\r\n , milestone\r\n , activities\r\n , comments\r\n , approverData\r\n //bool props\r\n , isLoaded\r\n , isOtherRequest\r\n , isQuotationRequest\r\n , isApproverLoaded\r\n , canCancelOrder\r\n , canHandleRequest\r\n //actions props\r\n , handleApprovalClick\r\n , handleRejectionClick\r\n , showConfirmationModal\r\n , showRejectConfirmationModal\r\n , handleCancelRejectionClick\r\n , showRejectionCommentBox\r\n , showDecisionButtons\r\n , status\r\n , statusData\r\n , selectedItem\r\n } = this.props;\r\n return (\r\n \r\n
\r\n {this.props.message}
\r\n\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport class RequestModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.ConfirmationModal = React.createRef();\r\n this.state = {\r\n show: false,\r\n requestType: \"\",\r\n requestTypeId: 0,\r\n successModalMessage: false,\r\n successMessage: \"\",\r\n failModalMessage: false,\r\n failMessage: \"\",\r\n hideRequestModal: false,\r\n disableAutoScroll: false,\r\n path: window.location.pathname,\r\n noticeNotif: {\r\n show: false,\r\n title: \"\",\r\n message: \"\",\r\n subMessage: \"\"\r\n },\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.requestTypeId == REQUEST_TYPES_ID.portIn) {\r\n this.toggleNoticeNotif(true,\r\n \r\n {this.state.successModalMessage &&\r\n \r\n }\r\n {\r\n this.state.noticeNotif.show && requestTypeId == REQUEST_TYPES_ID.portIn ?\r\n \r\n {this.state.failModalMessage &&\r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport class ConfirmationModal extends Component{\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false\r\n }\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n const { closeAction } = this.props;\r\n\r\n this.setState({\r\n show: false\r\n });\r\n \r\n if (closeAction !== undefined && closeAction !== null) {\r\n closeAction();\r\n }\r\n }\r\n\r\n render() {\r\n const { title, messageBody, confirmAction, closeLabel, confirmLabel, disabled, isUpdate } = this.props;\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nexport class RejectConfirmationModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false\r\n , rejectReason: ''\r\n }\r\n }\r\n\r\n onChangeRejectReason = (e) => {\r\n\r\n this.setState({\r\n rejectReason: e.target.value\r\n });\r\n\r\n }\r\n\r\n handleShow = () => {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n const { closeAction } = this.props;\r\n\r\n this.setState({\r\n show: false\r\n , rejectReason: \"\"\r\n });\r\n\r\n if (closeAction !== undefined && closeAction !== null) {\r\n closeAction();\r\n }\r\n }\r\n\r\n render() {\r\n const { title, messageBody, confirmAction, closeLabel, confirmLabel } = this.props;\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { DropdownButton } from \"react-bootstrap\";\r\nimport { ButtonGroup, Button } from \"react-bootstrap\";\r\nimport Dropdown from \"@restart/ui/esm/Dropdown\";\r\nimport { circuitUsageActions } from \"../../../../store/external/circuit-usage-reducer/circuit-usage.reducer\";\r\nimport { createRequestActions } from \"../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { ConfirmationModal } from \"../../../common/modal/modal.component\";\r\nimport {\r\n RAISE_REQUEST_LINKS as RaiseRequestLink\r\n , CIRCUIT_CATEGORIES as CircuitCategories\r\n , REQUEST_TYPES_ID\r\n , REQUEST_TYPE\r\n} from \"../../../../constants/external-constants\";\r\nimport { DASHBOARD_MENU as DashboardMenu, CIRCUIT_STATUS_PERSONAL as CircuitStatus } from \"../../../../utils/constant.utils\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { MATRIX_INDICATOR, ACCESS_MODULE } from \"../../../../utils/rbac-constants.utils\";\r\nimport Icon from \"../../../icon\";\r\nimport ButtonIcon from \"../../../button\"\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport \"./subscription-header.component.css\";\r\nimport { CIRCUIT_STATUS } from \"../../../../constants/external-constants\";\r\nimport { convertToDate } from '../../../../utils/helpers.utils';\r\nimport FormatDate from \"../../../common/date/format-date.component\";\r\n\r\nclass SubscriptionOverviewInfo extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showComponent: true\r\n }\r\n this.ConfirmationModal = React.createRef();\r\n }\r\n\r\n componentWillMount() {\r\n const { fetchCreateRequestItems } = this.props;\r\n\r\n fetchCreateRequestItems();\r\n }\r\n\r\n updateNavSelection = () => {\r\n var mainNavs = document.querySelectorAll(\".main-menu\");\r\n var subNav = document.querySelectorAll(\".sub-list\");\r\n subNav[0].classList.remove(\"subSelected\");\r\n mainNavs[0].classList.remove(\"isActive\");\r\n mainNavs[1].classList.add(\"isActive\");\r\n\r\n }\r\n\r\n openRequestModal = (id, type) => {\r\n const { activeMenu, history, setRequestType, setTakeActionCircuitCode } = this.props;\r\n setRequestType(id, type);\r\n setTakeActionCircuitCode();\r\n\r\n if (activeMenu == DashboardMenu.Personal) {\r\n history.push(\"Dashboard/\" + RaiseRequestLink.orderRequest.link + id);\r\n } else {\r\n history.push(\"Report/\"+RaiseRequestLink.orderRequest.link + id);\r\n }\r\n\r\n };\r\n\r\n resetUrl = () => {\r\n this.props.history.goBack();\r\n }\r\n\r\n handleGeneratePDF = e => {\r\n e.preventDefault();\r\n this.ConfirmationModal.current.handleClose();\r\n // WAITING FOR IMPLEMENTATION\r\n // const report = new JsPDF('portrait','pt','a4');\r\n // report.html(document.querySelector('#report')).then(() => {\r\n // report.save('report.pdf');\r\n // });\r\n }\r\n\r\n render() {\r\n const { userLogo, userName, phoneNumberType, userPhoneNumber, setAsPrimary, activeCircuit,\r\n planInfo, planName, vendorName, circuitStatus, simCount, simType, equipmentCount, equipmentModel, subscriptionIsPrimary, currencySymbol, circuitData, activeMenu, upgradeEligibilityDate } = this.props;\r\n\r\n const { requestTypes, isRequestTypesLoaded } = this.props.createRequest;\r\n let noAccess = activeMenu == DashboardMenu.Personal ?\r\n validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.PersonalDashboardRW])\r\n : validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyDirectReportsDashboardRW]);\r\n\r\n let actionRequestItems;\r\n if (circuitData && isRequestTypesLoaded) {\r\n\r\n var actionRequestData = circuitData.subscriptionInfo.CircuitCategoryModel.CircuitCategoryId == CircuitCategories.mobile ?\r\n (requestTypes.Wireless ? requestTypes.Wireless.ActionsAndRequests : []) : (requestTypes.Wireline ? requestTypes.Wireline.ActionsAndRequests : []);\r\n\r\n if (requestTypes.Wireless && Object.keys(requestTypes.Wireless).length) {\r\n var actionsAndRequests = null;\r\n\r\n if (actionRequestData.length) {\r\n actionsAndRequests = [\r\n actionRequestData.map((requestType) => {\r\n if (requestType.RequestTypeID === REQUEST_TYPES_ID.intlRoamingAccess) {\r\n requestType.RequestType = REQUEST_TYPE.InternationalAccess;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { circuitUsage, createRequest } = state;\r\n return {\r\n ...circuitUsage\r\n , createRequest\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, circuitUsageActions, createRequestActions),\r\n dispatch\r\n )\r\n)(SubscriptionOverviewInfo);","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport { CHARGE_TYPE_CATEGORIES as categories } from '../../../../utils/constant.utils';\r\nimport \"./usage-chart.component.css\"\r\nclass TotalSpend extends Component {\r\n render() {\r\n const { usageChart, spendChart, selectedUsageMonth, currencySymbol } = this.props;\r\n if (usageChart !== undefined && usageChart !== null && usageChart.length > 0) {\r\n var year = selectedUsageMonth.slice(4);\r\n var month = selectedUsageMonth.substring(0, 3);\r\n const usageChartDtl = usageChart.filter(uc => uc.Year === year);\r\n const usageCurrentMonth = usageChartDtl[0].UsageSpendMonths.filter(cm => cm.Month === month);\r\n const spendChartDtl = spendChart.filter(uc => uc.Year === year);\r\n const spendCurrentMonth = spendChartDtl[0].UsageSpendMonths.filter(cm => cm.Month === month);\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n {simCount <= 1 ? \"\": \"(\" + simCount + \")\" }
\r\n
\r\n {vendorName}
\r\n{simCount <= 1 ? \"\": \"(\" + simCount + \")\" }
\r\n {phoneNumberType}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {userName}
\r\n\r\n\r\n \r\n {actionRequestItems}\r\n \r\n
\r\n \r\n\r\n
\r\n {userPhoneNumber}
\r\n {subscriptionIsPrimary ?\r\n\r\n
\r\n \r\n {activeCircuit.CircuitStatus}\r\n
\r\n\r\n {equipmentCount > 0 ?\r\n
\r\n {equipmentModel}
\r\n :\r\nN/A
\r\n }\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {planInfo.length > 0 ? planInfo[0].PlanName :
\r\n
\r\n {planInfo.length > 0 ? planInfo[0].PlanName :
\r\n \r\n
\r\n \r\n
\r\n - \r\n {planInfo.length > 0 ? planInfo.map((item, id) =>
- {item.ComponentDetails} ) :
\r\n \r\n \r\n {planInfo.length > 0 ? planInfo.map((item, id) =>\r\n
\r\n
\r\n | {item.ComponentName} | \r\n{currencySymbol}{` ${item.ComponentCost}`} | \r\n
\r\n
\r\n {currencySymbol}{` ${(planInfo != null ? planInfo.reduce((a, v) => a = a + v.ComponentCost, 0) : 0)}`}
\r\nTotal
\r\n\r\n
\r\n )\r\n }\r\n }\r\n}\r\n\r\nexport default TotalSpend;","import React from 'react'\r\n\r\nconst CustomTooltip = ({ active, payload }) => { \r\n if (active && payload && payload.length) {\r\n const payload0= payload[0]!==undefined;\r\n const payload1= payload[1]!==undefined;\r\n const payload2= payload[2]!==undefined;\r\n const payload3= payload[3]!==undefined;\r\n var voice=0 ;\r\n var messaging=0;\r\n var data=0;\r\n var other = 0;\r\n for (var i = 0; i < payload.length; i++) {\r\n if (payload[i].name === 'Voice') {\r\n voice = parseFloat(payload[i].value);\r\n } else if (payload[i].name === 'Messaging') {\r\n messaging = parseFloat(payload[i].value);\r\n } else if (payload[i].name === 'Data') {\r\n data = parseFloat(payload[i].value);\r\n } else if (payload[i].name === 'Other') {\r\n other = parseFloat(payload[i].value);\r\n }\r\n }\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {categories.Voice.type}
\r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Voice.Total).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}
\r\n| {\"National\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Voice.National > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Voice.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Voice.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Voice.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"International\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Voice.International > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Voice.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Voice.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Voice.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"Roaming\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Voice.Roaming > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Voice.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Voice.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Voice.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {categories.Messaging.type}
\r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Messaging.Total).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}
\r\n| {\"National\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Messaging.National > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Messaging.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Messaging.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Messaging.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"International\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Messaging.International > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Messaging.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Messaging.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Messaging.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"Roaming\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Messaging.Roaming > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Messaging.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Messaging.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Messaging.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {categories.Data.type}
\r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Data.Total).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}
\r\n| {\"National\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Data.National > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Data.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Data.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Data.National).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"International\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Data.International > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Data.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Data.usageUom : \"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Data.International).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
| {\"Roaming\"} | \r\n{usageCurrentMonth[0].UsageTypePerCategory.Data.Roaming > 0 ? (usageCurrentMonth[0].UsageTypePerCategory.Data.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 }) + ' ' + categories.Data.usageUom :\"No available data\"} | \r\n{currencySymbol + ' ' + (spendCurrentMonth[0].UsageTypePerCategory.Data.Roaming).toLocaleString(navigator.language, { minimumFractionDigits: 2 })} | \r\n
\r\n \r\n \r\n {payload0 &&\r\n
\r\n
\r\n );\r\n }\r\n \r\n return null;\r\n };\r\n\r\n export default CustomTooltip;","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, ResponsiveContainer } from 'recharts';\r\nimport CustomTooltip from \"./custom-tooltip.component\";\r\n\r\nexport class LineChartData extends Component {\r\n render(){\r\n const { firstLineColor, toolTipEnable, secondLineColor, thirdLineColor, lineYAxis, usageSpendLineData, currencySymbol}=this.props;\r\n console.log('usageSpendLineData', usageSpendLineData)\r\n return(\r\n | Voice | \r\n{payload[0].unit + ` ${(voice).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}`} | \r\n
| Message | \r\n{payload[0].unit + ` ${(messaging).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}`} | \r\n
| Data | \r\n{payload[0].unit + ` ${(data).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}`} | \r\n
| Other | \r\n{payload[0].unit + ` ${(other).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}`} | \r\n
| Total | \r\n{payload[0].unit + ` ${(voice + messaging + data + other).toLocaleString(navigator.language, { minimumFractionDigits: 2 })}`} | \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}","export const Status_Data ={\r\n Failed:\"Failed\",\r\n Rejected:\"Rejected\",\r\n Open:\"Open\",\r\n InProgress:\"In Progress\",\r\n Pending:\"Pending\",\r\n Closed:\"Closed\",\r\n Approved:\"Approved\",\r\n Total:\"Total\"\r\n}\r\n\r\nexport const Status_BG_Data= {\r\n Failed: 'bg-red',\r\n Rejected: 'bg-red',\r\n Open: 'bg-blue',\r\n InProgress: 'bg-orange',\r\n Pending: 'bg-orange',\r\n Closed: 'bg-green',\r\n Approved: 'bg-green',\r\n Total: 'bg-blue-gray',\r\n}\r\n\r\nexport const Table_View= {\r\n Grid:\"Grid\",\r\n List:\"List\"\r\n}\r\n\r\nexport const Selected_Index ={\r\n i_Zero: \"0\",\r\n i_One: \"1\",\r\n i_Two: \"2\",\r\n i_Three: \"3\"\r\n}\r\n\r\nexport const Header_Filter_Button_Label= {\r\n AddCostCode: \"Add Cost Center\",\r\n AddGlCode: \"Add GL Code\",\r\n AddAccount: \"Add Account\",\r\n AddContract: \"Add Contract\",\r\n AddDispute: \"Add Dispute\",\r\n AddPlan: \"Add Plan\",\r\n AddFeature: \"Add Feature\",\r\n AddRate: \"Add Rate\",\r\n AddUserAccess: \"Add User Access\",\r\n AddUserRole: \"Add User Role\",\r\n AddNewVendor: \"Add New Vendor\"\r\n}","import React, { Component } from \"react\";\r\n//import Select from 'react-select'\r\nimport Icons from \"../../icon\";\r\nimport \"./chart-header-dropdown.css\"\r\nimport { InputGroup,FormControl } from \"react-bootstrap\";\r\nimport ButtonIcon from '../../button'\r\nimport { Table_View } from \"../../../constants/internal-constants\";\r\nexport class ChartHeaderDropdown extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = ({ \r\n showClass:\"\",\r\n })\r\n this.onChangeUsageMonth = this.onChangeUsageMonth.bind(this);\r\n }\r\n totalCount() {\r\n return ( \r\n \r\n {(this.props.countData).map((val,id) => {\r\n return (\r\n
\r\n )\r\n }\r\n\r\n totalVal () {\r\n return (\r\n \r\n
\r\n )\r\n })}\r\n \r\n {val.total}
\r\n {val.description}
\r\n \r\n
\r\n )\r\n }\r\n \r\n hoverOver() {\r\n this.setState({showClass:\"showDetails\"})\r\n }\r\n \r\n hoverLeave() {\r\n this.setState({showClass:\"\"})\r\n }\r\n\r\n onChangeUsageMonth(event) {\r\n const { onUsageMonthSelect } = this.props;\r\n onUsageMonthSelect(event.label);\r\n }\r\n\r\n onGridView() {\r\n this.props.viewType(Table_View.Grid)\r\n }\r\n\r\n onListView() {\r\n this.props.viewType(Table_View.List)\r\n }\r\n\r\n render(){\r\n const { productDetails, haveOneIcone, iconInfo, haveDropdown, displayValue, totalCount, haveInput, oneIcon, circleIcon, haveIconInfo, circleFirstIcon, circleSecondIcon, haveLedger, selectedUsageMonth, usageMonthOptions, isMonthlySpendTitle, isUsageChartTitle }=this.props;\r\n return(\r\n \r\n
\r\n {this.props.displayValue}
\r\n \r\n\r\n
\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport TotalSpend from \"./total-spend.component\";\r\nimport { LineChartData } from \"./line-chart.component\";\r\nimport { ChartHeaderDropdown } from \"../../../common/data-header/chart-header-dropdown.component\";\r\nimport Translation from '../../../common/translation/translation.component';\r\n\r\nclass UsageChart extends Component {\r\n render(){ \r\n const { usageChart, spendChart, firstLineColor, secondLineColor, thirdLineColor, forthLineColor,\r\n lineYAxis, graphHeader, graphFooter, dropdownValues, productDetails, selectedUsageMonth,\r\n onUsageMonthSelect, usageMonthOptions, usageSpendLineData, currencySymbol } = this.props;\r\n return (\r\n \r\n
\r\n { totalCount !== undefined ? this.totalCount() : \"\" }\r\n { displayValue !== undefined ? this.totalVal() : \"\" }\r\n \r\n
\r\n \r\n {isMonthlySpendTitle ?\r\n
\r\n {haveLedger ?\r\n {this.props.spendHeaderName}
: \"\" }\r\n {isUsageChartTitle ?\r\n{this.props.usageHeaderName}
: \"\" }\r\n {haveIconInfo ? \r\n\r\n
\r\n : \"\"\r\n }\r\n \r\n {productDetails!==undefined ? productDetails.map((item,id)=>
\r\n {item}
) : \"\"}\r\n\r\n
\r\n : \"\"\r\n }\r\n \r\n {\"Statistics for the month of \" + selectedUsageMonth}\r\n
\r\n \r\n {haveInput ? \r\n \r\n \r\n \r\n \r\n : \"\"\r\n }\r\n {circleIcon ?\r\n <>\r\n \r\n \r\n \r\n : \"\"\r\n }\r\n
\r\n {haveOneIcone ?\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default UsageChart;\r\n","import React from 'react';\r\nimport { Text } from 'recharts';\r\n\r\nexport const CustomContent = ({ active, payload }) => { \r\n if (active && payload && payload.length) {\r\n return (\r\n {graphHeader}
\r\n\r\n {spendChart.map((item,id)=>\r\n
: \"\" } \r\n {item.Year}
\r\n )}\r\n \r\n
\r\n )\r\n }\r\n return null;\r\n};\r\n\r\nexport const CustomTooltipWhite = ({ active, payload, label }) => {\r\n console.log('payload', payload); \r\n if (active && payload && payload.length) {\r\n\r\n const payload0= payload[0]!==undefined;\r\n const payload1= payload[1]!==undefined;\r\n const payload2= payload[2]!==undefined;\r\n const payload3= payload[3]!==undefined;\r\n const payload4= payload[4]!==undefined;\r\n const payload5= payload[5]!==undefined;\r\n\r\n return (\r\n { `${payload[0].value}`}
\r\n \r\n {`${label}`} \r\n \r\n \r\n {payload0 && \r\n
\r\n
\r\n )\r\n }\r\n return null;\r\n};\r\n\r\nexport const SingleBarToolTip = ({active, payload}) =>{\r\n if (active && payload && payload.length) {\r\n const data = payload[0].payload;\r\n return (\r\n | \r\n {`${payload[0].name}: `} \r\n {`${payload[0].value}`} \r\n | \r\n
| \r\n {`${payload[1].name}: `} \r\n {`${payload[1].value}`} \r\n | \r\n
| \r\n {`${payload[2].name}: `} \r\n {`${payload[2].value}`} \r\n | \r\n
| \r\n {`${payload[3].name}: `} \r\n {`${payload[3].value}`} \r\n | \r\n
| \r\n {`${payload[4].name}: `} \r\n {`${payload[4].value}`} \r\n | \r\n
| \r\n {`${payload[5].name}: `} \r\n {`${payload[5].value}`} \r\n | \r\n
\r\n
\r\n );\r\n} \r\nreturn null\r\n}\r\n\r\n\r\nexport const WrappedXAxis = (props) => {\r\n const { x, y, payload } = props;\r\n const words = payload.value.split(' ');\r\n\r\n return (\r\n {`Charge Type: ${data.ChargeType}`}
\r\n{`Gross Amount: ${data.GrossAmount}`}
\r\n{`Net Amount: ${data.NetAmount}`}
\r\n{`Tax: ${data.Tax}`}
\r\n\r\n {key.color !== undefined ? : \"\"} \r\n {' ' + key.name}\r\n
\r\n )\r\n }) :\r\n \"\"\r\n } \r\n \r\n \r\n \r\n \r\n \r\n }/>\r\n \r\n {(this.props.barData).map((v, i) => {\r\n return \r\n \r\n {this.props.graphFooter!==undefined ?\r\n
\r\n ) \r\n }\r\n}\r\n\r\n\r\nexport class SingleBarGraph extends Component {\r\n CustomXAxisTick = ({ x, y, payload }: any) => {\r\n if (payload && payload.value) {\r\n return (\r\n \r\n {this.props.graphFooter.map((item, id) =>\r\n
: \"\" }\r\n {item.Year}
\r\n )}\r\n\r\n {this.props.data.length > 0 ?\r\n \r\n \r\n \r\n \r\n : \r\n
);\r\n }\r\n}\r\n\r\n\r\nexport class StackedBarChart extends Component {\r\n\r\n render() { \r\n return (\r\n \r\n
}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {(this.props.barData).map((v, i, {length}) => {\r\n const key = v.dataKey !== undefined ? v.dataKey : v.name;\r\n if ( i + 1 === length) {\r\n return \r\n \r\n {this.props.graphFooter!==undefined ?\r\n
\r\n ) \r\n }\r\n}\r\n\r\nexport class BarGraphWithLabel extends Component {\r\n\r\n render() { \r\n return (\r\n \r\n
: \"\"\r\n }\r\n {this.props.graphFooter}
\r\n \r\n \r\n \r\n \r\n \r\n {(this.props.barData).map((v, i) => {\r\n const key = v.dataKey !== undefined ? v.dataKey : v.name;\r\n return (\r\n \r\n \r\n )\r\n\r\n })} \r\n \r\n \r\n {this.props.graphFooter !== undefined ?\r\n
\r\n ) \r\n }\r\n}\r\n\r\nexport class HorizontalBarGraph extends Component {\r\n render() { \r\n const withMargin50 = this.props.withMargin ? \"margin-right50\" : \"\";\r\n\r\n return (\r\n \r\n
:\r\n \"\"\r\n }\r\n {this.props.graphFooter}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.graphFooter !== undefined ?\r\n
\r\n ) \r\n }\r\n}\r\n\r\n","import React, { Component } from 'react';\r\nimport moment from 'moment';\r\nimport { BarGraph } from '../../../common/graph/bar-graph.component'\r\nimport './monthly-spend.component.css';\r\nimport { ChartHeaderDropdown } from '../../../common/data-header/chart-header-dropdown.component';\r\nimport { CHARGE_TYPE_CATEGORIES as categories } from '../../../../utils/constant.utils';\r\nimport Translation from '../../../common/translation/translation.component';\r\n\r\nconst barData = [{ name: categories.Voice.type, color: categories.Voice.spendDetailsColor },\r\n { name: categories.Messaging.type, color: categories.Messaging.spendDetailsColor },\r\n { name: categories.Data.type, color: categories.Data.spendDetailsColor },\r\n { name: categories.Other.type, color: categories.Other.spendDetailsColor }]\r\n\r\nvar date = new Date()\r\nvar currMonth = moment.utc(date).format(\"MMM\");\r\n\r\nclass PersonalPage extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = ({\r\n spendMonth : [], \r\n selectVal: \"\"\r\n })\r\n }\r\n handleChange = (e) => {\r\n this.setState({ \r\n selectVal: e.target.value\r\n });\r\n }\r\n render() {\r\n const { spendChart, usageSpendBarData, currencySymbol, usageSpendCurrMonthTotal } = this.props;\r\n return (\r\n \r\n
:\r\n \"\"\r\n }\r\n {this.props.graphFooter}
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default PersonalPage;","import React from 'react'\r\nimport Translation from \"../../../components/common/translation/translation.component\";\r\nconst LineChartToolTip = ({ active, payload, label, invoiceMonth }) => {\r\n if (invoiceMonth.some(item => item.InvoiceMonth === payload[0]?.payload?.Month)) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {
\r\n \r\n
\r\n );\r\n }\r\n else {\r\n return (\r\n {`${label}`}
\r\n{`Net Amount: ${payload[0]?.payload?.TotalNetAmount}`}
\r\n{`Gross Amount: ${payload[0]?.payload?.TotalGrossAmount}`}
\r\n\r\n
\r\n );\r\n \r\n }\r\n };\r\n\r\n export default LineChartToolTip;","\r\nimport React, { Component } from \"react\";\r\nimport \"./custom-graph.component.css\"\r\nexport default class CustomLegend extends Component {\r\n render() {\r\n const { payload, ledger } = this.props;\r\n return (\r\n \r\n {payload.map((entry, index) => {\r\n const correspondingLedgerItem = ledger.find(item => item.name === entry.dataKey);\r\n return (\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport {\r\n LineChart,\r\n Line,\r\n XAxis,\r\n YAxis,\r\n CartesianGrid,\r\n Tooltip,\r\n Legend,\r\n ResponsiveContainer\r\n} from 'recharts';\r\nimport LineChartToolTip from \"./line-chart-tooltip.component\";\r\nimport Icon from \"../../icon\";\r\nimport Translation from \"../../../components/common/translation/translation.component\";\r\nimport CustomLegend from \"./custom-legend.component\";\r\n\r\nclass UsageLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.chartRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setRef(this.chartRef);\r\n }\r\n\r\n render() {\r\n const { ledger = [], invoiceMonth } = this.props;\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n\r\n
\r\n \r\n {correspondingLedgerItem.label}\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default UsageLineChart;\r\n","import React, {Component} from \"react\";\r\nimport UsageLineChart from \"../../../common/graph/line-chart.compnent\";\r\nimport \"../personal/monthly-trend.component.css\";\r\nclass MonthlyTrend extends Component {\r\n render() { \r\n return ( \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Usage Spend Monthly Trend
\r\n\r\n ({ dataKey: item.name }))}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n NET SPEND FOR\r\n {this.props.usageSpendBarData.Date}\r\n ${this.props.usageSpendBarData.TotalNetAmount}\r\n
\r\n \r\n GROSS SPEND FOR\r\n {this.props.usageSpendBarData.Date}\r\n ${this.props.usageSpendBarData.TotalGrossAmount}\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default MonthlyTrend\r\n","const actionTypeIdentifier = '5D91A4PQ-MX5N-3364-M29F-49D7F3AD9NX4';\r\n//PowerPoint\r\nexport const exportPowerPointSuccess =`EXPORT-POWER-POINT-SUCCESS-${actionTypeIdentifier}`;\r\nexport const exportPowerPointFailure = `EXPORT-POWER-POINT-FAILURE-${actionTypeIdentifier}`;\r\nexport const exportToPowerPointStart = `EXPORT-POWER-POINT-START-${actionTypeIdentifier}`;\r\n\r\n//PDF\r\nexport const exportPdfSuccess = `EXPORT-PDF-SUCCESS-${actionTypeIdentifier}`;\r\nexport const exportPdfFailure = `EXPORT-PDF-FAILURE-${actionTypeIdentifier}`;\r\n\r\n\r\n\r\n\r\n","import { httpExtract } from '../../../utils/api.utils';\r\nimport { saveAs } from 'file-saver';\r\nimport { toPng } from 'html-to-image';\r\n\r\nimport {\r\n exportPowerPointSuccess,\r\n exportPowerPointFailure,\r\n exportPdfSuccess,\r\n exportPdfFailure\r\n} from '../../../constants/model-reducers/external/extract/extract.setting';\r\n\r\nconst initialState = {\r\n isExportLoaded: false,\r\n isExportError: null,\r\n };\r\n\r\n export const extractAction = {\r\n exportToPowerPoint: (chartElements, circuitCode) => {\r\n return async (dispatch) => { \r\n const fileName = `Usage Spend of ` + circuitCode;\r\n function dataUrlToBlob(dataUrl) {\r\n const base64Data = dataUrl.split(\",\")[1];\r\n const byteCharacters = atob(base64Data);\r\n const byteNumbers = new Array(byteCharacters.length); \r\n for (let i = 0; i < byteCharacters.length; i++) {\r\n byteNumbers[i] = byteCharacters.charCodeAt(i);\r\n }\r\n const byteArray = new Uint8Array(byteNumbers);\r\n const blob = new Blob([byteArray], { type: 'image/png' }); \r\n return blob;\r\n }\r\n \r\n try {\r\n const formData = new FormData(); \r\n for(let i=0; i\r\n {/* this.setState((prev) => ({ toggle: !prev.toggle }))} customClassName={`${!this.props.isReadOnly ? \"header-option-list\" : \"\"} header-filter-button`} labelName=\"Extract\" disabled={this.props.loading}\r\n isDisable={this.props.isReadOnly && !this.props.isReadAndExtractOnly && !this.props.isReadAndWrite}/>\r\n {\r\n this.state.toggle && !this.props.isReadOnly ? \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n return {};\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, extractAction),\r\n dispatch\r\n )\r\n) (CustomExportButton);","import React, { Component } from \"react\";\r\nimport DATEPICKER_OR from \"../custom-form/custom-date-picker.component\";\r\nimport Moment from 'moment';\r\nimport CustomExportButton from \"../custom-form/custom-export-button.component\";\r\nimport Translation from '../../common/translation/translation.component';\r\nimport \"../graph/usagespend-layout.component.css\"\r\nclass UsageSpendLayout extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n startDate:null,\r\n dateFormat:\"MMMM yyyy\"\r\n }\r\n }\r\n\r\n SelectDatePicker(date) { \r\n const formatDate = Moment(date).format(this.state.dateFormat); \r\n this.setState({\r\n startDate: date\r\n }); \r\n this.props.selectDatePicker(formatDate);\r\n }\r\n\r\n\r\n render(){\r\n return(\r\n \r\n
\r\n :\r\n null\r\n }\r\n - \r\n
- PowerPoint \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default UsageSpendLayout;","import React from 'react'\r\n\r\nconst HorizontalChartToolTip = ({ active, payload, label }) => { \r\n if (active && payload && payload.length) {\r\n return (\r\n \r\n \r\n
\r\n {this.props.children}\r\n \r\n
\r\n \r\n
\r\n );\r\n } \r\n return null;\r\n };\r\n\r\n export default HorizontalChartToolTip;","import React, {Component} from \"react\";\r\nimport { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer, LabelList } from 'recharts';\r\nimport HorizontalChartToolTip from \"./horizontal-chart-tooltip.component\";\r\nimport Icon from \"../../icon\";\r\nimport Translation from \"../../../components/common/translation/translation.component\";\r\nimport Moment from 'moment';\r\n\r\nclass UsageHorizontalChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.chartRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setRef(this.chartRef);\r\n }\r\n\r\n DetailsInfo() {\r\n \r\n if(this.props.printData)\r\n {\r\n return (\r\n {`${label}`}
\r\n{`Value: ${payload[0].value}`}
\r\n \r\n
\r\n )\r\n } else{\r\n return (\r\n {`Breakdown of Usage for the ${Moment.utc(this.props.dateCurrentMonth.Date).format('MMMM yyyy') ? Moment.utc(this.props.dateCurrentMonth.Date).format('MMMM yyyy') : \"\"}`}
\r\n\r\n
\r\n )\r\n }; \r\n }\r\n\r\n render() {\r\n \r\n return (\r\n Breakdown of Usage for the {Moment.utc(this.props.dateCurrentMonth.Date).format('MMMM yyyy')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default UsageHorizontalChart\r\n","import React, {Component} from \"react\";\r\nimport UsageHorizontalChart from \"./horizontal-chart.component\";\r\n\r\n\r\nclass BreakdownUsageTrend extends Component {\r\n render() { \r\n return (\r\n \r\n {this.props.data.length > 0 ?\r\n
\r\n \r\n
\r\n :\r\n \r\n
\r\n
\r\n
\r\n {this.DetailsInfo()}
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.DetailsInfo()}\r\n
\r\n
\r\n
\r\n
\r\n }\r\n \r\n
\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default BreakdownUsageTrend\r\n","import React from 'react';\r\n\r\nconst Avatar = ({ className, src, alt, size, text }) => {\r\n const displayText = text ? text.charAt(0).toUpperCase() : '';\r\n return (\r\n \r\n \r\n \r\n :
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { inventoryUsageSpend, inventoryCircuitInvoice } = state;\r\n\r\n return {\r\n inventoryCircuitInvoice,\r\n inventoryUsageSpend\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, inventoryUsageSpendActions, inventoryCircuitInvoiceActions),\r\n dispatch\r\n )\r\n)(SubscriptionHeader);","import React, { Component } from \"react\";\r\nimport Icon from \"../../../icon\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { DASHBOARD_TAB } from \"../../../../utils/constant.utils\";\r\nimport ProfileImage from \"../../../../../img/AT&T.png\";\r\nimport Avatar from \"../../../common/avatar/Avatar\";\r\nimport { CIRCUIT_STATUS } from \"../../../../constants/external-constants\";\r\n\r\nexport class VerticalTab extends Component {\r\n\r\n getLocationAndZipCode = (location, zipCode) => {\r\n var locationAndZipCode = \"\";\r\n if (location && location.trim() !== \"\") locationAndZipCode = location\r\n if (zipCode && zipCode.trim() !== \"\") locationAndZipCode = `${location} ${zipCode}`;\r\n\r\n return locationAndZipCode;\r\n }\r\n\r\n getCityAndCountryCode = (city, countryCode) => {\r\n var cityAndCountryCode = \"\";\r\n if (city && city.trim() !== \"\") cityAndCountryCode = city\r\n if (countryCode && countryCode.trim() !== \"\") cityAndCountryCode = `${cityAndCountryCode}, ${countryCode}`;\r\n\r\n return cityAndCountryCode;\r\n }\r\n \r\n render() { \r\n const { tabItem, tabCount, toggleTab, onClickItem, stringSearched, planInfo, equipmentModel } = this.props\r\n if (tabItem.isFetching) {\r\n return \r\n \r\n
\r\n {\r\n inventoryUsageSpend.isInventoryUsageSpendLoaded ?\r\n \r\n 
\r\n
\r\n \r\n
\r\n {title}
\r\n\r\n
\r\n {Moment.utc(new Date()).format('ddd, MMM DD, YYYY')}
\r\n |\r\n{Moment().format('hh:mm A')}
\r\n\r\n {\r\n this.imageRef.monthlyTrendRef = ref;\r\n if (this.monthlyTrendRef && this.breakdownUsageTrendRef) {\r\n this.setState({ loading: false });\r\n }\r\n }}\r\n /> \r\n {\r\n this.imageRef.breakdownUsageTrendRef = ref;\r\n if (this.breakdownUsageTrendRef && this.breakdownUsageTrendRef) {\r\n this.setState({ loading: false });\r\n }\r\n }}\r\n />\r\n
\r\n Loading subscription and devices...
\r\n } else if (tabItem.Data.length === 0 && stringSearched.length !== 0) {\r\n return\r\n {toggleTab === DASHBOARD_TAB.MobileWireless ? \r\n
\r\n )\r\n );\r\n } \r\n }\r\n}","import React, { Component } from \"react\";\r\nimport Translation from '../../../common/translation/translation.component'\r\nimport { removeDomainName } from '../../../../utils/helpers.utils';\r\nimport Avatar from \"../../../common/avatar/Avatar\";\r\n\r\nexport class ActiveSubscriber extends Component {\r\n\r\n \r\n render() {\r\n const { onClickItemActiveSubscriber, otherSubscribersList } = this.props;\r\n return (\r\n otherSubscribersList.length <= 0 ?\r\n {(item.PlanName === null || item.PlanName === '') ?
\r\n {(item.DeviceName === null || item.DeviceName === '') ?
\r\n \r\n {item.IsPrimaryNumber ?\r\n
\r\n {item.CircuitCode}
\r\n\r\n {item.CircuitStatus}\r\n
\r\n{item.VendorName}
\r\n{(item.PlanName === null || item.PlanName === '') ?
\r\n {(item.DeviceName === null || item.DeviceName === '') ?
\r\n \r\n {item.IsPrimaryNumber ?\r\n \r\n \r\n
\r\n \r\n }\r\n {toggleTab === DASHBOARD_TAB.FixedLineWireLine ? \r\n <>\r\n {this.getLocationAndZipCode(item.Location, item.LocationZip)}
\r\n{this.getCityAndCountryCode(item.LocationCity, item.LocationCountryCode)}
\r\n : \"\"}\r\n
\r\n
\r\n \r\n )\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport './loading-text.component.css'\r\nexport class LoadingText extends Component {\r\n render() {\r\n const {loadingLabel}=this.props;\r\n return(\r\n {item.FullName}
\r\n{item.EId}
\r\n{item.Location}
\r\n \r\n
\r\n )\r\n }\r\n}","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport Autosuggest from 'react-autosuggest';\r\nimport { InputGroup } from \"react-bootstrap\";\r\nimport Icons from '../../../../app/components/icon';\r\nimport { debounce } from 'throttle-debounce';\r\nimport AutoSuggestSpinner from '../../../../../src/img/icon-circuit-loader.gif';\r\nimport Translation from '../../common/translation/translation.component';\r\nimport { TRANSLATIONS as translation } from '../../../utils/constant.utils';\r\nimport './user-search.component.css';\r\n\r\nconst escapeRegexCharacters = (str) => {\r\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\r\n};\r\n\r\nconst getSuggestions = (value, userList) => {\r\n const escapedValue = escapeRegexCharacters(value.trim());\r\n\r\n if (escapedValue === '') {\r\n return [];\r\n }\r\n\r\n const regex = new RegExp('\\\\b' + escapedValue, 'i');\r\n\r\n return userList.filter((user) => regex.test(getSuggestionValue(user)) || regex.test(getSuggestionValueEid(user)) || regex.test(getSuggestionValueFirstLastName(user))\r\n || regex.test(getSuggestionValueLastFirstName(user)));\r\n};\r\n\r\nconst getSuggestionValue = (suggestion) => suggestion.FullName;\r\nconst getSuggestionValueEid = (suggestion) => suggestion.EId;\r\nconst getSuggestionValueFirstLastName = (suggestion) => suggestion.FirstLastName;\r\nconst getSuggestionValueLastFirstName = (suggestion) => suggestion.LastFirstName;\r\n\r\nconst renderSuggestion = (suggestion, { query }) => {\r\n const reg = new RegExp(query, 'gi');\r\n const fullName = suggestion.FullName.replace(reg, (match) => '' + matchCase(query, match) + '');\r\n\r\n return (\r\n {loadingLabel}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n
\r\n );\r\n};\r\n\r\nfunction matchCase(text, pattern) {\r\n var result = '';\r\n\r\n for (var i = 0; i < text.length; i++) {\r\n var c = text.charAt(i);\r\n var p = pattern.charCodeAt(i);\r\n\r\n if (p >= 65 && p < 65 + 26) {\r\n result += c.toUpperCase();\r\n } else {\r\n result += c.toLowerCase();\r\n }\r\n }\r\n\r\n return result;\r\n}\r\n\r\nfunction renderSuggestionsContainer({ containerProps, children }) {\r\n return (\r\n children == undefined ? \"\" :\r\n \r\n \r\n
\r\n{suggestion.EId}
\r\n{suggestion.Location}
\r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\nclass UserSearch extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n value: '',\r\n suggestions: [],\r\n isFetching: true,\r\n showSuggestions: true,\r\n };\r\n\r\n this.fetchOnDemandDebounced = debounce(500, this.fetchOnDemand);\r\n }\r\n\r\n clearField = () => {\r\n this.setState({\r\n value: '',\r\n });\r\n };\r\n\r\n fetchOnDemand = (val) => {\r\n this._fetch(val);\r\n };\r\n\r\n _fetch = async (val) => {\r\n val = val.trim();\r\n\r\n var res = await this.props.onDemandAction(val);\r\n if (res != null) {\r\n res = res.map((a) => ({\r\n EmployeeId: a.EmployeeId,\r\n EId: a.Eid,\r\n FullName: a.Name,\r\n Location: a.LocationSiteCityCountry,\r\n FirstLastName: a.FirstLastName,\r\n LastFirstName: a.LastFirstName\r\n\r\n }));\r\n\r\n this.setState({\r\n suggestions: res,\r\n });\r\n }\r\n\r\n this.setState({\r\n isFetching: true,\r\n }); \r\n };\r\n\r\n onChange = (event, { newValue, method }) => {\r\n const showSuggestions = method === 'type';\r\n\r\n if (this.props.onDemandAction) {\r\n this.setState(\r\n {\r\n value: newValue,\r\n showSuggestions: showSuggestions,\r\n },\r\n () => {\r\n if (showSuggestions) {\r\n this.fetchOnDemandDebounced(this.state.value);\r\n }\r\n } \r\n );\r\n } else {\r\n this.setState({\r\n value: newValue,\r\n showSuggestions: showSuggestions\r\n });\r\n }\r\n };\r\n\r\n onSuggestionsFetchRequested = ({ value }) => {\r\n this.setState({\r\n suggestions: getSuggestions(value, this.props.list),\r\n });\r\n };\r\n\r\n onSuggestionsClearRequested = () => {\r\n this.setState({\r\n suggestions: []\r\n });\r\n };\r\n\r\n onSuggestionSelected = (event, { suggestion }) => {\r\n this.props.action(suggestion);\r\n };\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n render() {\r\n const { value, suggestions, isFetching } = this.state;\r\n const { onDemandAction, disable, maxLength } = this.props;\r\n const inputProps = {\r\n placeholder: this.toLocaleLanguage('enterSearchValue'),\r\n value,\r\n onChange: this.onChange,\r\n disabled: disable,\r\n maxLength: maxLength\r\n };\r\n\r\n return (\r\n \r\n
\r\n {children}\r\n \r\n\r\n \r\n 
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const { translation } = state;\r\n return {\r\n ...translation,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, null, null, { forwardRef: true })(UserSearch);\r\n","import React from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { Component } from \"react\";\r\nimport './device-inventory.component.css';\r\nimport { ListTab } from \"../../../common/list-tab/list-tab.component\";\r\nimport { VerticalTab } from \"./vertical-tab.component\";\r\nimport { ActiveSubscriber } from \"./active-subscriber.component\";\r\nimport { InputGroup, FormControl } from \"react-bootstrap\";\r\nimport Icons from \"../../../icon\";\r\nimport Button from \"@restart/ui/esm/Button\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS as translation } from '../../../../utils/constant.utils';\r\nimport { LoadingText } from \"../../../common/loading-text/loading-text-component\";\r\nimport UserSearch from '../../../common/user-search/user-search.component';\r\nimport { DASHBOARD_MENU, DASHBOARD_TAB, USER_ROLES_ID } from '../../../../utils/constant.utils';\r\nimport { removeDomainName, validateAccessModule } from '../../../../utils/helpers.utils';\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from '../../../../utils/rbac-constants.utils';\r\nimport { MAX_LENGTH, DISPLAY_ITEM } from \"../../../../constants/external-constants\";\r\nimport Avatar from \"../../../common/avatar/Avatar\";\r\n\r\nclass DeviceInventory extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state={\r\n isSearchAllAcct: false,\r\n toggleTab: DASHBOARD_TAB.MobileWireless,\r\n verticalToggleTab: \"0\",\r\n activeSubscriberEmployeeId: 0,\r\n curActiveSubscriberEmployeeId: 0,\r\n tabCount: 5,\r\n showNumberOfSubscribers: DISPLAY_ITEM.five,\r\n tabCountLine: 5,\r\n curCircuidId: 0,\r\n mobileSearchString: \"\",\r\n homeSearchString: \"\",\r\n MyDirectReportSearchedName: \"\",\r\n enterSearchValue: false,\r\n isPersonalTabVisited: false,\r\n isMyDirectReportTabVisited: false,\r\n autoSuggestSubscriber: [],\r\n userSearchHasValue: false,\r\n userSearchValue: \"\",\r\n hideAutoSuggestList: false,\r\n }\r\n this.userSearch = null;\r\n this.clearUserSearch = this.clearUserSearch.bind(this);\r\n this.horizontalTab = this.horizontalTab.bind(this);\r\n this.setMyDashboardTab = this.setMyDashboardTab.bind(this);\r\n this.renderAllSubscribers = this.renderAllSubscribers.bind(this);\r\n this.onClickSubscriber = this.onClickSubscriber.bind(this);\r\n this.handleAutoSuggestClick = this.handleAutoSuggestClick.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.horizontalTab();\r\n this.activeSubscriberSelected();\r\n this.setMyDirectreportSearchAllAcct();\r\n this.handleAutoSuggestClick();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.clearUserSearch();\r\n }\r\n\r\n componentDidUpdate() {\r\n const { activeMenu, selectedUser } = this.props;\r\n if (activeMenu === DASHBOARD_MENU.Personal && !this.state.isPersonalTabVisited) {\r\n this.setMyDashboardTab(true, false);\r\n } else if (activeMenu === DASHBOARD_MENU.MyDirectReport && !this.state.isMyDirectReportTabVisited){\r\n this.setMyDashboardTab(false, true);\r\n }\r\n if (activeMenu === DASHBOARD_MENU.MyDirectReport && selectedUser !== undefined) {\r\n if (selectedUser.FullName !== this.state.MyDirectReportSearchedName) {\r\n this.setState({\r\n MyDirectReportSearchedName: selectedUser.FullName,\r\n tabCount: DISPLAY_ITEM.five\r\n });\r\n } \r\n }\r\n this.verticalTabSelected();\r\n this.activeSubscriberSelected();\r\n }\r\n\r\n setMyDashboardTab(isPersonalTabVisited, isMyDirectReportTabVisited) {\r\n this.setState({\r\n isPersonalTabVisited: isPersonalTabVisited,\r\n isMyDirectReportTabVisited: isMyDirectReportTabVisited,\r\n toggleTab: DASHBOARD_TAB.MobileWireless,\r\n verticalToggleTab: \"0\",\r\n activeSubscriberEmployeeId: 0,\r\n curActiveSubscriberEmployeeId: 0,\r\n tabCount: 5,\r\n tabCountLine: 5,\r\n curCircuidId: 0,\r\n mobileSearchString: \"\",\r\n homeSearchString: \"\",\r\n MyDirectReportSearchedName: \"\",\r\n enterSearchValue: false,\r\n },() => {\r\n this.props.clearSelectedUser();\r\n this.horizontalTab();\r\n this.activeSubscriberSelected();\r\n this.setMyDirectreportSearchAllAcct();\r\n }); \r\n }\r\n \r\n setMyDirectreportSearchAllAcct() {\r\n const searchAllRoleIds = [USER_ROLES_ID.admin.toString()];\r\n var roleId = sessionStorage.UserRoleID; \r\n var isAllowSearchAll = searchAllRoleIds.includes(roleId);\r\n if (isAllowSearchAll) {\r\n this.setState({\r\n isSearchAllAcct: true\r\n });\r\n }\r\n }\r\n\r\n horizontalTab(element) {\r\n var selectedTabIndex = DASHBOARD_TAB.MobileWireless;\r\n\r\n if(element)\r\n {\r\n const selectedTab = element.currentTarget.innerText.trim();\r\n const fixLineWirellineTab = this.toLocaleLanguage(\"home_landline\").trim();\r\n if (fixLineWirellineTab.includes(selectedTab))\r\n selectedTabIndex = DASHBOARD_TAB.FixedLineWireLine;\r\n }\r\n\r\n if (!element || this.state.toggleTab !== selectedTabIndex) {\r\n this.setState({\r\n toggleTab: selectedTabIndex,\r\n });\r\n this.props.ontabSelected(selectedTabIndex);\r\n document.querySelectorAll(\".tabActive\").forEach(\r\n (el) => el.classList.remove(\"tabActive\"));\r\n document.querySelectorAll(\".inventory-tab .tab-list-container .list-tab\").forEach((el) => {\r\n if(selectedTabIndex === el.attributes.getNamedItem(\"data-index\").nodeValue) {\r\n el.classList.add(\"tabActive\");\r\n }\r\n });\r\n this.verticalTabSelected();\r\n }\r\n }\r\n\r\n verticalTabSelected() {\r\n const { activeCircuit } = this.props;\r\n const verticalList = document.querySelectorAll(\".vertical-tab-item\");\r\n for (let i = 0; verticalList.length > i; i++) {\r\n verticalList[i].classList.remove(\"vertical-tab-active\");\r\n if (activeCircuit && parseInt(verticalList[i].getAttribute(\"data-index\")) === activeCircuit.CircuitId) {\r\n verticalList[i].classList.add(\"vertical-tab-active\");\r\n }\r\n }\r\n }\r\n\r\n onClickItem = (element) => {\r\n var verticalListActive = document.querySelectorAll(\".vertical-tab-active\");\r\n verticalListActive.forEach((el) => el.classList.remove(\"vertical-tab-active\"));\r\n const circuitId = element.currentTarget.attributes.getNamedItem(\"data-index\").nodeValue;\r\n this.setState({\r\n verticalToggleTab: circuitId,\r\n }, () => this.props.onActiveCiruitSelected(parseInt(circuitId)));\r\n }\r\n\r\n activeSubscriberSelected() {\r\n const verticalList = document.querySelectorAll(\".active-subscriber-item\");\r\n for (let i = 0; verticalList.length > i; i++) {\r\n verticalList[i].classList.remove(\"active-subscriber-active\");\r\n if (verticalList[i].getAttribute(\"data-index\") === this.state.curActiveSubscriberEmployeeId) {\r\n verticalList[i].classList.add(\"active-subscriber-active\");\r\n }\r\n }\r\n }\r\n\r\n onClickItemActiveSubscriber = (element) => {\r\n const employeeId = element.currentTarget.attributes.getNamedItem(\"data-index\").nodeValue;\r\n \r\n if (this.state.curActiveSubscriberEmployeeId !== employeeId && this.state.activeSubscriberEmployeeId !== employeeId) {\r\n if (this.props.otherSubscribersList.find((y) => y.EmployeeId === parseInt(employeeId))) {\r\n var selectedUser = this.props.otherSubscribersList.find((y) => y.EmployeeId === parseInt(employeeId));\r\n this.props.setSelectedUser(selectedUser); \r\n }\r\n document.querySelectorAll(\".active-subscriber-active\").forEach(\r\n (el) => el.classList.remove(\"active-subscriber-active\"));\r\n this.setState({\r\n curActiveSubscriberEmployeeId: employeeId,\r\n activeSubscriberEmployeeId: employeeId\r\n }, () => {\r\n // this.props.clearActiveCircuit();\r\n // this.props.clearCircuitData();\r\n this.horizontalTab();\r\n this.activeSubscriberSelected();\r\n });\r\n }\r\n }\r\n\r\n loadFunctionWireless() {\r\n const { tabItem } = this.props;\r\n if (tabItem.Data.length > this.state.tabCount) {\r\n this.setState({ tabCount: this.state.tabCount + 5 })\r\n }\r\n }\r\n\r\n loadFunctionWireline() {\r\n const { lineList } = this.props;\r\n if (lineList.Data.length > this.state.tabCountLine) {\r\n this.setState({ tabCountLine: this.state.tabCountLine + 5 })\r\n } else {\r\n this.setState({ tabCountLine: 5 })\r\n window.scrollTo(0, 0);\r\n }\r\n }\r\n\r\n verticalTabContent() {\r\n switch (this.state.toggleTab) {\r\n case DASHBOARD_TAB.MobileWireless:\r\n return(\r\n \r\n
: \"\"\r\n );\r\n };\r\n\r\n renderAllSubscribers = () => {\r\n const { allSubscribers } = this.props;\r\n var showNumberOfSubscribers = this.state.showNumberOfSubscribers < allSubscribers.length ? this.state.showNumberOfSubscribers : allSubscribers.length;\r\n return (\r\n allSubscribers.slice(0, showNumberOfSubscribers).map(subscriber => \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {selectedUser.FullName}
\r\n{selectedUser.EId}
\r\n{selectedUser.Location}
\r\n this.onClickSubscriber(subscriber)}>\r\n
)\r\n );\r\n };\r\n\r\n handleLoadSubscribers = () => {\r\n const { allSubscribers } = this.props;\r\n this.setState(prev => ({\r\n ...prev,\r\n showNumberOfSubscribers: prev.showNumberOfSubscribers < allSubscribers.length ? prev.showNumberOfSubscribers + DISPLAY_ITEM.five : DISPLAY_ITEM.five\r\n })\r\n )\r\n }\r\n\r\n clearUserSearch = () => {\r\n const { activeMenu, clearSelectedUser, clearCircuitData, clearActiveCircuit, clearSubscriptionItems } = this.props;\r\n if (activeMenu === DASHBOARD_MENU.MyDirectReport) {\r\n this.userSearch.clearField();\r\n }\r\n clearSelectedUser();\r\n clearCircuitData();\r\n clearActiveCircuit();\r\n clearSubscriptionItems(true);\r\n clearSubscriptionItems(false);\r\n this.clearSearch(true);\r\n this.clearSearch(false);\r\n this.setState({\r\n activeSubscriberEmployeeId: 0,\r\n curActiveSubscriberEmployeeId: 0,\r\n tabCount: DISPLAY_ITEM.five\r\n });\r\n };\r\n\r\n clearSearch = () => {\r\n var isMobile = this.state.toggleTab === DASHBOARD_TAB.MobileWireless ? true : false;\r\n var type = isMobile ? 'mobileSearchString' : 'homeSearchString';\r\n this.setState({\r\n [type]: '',\r\n });\r\n\r\n if (this.state.enterSearchValue) {\r\n this.props.clearSearchField(isMobile);\r\n this.setState({\r\n enterSearchValue: false,\r\n });\r\n }\r\n };\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n };\r\n\r\n onClickAutoSuggestion = (item) => {\r\n if (item.EmployeeId !== this.state.activeSubscriberEmployeeId)\r\n {\r\n this.props.clearActiveCircuit();\r\n this.props.setSelectedUser(item);\r\n this.setState({\r\n toggleTab: DASHBOARD_TAB.MobileWireless,\r\n activeSubscriberEmployeeId: item.EmployeeId,\r\n curActiveSubscriberEmployeeId: item.EmployeeId,\r\n }, () => {\r\n this.horizontalTab();\r\n });\r\n }\r\n }\r\n\r\n onClickSubscriber = (subscriber) => {\r\n if (subscriber.EmployeeId !== this.state.activeSubscriberEmployeeId)\r\n {\r\n this.props.clearActiveCircuit();\r\n this.props.setSelectedUser({\r\n EmployeeId: subscriber.EmployeeId,\r\n EId: subscriber.Eid,\r\n FullName: subscriber.Name,\r\n Location: subscriber.LocationSiteCityCountry\r\n });\r\n this.setState({\r\n toggleTab: DASHBOARD_TAB.MobileWireless,\r\n activeSubscriberEmployeeId: subscriber.EmployeeId,\r\n curActiveSubscriberEmployeeId: subscriber.EmployeeId,\r\n showNumberOfSubscribers: DISPLAY_ITEM.five,\r\n }, () => {\r\n this.horizontalTab();\r\n });\r\n }\r\n }\r\n\r\n handleAutoSuggestClick(value) {\r\n const { allSubscribers } = this.props;\r\n var searchSubscriber = allSubscribers.filter(s => s.Name.toLowerCase().includes(value.trim().toLowerCase()) || s.Eid.includes(value.trim())\r\n || s.FirstLastName.toLowerCase().includes(value.trim().toLowerCase())\r\n || s.LastFirstName.toLowerCase().includes(value.trim().toLowerCase()));\r\n this.setState({autoSuggestSubscriber: value?.trim().length > 0 ? searchSubscriber : []});\r\n this.setState({userSearchHasValue: searchSubscriber.length > 0 || value == null ? true : false});\r\n this.setState({userSearchValue: value})\r\n return searchSubscriber;\r\n }\r\n\r\n render() {\r\n const { tabItem, lineList, activeMenu, selectedUser, verticaltabItem, allSubscribers } = this.props;\r\n \r\n return (\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n {subscriber.Name}
\r\n{subscriber.Eid}
\r\n{subscriber.LocationSiteCityCountry}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const { translation } = state;\r\n return {\r\n ...translation,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, null, null, { forwardRef: true })(DeviceInventory);","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { sideNavMenuActions } from '../../../store/external/side-nav-menu-reducer/side-nav-menu.reducer';\r\nimport { circuitUsageActions } from '../../../store/external/circuit-usage-reducer/circuit-usage.reducer';\r\nimport SubscriptionHeader from \"../dashboard/subscription-header/header-subscription.component\"\r\nimport DeviceInventory from \"./device-inventory/device-inventory.component\";\r\nimport { NoSubscription } from \"./no-subscription/no-subscription.component\";\r\nimport Translation from \"../../common/translation/translation.component\";\r\nimport { DASHBOARD_MENU, DASHBOARD_TAB } from '../../../utils/constant.utils';\r\nimport { validateAccessModule } from '../../../utils/helpers.utils';\r\nimport { MATRIX_INDICATOR, ACCESS_MODULE } from '../../../utils/rbac-constants.utils';\r\n\r\nclass DashboardPage extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n activeMenu: DASHBOARD_MENU.Personal,\r\n isLoadingSubscriptions: false,\r\n mobileSearchString: '',\r\n homeSearchString: '',\r\n verticaltabItem: [],\r\n allSubscribers: [],\r\n subscriptionHeader: {\r\n graphHeader: \"Statistics\",\r\n firstLineColor: \"#008eff\",\r\n secondLineColor: \"#be82ff\",\r\n thirdLineColor: \"#f580c0\",\r\n forthLineColor: \"#f49342\"\r\n },\r\n planInfo: null,\r\n equipmentModel: null,\r\n };\r\n this.onChangeMenu = this.onChangeMenu.bind(this);\r\n this.getCurrentSelectedUser = this.getCurrentSelectedUser.bind(this);\r\n this.fetchAllSubscribers = this.fetchAllSubscribers.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const { setIsPersonal, fetchActiveSubscribers } = this.props;\r\n var employeId = sessionStorage.EmployeeID;\r\n\r\n var disableMenu = this.props.activeMenu == DASHBOARD_MENU.Personal ?\r\n validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.PersonalDashboardR, ACCESS_MODULE.PersonalDashboardRE, ACCESS_MODULE.PersonalDashboardRW])\r\n : validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyDirectReportsDashboardR, ACCESS_MODULE.MyDirectReportsDashboardRE, ACCESS_MODULE.MyDirectReportsDashboardRW]);\r\n\r\n this.fetchAllSubscribers();\r\n this.setState({\r\n verticaltabItem: [\r\n {\r\n listTitle: \r\n
\r\n {activeMenu === DASHBOARD_MENU.MyDirectReport ?\r\n
\r\n \r\n {activeMenu === DASHBOARD_MENU.MyDirectReport ?\r\n
\r\n (this.userSearch = userSearch)}\r\n list={[]}\r\n action={this.onClickAutoSuggestion.bind(this)}\r\n onDemandAction={this.handleAutoSuggestClick}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n
:\r\n
: \"\"\r\n } \r\n
: \"\"}\r\n {activeMenu === DASHBOARD_MENU.Personal ?\r\n DISPLAY_ITEM.seven) ? \"scroll-active-pd-right\" : \"\"} ${(this.state.showNumberOfSubscribers > DISPLAY_ITEM.six) ? \"scroll-active-pd-right\" : \"\"}`}>\r\n {this.state.userSearchHasValue || this.state.userSearchValue == null ? \r\n this.props.selectedUser.EmployeeId ? this.renderCurrentSelectedUserDetails() : this.renderAllSubscribers() \r\n :
}\r\n {this.state.userSearchHasValue || this.state.userSearchValue == null ? \r\n (!this.props.selectedUser.EmployeeId && allSubscribers.length > DISPLAY_ITEM.five && allSubscribers.length > this.state.showNumberOfSubscribers) &&\r\n \r\n : null\r\n }\r\n
\r\n {this.state.activeSubscriberEmployeeId > 0 ?\r\n
}\r\n {this.state.userSearchHasValue || this.state.userSearchValue == null ? \r\n (!this.props.selectedUser.EmployeeId && allSubscribers.length > DISPLAY_ITEM.five && allSubscribers.length > this.state.showNumberOfSubscribers) &&\r\n \r\n : null\r\n }\r\n \r\n {verticaltabItem && \r\n \r\n \r\n this.handleSearchChange(e)}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.triggerSearch();\r\n }\r\n }}\r\n value={this.state.toggleTab === DASHBOARD_TAB.MobileWireless ? this.state.mobileSearchString : this.state.homeSearchString}\r\n />\r\n {this.state.toggleTab === DASHBOARD_TAB.MobileWireless ? this.state.mobileSearchString !== \"\" ? \r\n
: allSubscribers.length === 0 ?\r\n this.userSearch?.state.value === \"\" ? \r\n \r\n {this.verticalTabContent()}\r\n {this.state.toggleTab === DASHBOARD_TAB.MobileWireless ?\r\n tabItem !== undefined ? tabItem.Data === undefined ?
\r\n
: \"\"\r\n } \r\n \r\n {verticaltabItem && \r\n \r\n \r\n this.handleSearchChange(e)}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.triggerSearch();\r\n }\r\n }}\r\n maxLength={100}\r\n value={this.state.toggleTab === DASHBOARD_TAB.MobileWireless ? this.state.mobileSearchString : this.state.homeSearchString}\r\n />\r\n {this.state.toggleTab === DASHBOARD_TAB.MobileWireless ? this.state.mobileSearchString !== \"\" ? \r\n
: \"\"\r\n }\r\n 7) ? \"scroll-active-pd-right\" : \"\"}`}>\r\n {this.verticalTabContent()}\r\n {this.state.toggleTab === DASHBOARD_TAB.MobileWireless ?\r\n tabItem !== undefined ? tabItem.Data === undefined ?
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const { sideNavMenu, circuitUsage, translation } = state;\r\n return {\r\n triggerIsPrimaryIndicator: circuitUsage.isPrimaryIndicator,\r\n ...sideNavMenu,\r\n ...circuitUsage,\r\n ...translation,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n ...sideNavMenuActions,\r\n ...circuitUsageActions,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);\r\n","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { RequestModal as CreateRequestModal, ConfirmationModal as Discard } from \"../../../common/modal/modal.component\";\r\nimport { requestDetailsActions } from \"../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { createRequestActions } from \"../../../../store/external/request-reducer/create-request.reducer\";\r\nimport { requestLogActions } from \"../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nclass CreateRequestDisplay extends Component {\r\n constructor(props) {\r\n super();\r\n this.CreateRequestModal = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n const isUpdateForm = this.props.match.params.orderId > 0;\r\n\r\n this.props.setIsUpdateRequest(isUpdateForm);\r\n this.showModal();\r\n }\r\n\r\n showModal = () => {\r\n this.CreateRequestModal.current.handleShow();\r\n };\r\n \r\n resetUrl = () => {\r\n this.props.history.goBack();\r\n }\r\n\r\n render() {\r\n const { requestTypeId, requestType } = this.props.createRequest;\r\n let data = JSON.parse(sessionStorage.User).Employee;\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect(\r\n state => {\r\n const { requestDetail, createRequest } = state;\r\n return {\r\n ...requestDetail\r\n , createRequest\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestDetailsActions, createRequestActions, requestLogActions),\r\n dispatch\r\n )\r\n )(CreateRequestDisplay)\r\n);\r\n","import React, { Component } from 'react';\r\nimport { Redirect, Route } from 'react-router-dom';\r\n\r\nimport DashboardPage from '../dashboard/dashboard-page.component';\r\nimport { DASHBOARD_MENU } from '../../../utils/constant.utils';\r\nimport { validateAccessModule } from '../../../utils/helpers.utils';\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from '../../../utils/rbac-constants.utils';\r\nimport CreateRequestDisplay from '../../external/request/create-request/create-request-modal-display.component';\r\n\r\nclass DashboardPageLayout extends Component {\r\n\r\n render() {\r\n let isDashboardReport = window.location.pathname.includes(\"Dashboard/Report\");\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.PersonalDashboardR, ACCESS_MODULE.PersonalDashboardRE, ACCESS_MODULE.PersonalDashboardRW])\r\n return (\r\n \r\n {\r\n noAccess ? null :\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default DashboardPageLayout;\r\n","import React, { Component } from \"react\";\r\nimport bgImage from \"../../../../../src/img/full-page-bg.png\";\r\nimport Translation from \"../../common/translation/translation.component\"\r\nexport class RequestHeaders extends Component {\r\n render() {\r\n \r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import ButtonIcon from \"../../button\"\r\nimport { React, useState, useRef, useEffect } from 'react';\r\nimport \"./filter-button.component.css\";\r\nimport { ORFButton } from \"../forms/order-request-form.component\";\r\nimport { REQUEST_TYPE } from \"../../../constants/external-constants\";\r\nimport Icons from \"../../icon\"\r\n\r\nconst FilterButton = ({ filterData, filtersub, filerCheckboxSub, fetchFilterData, requestLog, setTableLength, searchFilterData, tableLength, searchValue, clearSearhValue }) => {\r\n let myRef = useRef(null);\r\n const [showItem, setShowItem] = useState(false)\r\n const [mainActive, setmainActive] = useState(false)\r\n const [showList, setShowList] = useState(false)\r\n const [selectedList, setSelectedList] = useState(\"\")\r\n const [filterBy, setFilterBy] = useState(\"\")\r\n const [getRequest, setGetRequest] = useState(\"\")\r\n const [request, setRequest] = useState(\"\")\r\n const [checkList, setCheckList] = useState([])\r\n const href = window.location;\r\n const [subShowList, setSubShowList] = useState(false)\r\n const handleClickOutside = (event) => {\r\n if (myRef.current && !myRef.current.contains(event.target)) {\r\n setShowItem(false)\r\n setShowList(false)\r\n setSubShowList(false)\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener('click', handleClickOutside, true);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside, true);\r\n };\r\n });\r\n\r\n\r\n\r\n useEffect(() => {\r\n setRequest(getRequest);\r\n }, [getRequest])\r\n\r\n function forApprovalData() {\r\n const data = requestLog.orderApprovalData.Data.Items.map((item) => ({ Key: item.RequestTypeId, Value: item.RequestType }))\r\n return data;\r\n }\r\n //get the request url\r\n function getPath() {\r\n let parts = href.pathname.split('/');\r\n let lastSegment = parts.pop() || parts.pop();\r\n return lastSegment;\r\n }\r\n\r\n function requestedTab() {\r\n\r\n let location = getPath();\r\n\r\n if (location === REQUEST_TYPE.orderRequest) {\r\n\r\n setTableLength(requestLog?.orderRequestData?.Data?.Items.length)\r\n }\r\n if (location === REQUEST_TYPE.quotationRequest) {\r\n\r\n setTableLength(requestLog?.orderQuotationData?.Data?.Items.length)\r\n }\r\n if (location === REQUEST_TYPE.approvalRequest) {\r\n\r\n setTableLength(requestLog?.orderApprovalData?.Data?.Items.length)\r\n }\r\n if (location === REQUEST_TYPE.coverageRequest) {\r\n\r\n setTableLength(requestLog?.orderCoverageData?.Data?.Items.length)\r\n }\r\n \r\n }\r\n\r\n function replaceSubData(target) {\r\n const array = [{ Key: 4, Value: 'New Quotation Request' }, { Key: 5, Value: 'Upgrade Quotation Request' }]\r\n return target = array;\r\n }\r\n function filterFunctiion(el) {\r\n //fetchFilterData(el.target.innerText);\r\n setShowList(!showList);\r\n setShowItem(!showItem);\r\n requestedTab();\r\n };\r\n\r\n function subFilterFunction() {\r\n if (!showList) {\r\n var selectedFilter = filterData.filter(value => value.subFilterTitles.includes(request))[0].filterTitle;\r\n fetchFilterData(selectedFilter);\r\n setFilterBy(selectedFilter);\r\n setGetRequest(selectedFilter)\r\n }\r\n\r\n setShowList(!showList);\r\n setSubShowList(!subShowList);\r\n }\r\n\r\n function clearCheckbox() {\r\n document.querySelectorAll('.custom-filter-item input[type=checkbox]').forEach(el => el.checked = false);\r\n setmainActive(false);\r\n setCheckList(\"\")\r\n setSelectedList(\"\")\r\n\r\n }\r\n\r\n function displayItem() {\r\n setShowItem(!showItem)\r\n }\r\n \r\n function displaySubData(options) {\r\n if (getPath() === REQUEST_TYPE.quotationRequest && request === REQUEST_TYPE.request) {\r\n \r\n options = replaceSubData(options);\r\n }\r\n if (getPath() === REQUEST_TYPE.approvalRequest && request === REQUEST_TYPE.request) {\r\n options = forApprovalData();\r\n }\r\n\r\n var liOptions = options.filter((value, index, self) =>\r\n index === self.findIndex((t) => (\r\n t.Key === value.Key || t.Value === value.Value\r\n ))\r\n ).map((subItem) => {\r\n return \r\n
\r\n )\r\n}\r\n\r\nexport default FilterButton\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport InputGroup from \"react-bootstrap/InputGroup\";\r\nimport FormControl from \"react-bootstrap/FormControl\";\r\nimport Icons from \"../../icon\";\r\nimport ListTab from \"../../common/list-tab/list-tab.component\";\r\nimport { REQUEST_SUB_LINKS as RequestLinks, USER_ROLES_ID as UserRoles } from \"../../../constants/external-constants\";\r\nimport { validateAccessModule } from \"../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../utils/rbac-constants.utils\";\r\nimport FilterButton from \"../../common/filter-button/filter-button.component\";\r\nimport Translation from \"../../common/translation/translation.component\";\r\nimport { requestLogActions } from \"./../../../store/external/request-reducer/request-log.reducer\";\r\n\r\nclass RequestHeaderTab extends Component {\r\n constructor(props) {\r\n super();\r\n this.state = {\r\n searchValue: \"\"\r\n , buttonFilterValue: \"\"\r\n , tableTabs: []\r\n , tableLength: 0\r\n , showApproval: false\r\n , enableSearchBox: false,\r\n }\r\n }\r\n\r\n componentWillMount() {\r\n this.setTableTabs();\r\n }\r\n\r\n fetchFilterData = (filter) => {\r\n console.log(\"fetch filter\")\r\n this.props.fetchFilterData(filter);\r\n }\r\n\r\n setSearchValue = (e) => {\r\n this.setState({ searchValue: e.target.value });\r\n }\r\n\r\n searchFilterData = (e, filterType) => {\r\n this.setState({ buttonFilterValue: e.currentTarget.dataset.value });\r\n this.props.setRequestSearchValue(e.currentTarget.dataset.id, true, filterType);\r\n this.props.fetchRequestLogItems();\r\n }\r\n\r\n clearSearhValue = ()=>{\r\n this.setState({ buttonFilterValue: \"\" });\r\n this.props.setRequestSearchValue(\"\", false, null);\r\n this.props.fetchRequestLogItems();\r\n }\r\n\r\n setTableLength = (value) => {\r\n this.setState({tableLength: value})\r\n }\r\n setTableTabs = () => {\r\n const externalDealName = \"/external/\" + sessionStorage.getItem('DealName') + \"/\";\r\n const roleId = parseInt(sessionStorage.getItem('UserRoleID'));\r\n let showAllRequest = roleId === UserRoles.manager || roleId === UserRoles.teamLead || roleId === UserRoles.lineManager || JSON.parse(sessionStorage.getItem('IsWireLineApprover')) || JSON.parse(sessionStorage.getItem('IsCostCodeAuthorizer')) || JSON.parse(sessionStorage.getItem('IsHRLineManager')) || roleId === UserRoles.admin;\r\n let showApproval = roleId === UserRoles.manager || roleId === UserRoles.teamLead || roleId === UserRoles.lineManager || JSON.parse(sessionStorage.getItem('IsWireLineApprover')) || JSON.parse(sessionStorage.getItem('IsCostCodeAuthorizer')) || JSON.parse(sessionStorage.getItem('IsHRLineManager')) || roleId === UserRoles.admin;\r\n let showCoverage = JSON.parse(sessionStorage.getItem('IsCSM')) || JSON.parse(sessionStorage.getItem('IsRSO')) || JSON.parse(sessionStorage.getItem('IsKeyUser'));\r\n let showQuotation = JSON.parse(sessionStorage.getItem('IsEnabledQuotationRequest'));\r\n\r\n let tableTabs = [];\r\n\r\n if (showAllRequest) {\r\n tableTabs.push({\r\n listTitle: - \r\n {filterData.map((item, id) =>\r\n
- \r\n {item.filterTitle}\r\n \r\n )}\r\n
- \r\n
- {request} \r\n \r\n \r\n {tableLength > 0 && filtersub.length > 0 ? displaySubData(filtersub)\r\n : \"\"}\r\n \r\n
- \r\n
- {request} \r\n \r\n\r\n {tableLength > 0 && filtersub.length > 0 ? displaySubData(filtersub)\r\n : \"\"}\r\n\r\n
- \r\n
- \r\n Filter\r\n Clear Filter\r\n \r\n {filtersub.map((subItem)=>\r\n
- {subItem.value} \r\n )} \r\n
- \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog, navMenu } = state;\r\n return {\r\n ...requestLog\r\n , navMenu\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions),\r\n dispatch\r\n )\r\n)(RequestHeaderTab);\r\n","import React, { Component } from \"react\";\r\nimport Dropdown from \"react-bootstrap/Dropdown\";\r\nimport DropdownButton from \"react-bootstrap/DropdownButton\";\r\nimport { RequestModal } from \"../../../common/modal/modal.component\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport \"./create-request.component.css\";\r\nimport { LoadingText } from \"../../../common/loading-text/loading-text-component\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../../utils/rbac-constants.utils\";\r\nimport { REQUEST_TYPE, REQUEST_TYPES_ID } from \"../../../../constants/external-constants\";\r\nexport class CreateRequest extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n render() {\r\n const { requestTypes, isLoaded, openRequestModal, closeAction } = this.props;\r\n\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyRequestsRW]);\r\n let button;\r\n\r\n if ( isLoaded ) {\r\n button = (\r\n \r\n
\r\n \r\n {this.state.showApproval &&\r\n < div className=\"request-approval2\">\r\n
\r\n }\r\n {navMenu?.newNavItems[1]?.NotifApprovalCount}
\r\n\r\n {actionsAndRequests}\r\n {newRequests}\r\n
\r\n \r\n {actionsAndRequests}\r\n {newRequests}\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default CreateRequest;\r\n","import React, { Component } from \"react\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport Icon from \"../../icon\";\r\n\r\nclass DateRange extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n startDate: null,\r\n endDate: null,\r\n };\r\n }\r\n\r\n datePickerOnChange = (dates) => {\r\n const { dateOnly, onChange } = this.props;\r\n const [start, end] = dates;\r\n\r\n const startDt = dateOnly && start ? new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`) : start;\r\n const endDt = dateOnly && end ? new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`) : end;\r\n this.setState({endDate:endDt,startDate:startDt})\r\n onChange([startDt, endDt]);\r\n }\r\n\r\n handleInputField=(e)=>{\r\n const inputValue = e.target.value;\r\n if (inputValue === \"\") {\r\n this.props.onChange([null, null]);\r\n }\r\n }\r\n\r\n handleBlur = () => {\r\n const { startDate, endDate } = this.state; \r\n if (startDate && !endDate) {\r\n this.props.onChange([startDate, startDate]);\r\n }\r\n }\r\n\r\n render() {\r\n \r\n const {startDate, endDate, label, onChange, placeholder, requiredField, dateRangeWrapperClass} = this.props\r\n const { activeDateFormat } = this.props.adminSetting;\r\n\r\n const CustomInput = React.forwardRef(({ value, onClick, onChange, onBlur }, ref) => (\r\n \r\n ));\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { adminSetting } = state;\r\n\r\n return {\r\n adminSetting\r\n };\r\n }\r\n)(DateRange)","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport moment from 'moment';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\n\r\nimport \"./filter.component.css\";\r\nimport ButtonIcon from \"../../button\";\r\nimport { SelectField } from \"../custom-form/select-filter.component\";\r\nimport { InputField } from \"../custom-form/input-filter-component\";\r\nimport DATEPICKER_OR from \"../custom-form/custom-date-picker.component\";\r\nimport DateRange from \"../custom-form/custom-date-range-component\";\r\nimport CustomSearchableSelect from \"../custom-form/custom-searchable-select.component\";\r\nimport Translation from \"../translation/translation.component\";\r\nimport { MAX_LENGTH, SELECT_OPERATOR } from \"../../../constants/external-constants\";\r\nimport { convertToFormatDate, convertToFormatLocalDate, convertToLocalDateToUTCDate } from \"../../../utils/helpers.utils\";\r\nimport { filterActions } from \"../../../store/external/filter-reducer/filter-reducer\";\r\nimport { bindActionCreators } from \"@reduxjs/toolkit\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nclass Filter extends Component {\r\n constructor(props) {\r\n super(props); \r\n this.AddFilter = this.AddFilter.bind(this);\r\n this.ResetFilter = this.ResetFilter.bind(this);\r\n this.HideFilter= this.HideFilter.bind(this);\r\n this.RemoveItemFilter = this.RemoveItemFilter.bind(this);\r\n this.FieldChange = this.FieldChange.bind(this);\r\n this.state = {\r\n filterList:[],\r\n startDate: null,\r\n endDate: null,\r\n filterSelected: {\r\n label: \"\",\r\n value: \"\",\r\n key: 0\r\n },\r\n operatorSelected: {\r\n label: \"\",\r\n value: \"\"\r\n },\r\n optionSelected: {\r\n label: \"\",\r\n value: \"\"\r\n },\r\n inputValue: \"\", \r\n copyFilter:[], \r\n showFilter:false, \r\n showDateRange: false, \r\n disableApplyFilter: true,\r\n disableAddFilter: true,\r\n disableResetFilter: true,\r\n disableSelectDate: true,\r\n disableInputValue: true,\r\n isFilterApplied: false,\r\n selectedValue: '' \r\n } \r\n }\r\n\r\n AddFilter() {\r\n const { addAction, setFilterData } = this.props;\r\n const { filterList, filterSelected, operatorSelected, inputValue, optionSelected, startDate, endDate } = this.state;\r\n\r\n var filter = [\r\n ...filterList,\r\n {\r\n filterLabel: filterSelected.label,\r\n operatorLabel: operatorSelected.label,\r\n inputValue: inputValue,\r\n startDate: startDate,\r\n endDate: endDate,\r\n optionLabel: optionSelected.label\r\n }\r\n ];\r\n setFilterData(filter);\r\n\r\n var tableFilterModel = {\r\n Filter: filterSelected.value,\r\n Operator: operatorSelected.value,\r\n Option: optionSelected.value,\r\n Value: inputValue,\r\n StartDate: startDate ? moment(startDate).format('YYYY-MM-DD') : null,\r\n EndDate: endDate ? moment(endDate).format('YYYY-MM-DD') : null,\r\n TimezoneOffset: new Date().getTimezoneOffset()\r\n };\r\n\r\n addAction(tableFilterModel);\r\n\r\n this.ClearData();\r\n this.DisableApplyFilter(filter, false);\r\n }\r\n\r\n ClearData() {\r\n this.setState({\r\n filterSelected: {\r\n label: \"\",\r\n value: \"\",\r\n key: 0\r\n },\r\n operatorSelected: {\r\n label: \"\",\r\n value: \"\"\r\n },\r\n optionSelected: {\r\n label: \"\",\r\n value: \"\"\r\n },\r\n inputValue: \"\",\r\n startDate: null,\r\n endDate: null,\r\n disableAddFilter: true,\r\n disableInputValue: true,\r\n disableSelectDate: true,\r\n showDateRange: false\r\n });\r\n }\r\n\r\n ResetFilter() {\r\n const { applyAction, resetFilter } = this.props;\r\n\r\n this.ClearData();\r\n this.setState({\r\n disableApplyFilter: true,\r\n disableResetFilter: true,\r\n isFilterApplied: false,\r\n showFilter: false\r\n });\r\n resetFilter();\r\n applyAction(false);\r\n }\r\n\r\n ApplyFilter() {\r\n const { applyAction, filterData } = this.props;\r\n\r\n var enableFilter = filterData.length > 0;\r\n\r\n this.setState({\r\n disableApplyFilter: !enableFilter,\r\n disableResetFilter: !enableFilter,\r\n isFilterApplied: enableFilter\r\n })\r\n applyAction(enableFilter);\r\n }\r\n\r\n HideFilter() {\r\n this.setState({showFilter:!this.state.showFilter})\r\n }\r\n onChangeDates = (dates) => {\r\n const [start, end] = dates;\r\n const { filterSelected, operatorSelected, optionSelected, inputValue } = this.state;\r\n\r\n var filter = {\r\n filterSelected: filterSelected,\r\n operatorSelected: operatorSelected,\r\n optionSelected: optionSelected,\r\n inputValue: inputValue,\r\n startDate: start,\r\n endDate: end\r\n };\r\n var isDisableAddFilter = this.DisableAddFilter(filter);\r\n\r\n this.setState({\r\n startDate: start,\r\n endDate: end,\r\n disableAddFilter: isDisableAddFilter,\r\n });\r\n };\r\n RemoveItemFilter(removeIndex) {\r\n const { isFilterApplied } = this.state;\r\n const { removeAction, removeFilterData, filterData } = this.props;\r\n\r\n removeAction(removeIndex);\r\n removeFilterData(removeIndex); \r\n this.DisableApplyFilter(filterData, isFilterApplied);\r\n }\r\n\r\n FieldChange(e, name) {\r\n const { filterSelected, operatorSelected, optionSelected, inputValue, startDate, endDate } = this.state;\r\n const { FilterList } = this.props.data;\r\n var elObj = e.target;\r\n var mapValue;\r\n if (elObj.tagName == \"SEARCHABLE-SELECT\") {\r\n mapValue = {\r\n label: e.text,\r\n value: e.value,\r\n key: e.key\r\n };\r\n }\r\n else if (elObj.tagName == \"SELECT\") {\r\n var getvalue = elObj.options[elObj.selectedIndex].value;\r\n var gettext = elObj.options[elObj.selectedIndex].text;\r\n\r\n mapValue = {\r\n label: gettext,\r\n value: getvalue\r\n };\r\n }\r\n else {\r\n mapValue = elObj.value;\r\n }\r\n\r\n var filterMap = {\r\n filterSelected: filterSelected,\r\n operatorSelected: operatorSelected,\r\n optionSelected: optionSelected,\r\n inputValue: inputValue,\r\n startDate: startDate,\r\n endDate: endDate\r\n };\r\n\r\n if (name == 'filter') {\r\n filterMap = {\r\n ...filterMap,\r\n filterSelected: mapValue\r\n };\r\n }\r\n else if (name == 'operator') {\r\n filterMap = {\r\n ...filterMap,\r\n operatorSelected: mapValue\r\n };\r\n }\r\n else if (name == 'value') {\r\n filterMap = {\r\n ...filterMap,\r\n inputValue: mapValue\r\n };\r\n }\r\n else if (name == 'option') {\r\n filterMap = {\r\n ...filterMap,\r\n optionSelected: mapValue\r\n };\r\n }\r\n\r\n var isDateField = FilterList.findIndex(r => r.FilterName == filterMap.filterSelected.value && r.FieldType.includes('Date')) > -1;\r\n var isDisableInputValue = FilterList.findIndex(r => r.FilterName == filterMap.filterSelected.value && !r.FieldType.includes('Date')) == -1;\r\n var isDatePicker = isDateField && filterMap.operatorSelected.value != 'Between';\r\n var isDateRange = isDateField && filterMap.operatorSelected.value == 'Between';\r\n\r\n if (!isDateField && filterMap.operatorSelected.value == 'Between') {\r\n mapValue = {\r\n label: 'Contains',\r\n value: 'Contains'\r\n };\r\n filterMap = {\r\n ...filterMap,\r\n operatorSelected: mapValue\r\n };\r\n }\r\n else if (isDateField && (filterMap.operatorSelected.value == 'Contains' || filterMap.operatorSelected.value == 'DoesNotContain')) {\r\n mapValue = {\r\n label: 'Between',\r\n value: 'Between'\r\n };\r\n isDateRange = true;\r\n filterMap = {\r\n ...filterMap,\r\n operatorSelected: mapValue\r\n };\r\n }\r\n var mapState = {\r\n ...filterMap,\r\n inputValue: isDateField ? '' : filterMap.inputValue,\r\n startDate: isDateField ? filterMap.startDate : null,\r\n endDate: isDateRange ? filterMap.endDate : null,\r\n disableInputValue: isDisableInputValue,\r\n disableSelectDate: !isDatePicker,\r\n showDateRange: isDateRange\r\n };\r\n\r\n var isDisableAddFilter = this.DisableAddFilter(mapState);\r\n this.setState({\r\n ...mapState,\r\n disableAddFilter: isDisableAddFilter,\r\n }); \r\n }\r\n\r\n DisableAddFilter = (filter) => { \r\n const { filterSelected, operatorSelected, optionSelected, inputValue, startDate, endDate } = filter;\r\n \r\n var hascondition = filterSelected?.value?.length > 0 && operatorSelected?.value?.length > 0 && optionSelected?.value?.length > 0;\r\n var hasvalue = inputValue?.trim().length > 0 || (startDate != null && operatorSelected.value !== SELECT_OPERATOR.Between) || (startDate != null && endDate != null);\r\n\r\n return !hascondition || !hasvalue;\r\n }\r\n\r\n DisableApplyFilter(filterList, isFilterApplied) {\r\n var disable = filterList.length == 0 && !isFilterApplied;\r\n this.setState({\r\n disableApplyFilter: disable,\r\n disableResetFilter: disable\r\n });\r\n }\r\n\r\n GetOperatorList = () => {\r\n const { filterSelected } = this.state;\r\n const { FilterList, Operatorlist } = this.props.data;\r\n if (FilterList) {\r\n var isDateField = FilterList.findIndex(r => r.FilterName == filterSelected.value && r.FieldType.includes('Date')) > -1;\r\n\r\n return isDateField ? Operatorlist.filter(item => !item.FilterName.includes('Contain')) : Operatorlist.filter(item => !item.FilterName.includes('Between'));\r\n }\r\n }\r\n\r\n SelectDatePicker(date) {\r\n const { filterSelected, operatorSelected, optionSelected, inputValue } = this.state;\r\n\r\n var filter = {\r\n filterSelected: filterSelected,\r\n operatorSelected: operatorSelected,\r\n optionSelected: optionSelected,\r\n inputValue: inputValue,\r\n startDate: date\r\n };\r\n var isDisableAddFilter = this.DisableAddFilter(filter);\r\n\r\n this.setState({\r\n startDate: date,\r\n disableAddFilter: isDisableAddFilter,\r\n });\r\n }\r\n\r\n handleSelectChange = (value) => {\r\n this.setState({ selectedValue: value });\r\n };\r\n\r\n filterValueLabel = (objValue) => {\r\n const { activeDateFormat } = this.props;\r\n const { inputValue, startDate, endDate, filterLabel, operatorLabel, optionLabel } = objValue;\r\n\r\n var labelValue = inputValue;\r\n if (startDate != null) {\r\n labelValue = convertToFormatLocalDate(startDate, activeDateFormat.Name);\r\n\r\n if (endDate != null)\r\n labelValue = `${labelValue} - ${convertToFormatLocalDate(endDate, activeDateFormat.Name)}`;\r\n }\r\n\r\n return `${filterLabel} ${operatorLabel} ${labelValue} ${optionLabel}`;\r\n }\r\n getBasePath(path) {\r\n \r\n const segments = path.split('/');\r\n if (segments.length > 2) {\r\n return `${segments[1]}/${segments[2]}/${segments[3]}`;\r\n }\r\n return path;\r\n }\r\n\r\n isNavigatingToDifferentPage(location) {\r\n const currentPath = this.props.location.pathname;\r\n const newPath = location.pathname;\r\n\r\n const currentBasePath = this.getBasePath(currentPath);\r\n const newBasePath = this.getBasePath(newPath);\r\n \r\n return currentBasePath !== newBasePath;\r\n }\r\n\r\n componentDidMount() {\r\n const { filterData, history } = this.props;\r\n this.setState({ disableResetFilter: filterData.length === 0 });\r\n\r\n this.unlisten = history.listen((location, action) => {\r\n if (this.isNavigatingToDifferentPage(location)) {\r\n this.ResetFilter()\r\n }\r\n });\r\n }\r\n\r\n componentWillUnmount() {\r\n\r\n if (this.unlisten) {\r\n this.unlisten();\r\n }\r\n }\r\n render() {\r\n const { filterList, startDate, endDate, disableApplyFilter, disableAddFilter, disableResetFilter, disableSelectDate, disableInputValue, showDateRange } = this.state; \r\n const { FilterList, OptionList } = this.props.data;\r\n const { filterData } = this.props;\r\n \r\n return(\r\n {label}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect(\r\n state => {\r\n const { activeDateFormat } = state.adminSetting;\r\n const { filter: { filterData } } = state;\r\n return {\r\n activeDateFormat,\r\n filterData\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, filterActions),\r\n dispatch\r\n )\r\n)(Filter))","import React, { useState } from \"react\";\r\nimport { useEffect } from \"react\";\r\n\r\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\r\n\r\nimport { compareIgnoreCase } from \"../../../utils/helpers.utils\";\r\n\r\nexport default function ListBox(props) {\r\n const { firstList, secondList, resetFilter, defaultList } = props;\r\n const [firstListValues, setFirstListValues] = useState(firstList);\r\n const [selectedValue,setSelectedValue] = useState(\"\");\r\n const [position,setPosition]=useState(secondList);\r\n const [isSelected, setIsSelected]=useState(\"\");\r\n const [clearFilter, setClearFilter]=useState(resetFilter)\r\n const MoveLeft = () => { \r\n let filterArray = []; \r\n if (position.findIndex(r => r.FilterName == selectedValue && r.FieldType == \"default\") > -1) {\r\n return;\r\n }\r\n setPosition(position.filter((x)=>x.FilterName!==selectedValue))\r\n filterArray=position.filter((x)=>x.FilterName===selectedValue)\r\n setFirstListValues([...firstListValues, ...filterArray]);\r\n\r\n props.handleSelectedData(position.filter((x) => x.FilterName !== selectedValue))\r\n };\r\n\r\n const MoveRight = () => {\r\n let filterArray=[]; \r\n if (position.findIndex(r => r.FilterName == selectedValue && r.FieldType == \"default\") > -1) {\r\n return;\r\n } \r\n setFirstListValues(firstListValues.filter((x)=>x.FilterName!==selectedValue))\r\n filterArray=firstListValues.filter((x)=>x.FilterName===selectedValue)\r\n setPosition([...position, ...filterArray]); \r\n props.handleSelectedData([...position, ...filterArray]);\r\n };\r\n\r\n \r\n\r\n //tochange\r\n const HandleMovableList = (e) => { \r\n setSelectedValue(e.target.title) \r\n setIsSelected(e.target.id)\r\n };\r\n\r\n const MoveRightItem = (result)=>{ \r\n \r\n let filterArray=[];\r\n if (!result.destination) return; \r\n if (result.source.droppableId !== result.destination.droppableId) {\r\n if(result.destination.droppableId===\"selected\") {\r\n filterArray=firstListValues.filter((_,x)=>x === result.source.index)\r\n setFirstListValues(firstListValues.filter((_,x)=>x !== result.source.index))\r\n setPosition([...position, ...filterArray]);\r\n props.handleSelectedData([...position, ...filterArray])\r\n \r\n } else if (result.destination.droppableId === \"available\") {\r\n if (position.findIndex(r => r.FilterId == result.draggableId && r.FieldType == \"default\") > -1) {\r\n return;\r\n }\r\n filterArray=position.filter((_,x)=>x === result.source.index)\r\n setPosition(position.filter((_,x)=>x !== result.source.index))\r\n setFirstListValues([...firstListValues, ...filterArray]);\r\n\r\n props.handleSelectedData(position.filter((_,x)=>x !== result.source.index))\r\n }\r\n } else {\r\n if(result.source.droppableId!==\"available\")\r\n {\r\n const items= Array.from(position);\r\n const [reorderItem]=items.splice(result.source.index, 1);\r\n items.splice(result.destination.index, 0, reorderItem)\r\n setPosition(items)\r\n\r\n props.handleSelectedData(items)\r\n } else {\r\n return;\r\n }\r\n \r\n }\r\n \r\n }\r\n \r\n useEffect(()=>{ \r\n if(resetFilter){\r\n var notDefaultList = secondList?.filter(r => r.FieldType != \"default\") ?? [];\r\n\r\n var availableList = [\r\n ...firstList,\r\n ...notDefaultList\r\n ].sort((a, b) => compareIgnoreCase(a.FilterName, b.FilterName));\r\n\r\n setFirstListValues(availableList);\r\n setPosition(defaultList);\r\n props.handleSelectedData(defaultList);\r\n props.resetClearData(false); \r\n }\r\n })\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Filter\r\n
\r\n {\r\n this.state.showFilter ?\r\n \r\n
\r\n :\r\n \r\n {filterData.length}\r\n
\r\n \r\n { \r\n filterData.map((item, index) => {\r\n return
\r\n }\r\n \r\n {this.filterValueLabel(item)} this.RemoveItemFilter(index)}>
\r\n })\r\n }\r\n\r\n {this.state.showFilter ? \"+ Show Filter\" : \"- Hide Filter\"} \r\n
\r\n \r\n
\r\n \r\n this.ApplyFilter()} customClassName=\"header-option-list header-filter-button\" labelName=\"Apply Filter\" isDisable={disableApplyFilter} />\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport Button from 'react-bootstrap/Button';\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport ButtonIcon from \"../../button\";\r\nimport ListBox from \"../custom-form/list-box.component\";\r\nimport Translation from \"../translation/translation.component\";\r\n\r\nexport class CustomColumns extends Component {\r\n constructor(props) {\r\n super(props); \r\n this.onSelectedChange=this.onSelectedChange.bind(this);\r\n this.resetDefault=this.resetDefault.bind(this);\r\n this.state={\r\n show:false,\r\n clearData:false,\r\n selected:[],\r\n options:[\r\n { value: 'one', label: 'Option One' },\r\n { value: 'two', label: 'Option Two' },\r\n ],\r\n selectedTwo: [],\r\n selectedCols: [],\r\n isSaving: false\r\n }\r\n }\r\n\r\n handleClose(){\r\n this.setState({\r\n show: false,\r\n isSaving: false\r\n });\r\n }\r\n\r\n handleShow() {\r\n this.setState({show:true});\r\n }\r\n\r\n onSelectedChange(selected) {\r\n this.setState({selected:selected})\r\n }\r\n\r\n onChange = (selected) => {\r\n this.setState({ selected });\r\n };\r\n\r\n resetDefault() { \r\n this.setState({clearData:true});\r\n }\r\n\r\n \r\n resetClearData(item) {\r\n this.setState({clearData:item})\r\n }\r\n\r\n secondList = () => {\r\n var secondList = this.props.secondList ?? [];\r\n var selected = this.state.selected ?? [];\r\n return [\r\n ...secondList,\r\n ...selected\r\n ];\r\n }\r\n\r\n handleSelectedCols = (selectedCols) => {\r\n this.setState({\r\n selectedCols: selectedCols\r\n });\r\n }\r\n\r\n async saveSelectedCols() {\r\n const { saveAction, secondList } = this.props;\r\n const { selectedCols } = this.state;\r\n this.setState({\r\n isSaving: true\r\n });\r\n await saveAction(selectedCols.length > 0 ? selectedCols : secondList);\r\n this.handleClose();\r\n }\r\n \r\n render(){\r\n const {show,clearData,isSaving }=this.state;\r\n return(\r\n <>\r\n\r\n \r\n
\r\n \r\n
\r\n Available
\r\n\r\n
\r\n Selected
\r\n Drag and drop to reorder item list\r\n \r\n \r\n MoveRightItem(result)}>\r\n \r\n \r\n {(provided,snapshot) => (\r\n \r\n\r\n \r\n {(provided,snapshot) => (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {firstListValues.map((item, index) => (\r\n \r\n {(provided, snapshot) => (\r\n \r\n ))}\r\n {provided.placeholder}\r\n
\r\n )}\r\n \r\n {item.FilterName}\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {\r\n position.map((item, index) => (\r\n \r\n {(provided) => (\r\n \r\n ))\r\n }\r\n {provided.placeholder}\r\n
\r\n )}\r\n \r\n {item.FilterName}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog, createRequest } = state;\r\n return {\r\n ...requestLog\r\n , createRequest\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, createRequestActions),\r\n dispatch\r\n )\r\n)(RequestPage);\r\n","import React, { Component } from 'react';\r\n\r\nimport { TableExhibit2 as DataTable2 } from './table.component';\r\nimport { PaginationExhibit1 as Pagination1, PaginationExhibit2 as Pagination2 } from './pagination.component';\r\n\r\nexport class TablePaginationExhibit1 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.onColumnClickAction = this.onColumnClickAction.bind(this);\r\n this.state = {\r\n columns: {},\r\n pageList: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.columns !== this.props.columns || prevProps.pageList !== this.props.pageList) {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n }\r\n\r\n onColumnClickAction = (columnClicked) => {\r\n const { columns, pageList } = this.state;\r\n const arrayColumns = [];\r\n let updatedColumns = {};\r\n Object.entries(columns).map(x => {\r\n arrayColumns.push(x);\r\n });\r\n\r\n let currColumn = arrayColumns.slice().filter(currCol => columnClicked === currCol[0])[0];\r\n Object.keys(columns).forEach(function (key) {\r\n if (key === currColumn[0]) {\r\n updatedColumns[key] = { ...columns[key]};\r\n updatedColumns[key].isSortedAsc = !currColumn[1].isSortedAsc;\r\n updatedColumns[key].isSorted = true;\r\n } else {\r\n updatedColumns[key] = { ...columns[key] };\r\n updatedColumns[key].isSortedAsc = true;\r\n updatedColumns[key].isSorted = false;\r\n }\r\n });\r\n\r\n this.props.sortAction(columnClicked, !currColumn[1].isSortedAsc);\r\n this.setState(prevState => ({\r\n columns: updatedColumns,\r\n //pageList: copyAndSort(prevState.pageList, currColumn[0], currColumn[1].isSortedAsc, currColumn[1].isDateTime)\r\n }));\r\n\r\n };\r\n\r\n // render() {\r\n // return (\r\n // \r\n this.onClickExtract(e)} />\r\n \r\n
\r\n \r\n {(isReadOnly ? false : (isReadAndExtractOnly ? false : (isReadAndWrite ? true : false))) &&\r\n
\r\n \r\n this.onClickExtract(e)} iconLeft=\"cloud-arrow-down\" iconSize=\"17px\" customClassName=\"header-option-list header-filter-button\" labelName=\"Extract List\" />\r\n }\r\n
\r\n \r\n //
\r\n // )\r\n // }\r\n\r\n}\r\n\r\nexport class TablePaginationExhibit2 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.onColumnClickAction = this.onColumnClickAction.bind(this);\r\n this.state = {\r\n columns: {},\r\n pageList: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.columns !== this.props.columns || prevProps.pageList !== this.props.pageList) {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n });\r\n }\r\n }\r\n\r\n onColumnClickAction = (columnClicked) => {\r\n const { columns, pageList } = this.state;\r\n const arrayColumns = [];\r\n let updatedColumns = {};\r\n Object.entries(columns).map(x => {\r\n arrayColumns.push(x);\r\n });\r\n\r\n let currColumn = arrayColumns.slice().filter(currCol => columnClicked === currCol[0])[0];\r\n Object.keys(columns).forEach(function (key) {\r\n if (key === currColumn[0]) {\r\n updatedColumns[key] = { ...columns[key] };\r\n updatedColumns[key].isSortedAsc = !currColumn[1].isSortedAsc;\r\n updatedColumns[key].isSorted = true;\r\n } else {\r\n updatedColumns[key] = { ...columns[key] };\r\n updatedColumns[key].isSortedAsc = true;\r\n updatedColumns[key].isSorted = false;\r\n }\r\n });\r\n\r\n this.props.onColumnClick(columnClicked, !currColumn[1].isSortedAsc);\r\n this.setState(prevState => ({\r\n columns: updatedColumns,\r\n //pageList: copyAndSort(prevState.pageList, currColumn[0], currColumn[1].isSortedAsc, currColumn[1].isDateTime)\r\n }));\r\n };\r\n\r\n onColumnSearch = (value) => {\r\n this.props.onColumnSearch(value);\r\n };\r\n\r\n onColumnSearchChange = (event, value) => {\r\n this.props.onColumnSearchChange(event, value);\r\n };\r\n\r\n render() {\r\n const {\r\n isColSearchShow,\r\n pages,\r\n paginationAction,\r\n resizePage,\r\n rowClickAction\r\n } = this.props;\r\n\r\n const {\r\n columns,\r\n pageList\r\n } = this.state;\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { TablePaginationExhibit2 as TablePagination2 } from \"../../../common/table/table-pagination.component\";\r\nimport { requestLogActions } from \"./../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { requestDetailsActions } from \"./../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { REQUEST_SUB_LINKS as RequestTable, TABLE_PAGINATION_KEY } from \"../../../../constants/external-constants\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../../utils/rbac-constants.utils\";\r\nimport { NoSubscription } from \"../../dashboard/no-subscription/no-subscription.component\";\r\nimport \"./../request-page.component.css\";\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\n\r\nclass OrderRequestTable extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.isDisplaySearch(false);\r\n this.props.setActiveRequestTable(RequestTable.orderRequest.id);\r\n this.props.fetchRequestLogItems();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.isDisplaySearch(false);\r\n this.props.setResetSearch();\r\n this.props.resetRequestLogData();\r\n }\r\n\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest, history } = this.props;\r\n setSelectedRequest(item);\r\n history.push(\"MyRequest/RequestDetail/Order/\" + item.OrderId);\r\n };\r\n\r\n onColumnSearch = () => {\r\n const { fetchRequestLogItems } = this.props;\r\n fetchRequestLogItems(0, RequestTable.orderRequest.id);\r\n }\r\n\r\n resizePage = (pageSize) => {\r\n const { resizeRequestLogs, fetchRequestLogItems } = this.props;\r\n resizeRequestLogs(pageSize)\r\n fetchRequestLogItems(0, RequestTable.orderRequest.id);\r\n }\r\n\r\n render() {\r\n const { orderRequestData, orderRequestLoaded, orderRequestFetchError, fetchRequestLogItems, fetchSortedRequestData, setRequestSearchValue } = this.props;\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyRequestsR, ACCESS_MODULE.MyRequestsRE, ACCESS_MODULE.MyRequestsRW]);\r\n\r\n return (\r\n \r\n {\r\n noAccess ?\r\n { this.onColumnSearch() }}\r\n onColumnSearchChange={setRequestSearchValue}\r\n isColSearchShow={this.props.displaySearch}\r\n totalPage={orderRequestData.Pagination.TotalEntries}\r\n resizePage={this.resizePage}\r\n key=\"table-pagination-sec\"\r\n classNameWrapper=\"overflow-auto\" \r\n />\r\n :\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog } = state;\r\n return {\r\n ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(OrderRequestTable);\r\n","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { TablePaginationExhibit1 as TablePagination } from \"../../../common/table/table-pagination.component\";\r\nimport { requestLogActions } from \"./../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { requestDetailsActions } from \"./../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { REQUEST_SUB_LINKS as RequestTable } from \"../../../../constants/external-constants\";\r\nimport { NoSubscription } from \"../../dashboard/no-subscription/no-subscription.component\";\r\nimport \"./../request-page.component.css\";\r\n\r\nclass OrderRequestQuotationTable extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n componentWillMount() {\r\n this.props.setActiveRequestTable(RequestTable.quotationRequest.id);\r\n this.props.fetchRequestLogItems(0, RequestTable.quotationRequest.id);\r\n }\r\n\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest, history } = this.props;\r\n setSelectedRequest(item, true);\r\n history.push(\"QuotationRequest/RequestDetail/Order/\" + item.OrderId);\r\n };\r\n\r\n render() {\r\n const { orderQuotationData, orderQuotationLoaded, orderQuotationFetchError, fetchRequestLogItems, fetchSortedRequestData } = this.props;\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n {\r\n orderQuotationLoaded ?\r\n orderQuotationFetchError ?\r\n Error in fetching data. :\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog } = state;\r\n return {\r\n ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(OrderRequestQuotationTable);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { TablePaginationExhibit2 as TablePagination2 } from \"../../../common/table/table-pagination.component\";\r\nimport { requestLogActions } from \"./../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { requestDetailsActions } from \"./../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { REQUEST_SUB_LINKS as RequestTable, TABLE_PAGINATION_KEY } from \"../../../../constants/external-constants\";\r\nimport { NoSubscription } from \"../../dashboard/no-subscription/no-subscription.component\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../../utils/rbac-constants.utils\";\r\nimport \"./../request-page.component.css\";\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\n\r\nclass OrderRequestApprovalTable extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.isDisplaySearch(false);\r\n this.props.setActiveRequestTable(RequestTable.approvalRequest.id);\r\n this.props.fetchRequestLogItems(0, RequestTable.approvalRequest.id);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.isDisplaySearch(false);\r\n this.props.setResetSearch();\r\n this.props.resetRequestLogData();\r\n }\r\n\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest, history } = this.props;\r\n setSelectedRequest(item);\r\n history.push(\"ApprovalRequest/RequestDetail/Order/\" + item.OrderId);\r\n };\r\n\r\n onColumnSearch = () => {\r\n const { fetchRequestLogItems } = this.props;\r\n fetchRequestLogItems(0, RequestTable.approvalRequest.id);\r\n }\r\n resizePage = (pageSize) => {\r\n const { resizeRequestLogs, fetchRequestLogItems } = this.props;\r\n resizeRequestLogs(pageSize)\r\n fetchRequestLogItems(0, RequestTable.approvalRequest.id);\r\n }\r\n\r\n render() {\r\n const { orderApprovalLoaded, orderApprovalFetchError, fetchRequestLogItems, fetchSortedRequestData, setRequestSearchValue, orderRequestData } = this.props;\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyRequestsRW]);\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n {\r\n noAccess ?\r\n { this.onColumnSearch() }}\r\n onColumnSearchChange={setRequestSearchValue}\r\n isColSearchShow={this.props.displaySearch}\r\n totalPage={orderRequestData.Pagination.TotalEntries}\r\n resizePage={this.resizePage}\r\n key=\"table-pagination-sec\"\r\n classNameWrapper=\"overflow-auto\" \r\n /> \r\n :\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog } = state;\r\n return {\r\n ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(OrderRequestApprovalTable);\r\n","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { TablePaginationExhibit2 as TablePagination2 } from \"../../../common/table/table-pagination.component\";\r\nimport { requestLogActions } from \"../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { requestDetailsActions } from \"../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { REQUEST_SUB_LINKS as RequestTable, TABLE_PAGINATION_KEY } from \"../../../../constants/external-constants\";\r\nimport { validateAccessModule } from \"../../../../utils/helpers.utils\";\r\nimport { ACCESS_MODULE, MATRIX_INDICATOR } from \"../../../../utils/rbac-constants.utils\";\r\nimport { NoSubscription } from \"../../dashboard/no-subscription/no-subscription.component\";\r\nimport \"./../request-page.component.css\";\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\n\r\nclass OrderAllRequestTable extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setActiveRequestTable(RequestTable.allRequest.id);\r\n this.props.fetchRequestLogItems(0, RequestTable.allRequest.id);\r\n }\r\n componentWillUnmount() {\r\n this.props.isDisplaySearch(false);\r\n this.props.setResetSearch();\r\n this.props.resetRequestLogData();\r\n }\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest, history } = this.props;\r\n setSelectedRequest(item);\r\n history.push(\"AllRequest/RequestDetail/Order/\" + item.OrderId);\r\n };\r\n\r\n onColumnSearch = () => {\r\n const { fetchRequestLogItems } = this.props;\r\n fetchRequestLogItems(0, RequestTable.allRequest.id);\r\n }\r\n\r\n resizePage = (pageSize) => {\r\n const { resizeRequestLogs, fetchRequestLogItems} = this.props;\r\n resizeRequestLogs(pageSize)\r\n fetchRequestLogItems(0, RequestTable.allRequest.id);\r\n }\r\n\r\n render() {\r\n const { orderAllRequestLoaded, orderAllRequestFetchError, fetchRequestLogItems, fetchSortedRequestData, setRequestSearchValue, orderRequestData } = this.props;\r\n let noAccess = validateAccessModule(MATRIX_INDICATOR.MatrixId, [ACCESS_MODULE.MyRequestsRW]);\r\n return (\r\n \r\n
\r\n }\r\n \r\n {\r\n noAccess ?\r\n { this.onColumnSearch() }}\r\n onColumnSearchChange={setRequestSearchValue}\r\n isColSearchShow={this.props.displaySearch}\r\n totalPage={orderRequestData.Pagination.TotalEntries}\r\n resizePage={this.resizePage}\r\n key=\"table-pagination-sec\"\r\n classNameWrapper=\"overflow-auto\"\r\n /> \r\n : \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog } = state;\r\n return {\r\n ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(OrderAllRequestTable);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { TablePaginationExhibit1 as TablePagination } from \"../../../common/table/table-pagination.component\";\r\nimport { requestLogActions } from \"./../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { requestDetailsActions } from \"./../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { REQUEST_SUB_LINKS as RequestTable } from \"../../../../constants/external-constants\";\r\nimport { NoSubscription } from \"../../dashboard/no-subscription/no-subscription.component\";\r\nimport \"./../request-page.component.css\";\r\n\r\nclass OrderRequestCoverageTable extends Component {\r\n constructor(props) {\r\n super();\r\n }\r\n\r\n componentWillMount() {\r\n this.props.setActiveRequestTable(RequestTable.coverageRequest.id);\r\n this.props.fetchRequestLogItems(0, RequestTable.coverageRequest.id);\r\n }\r\n\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest, history } = this.props;\r\n setSelectedRequest(item);\r\n history.push(\"CoverageRequest/RequestDetail/Order/\" + item.OrderId);\r\n };\r\n\r\n render() {\r\n const { orderCoverageData, orderCoverageLoaded, orderCoverageFetchError, fetchRequestLogItems, fetchSortedRequestData } = this.props;\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n {\r\n orderCoverageLoaded ?\r\n orderCoverageFetchError ?\r\n Error in fetching data. :\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestLog } = state;\r\n return {\r\n ...requestLog\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestLogActions, requestDetailsActions),\r\n dispatch\r\n )\r\n)(OrderRequestCoverageTable);\r\n","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { REQUEST_STATUS_DATA_DISPLAY as StatusDisplay } from '../../../../utils/constant.utils';\r\nimport { getRequestUserSessionData as getUserData} from '../../../../utils/helpers.utils'\r\nimport { REQUEST_SUB_LINKS as RequestTable, ORDER_STATUS as OrderStatus } from '../../../../constants/external-constants';\r\nimport { RequestDetailModal, ConfirmationModal, RejectConfirmationModal } from \"../../../common/modal/modal.component\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { requestDetailsActions } from \"../../../../store/external/request-reducer/request-details.reducer\";\r\nimport { requestLogActions } from \"../../../../store/external/request-reducer/request-log.reducer\";\r\nimport { csatActions } from \"../../../../store/external/csat-survey-reducer/csat-survey.reducer\";\r\n\r\nclass RequestDetailDisplay extends Component {\r\n constructor(props) {\r\n super();\r\n this.RequestDetailModal = React.createRef();\r\n this.ConfirmationModal = React.createRef();\r\n this.RejectConfirmationModal = React.createRef();\r\n this.handleApprovalClick = this.handleApprovalClick.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const { fetchRequestDetails, selectedItem, fetchRequestProgress, fetchOrderComments, fetchOwnerApproverDetails, isApprovedOrRejected, requestData, isShowSurvey } = this.props;\r\n this.showModal(selectedItem);\r\n fetchOwnerApproverDetails();\r\n fetchRequestDetails();\r\n fetchRequestProgress();\r\n fetchOrderComments();\r\n isApprovedOrRejected(selectedItem);\r\n isShowSurvey(selectedItem, false);\r\n }\r\n\r\n showModal = (obj) => {\r\n this.RequestDetailModal.current.handleShow();\r\n };\r\n\r\n resetUrl = () => {\r\n this.props.history.goBack();\r\n }\r\n\r\n handleApprovalClick = async e => {\r\n e.preventDefault();\r\n const { handleApprovalSubmission\r\n , fetchRequestDetails\r\n , fetchRequestProgress\r\n , fetchOrderComments\r\n , fetchOwnerApproverDetails\r\n , fetchRequestLogItems } = this.props;\r\n\r\n var isSuccess = await handleApprovalSubmission();\r\n if (isSuccess) {\r\n fetchOwnerApproverDetails();\r\n fetchRequestDetails();\r\n fetchRequestProgress();\r\n fetchOrderComments();\r\n fetchRequestLogItems();\r\n }\r\n };\r\n\r\n showConfirmationModal = e => {\r\n this.ConfirmationModal.current.handleShow();\r\n };\r\n\r\n showRejectConfirmationModal = e => {\r\n this.RejectConfirmationModal.current.handleShow();\r\n };\r\n\r\n handleCancellationOrder = async e => {\r\n e.preventDefault();\r\n\r\n this.ConfirmationModal.current.handleClose();\r\n\r\n const { handleCancelSubmission, item\r\n , fetchRequestLogItems\r\n , fetchRequestProgress, fetchOrderComments, fetchRequestDetails, activeRequestTable\r\n } = this.props;\r\n var isSuccess = await handleCancelSubmission(item);\r\n if (isSuccess) {\r\n fetchRequestDetails();\r\n fetchRequestProgress(false);\r\n fetchOrderComments();\r\n fetchRequestLogItems(0, activeRequestTable);\r\n }\r\n\r\n };\r\n\r\n handleRejectionOrder = async e => {\r\n e.preventDefault();\r\n\r\n this.RejectConfirmationModal.current.handleClose();\r\n\r\n const { handleRejectionCommentSubmission, selectedItem\r\n , fetchRequestLogItems\r\n , fetchRequestProgress, fetchOrderComments, fetchRequestDetails\r\n } = this.props;\r\n var isSuccess = await handleRejectionCommentSubmission(selectedItem, this.RejectConfirmationModal.current.state.rejectReason);\r\n if (isSuccess) {\r\n fetchRequestDetails();\r\n fetchRequestProgress(false);\r\n fetchOrderComments();\r\n fetchRequestLogItems(0, RequestTable.orderRequest.id);\r\n }\r\n\r\n };\r\n\r\n canCancelOrder(orderStatusId, isOwner, isRequestor) {\r\n \r\n var canCancel = true;\r\n var user \r\n const showComment = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n\r\n if (!(isOwner || isRequestor) || orderStatusId === OrderStatus.completed || orderStatusId === OrderStatus.progress_awaiting_submission || orderStatusId === OrderStatus.progress || orderStatusId === OrderStatus.canceled || orderStatusId === OrderStatus.rejected || orderStatusId === OrderStatus.approved || showComment === false) {\r\n canCancel = false;\r\n }\r\n\r\n return canCancel;\r\n };\r\n\r\n canHandleRequest(orderStatusId, costCode) {\r\n \r\n var canHandleRequest = true;\r\n var user = getUserData();\r\n const showRejectApprove = this.props.history.location.pathname.match(/Inventory.*/) === null ? true : false;\r\n\r\n if (!(user.employeeID == costCode?.EmployeeId) || orderStatusId === OrderStatus.completed || orderStatusId === OrderStatus.canceled || orderStatusId === OrderStatus.rejected || orderStatusId === OrderStatus.approved || orderStatusId === OrderStatus.progress || orderStatusId === OrderStatus.progress_awaiting_submission || showRejectApprove === false) {\r\n canHandleRequest = false;\r\n }\r\n\r\n return canHandleRequest;\r\n };\r\n\r\n render() {\r\n const { requestData, requestMilestones, requestActivities, requestComments, isLoaded, selectedItem, isQuotation, approverData, isApproverLoaded\r\n , data\r\n //decision actions\r\n , handleApprovalSubmission\r\n , handleRejectionClick\r\n , handleCancelRejectionClick\r\n , showRejectionCommentBox\r\n , showDecisionButtons\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { requestDetail, requestLog, csatSurveyRequest } = state;\r\n return {\r\n ...requestDetail\r\n , ...requestLog\r\n , csatSurveyRequest\r\n };\r\n },\r\n dispatch =>\r\n bindActionCreators(\r\n Object.assign({}, requestDetailsActions, requestLogActions, csatActions ),\r\n dispatch\r\n )\r\n)(RequestDetailDisplay);\r\n","import React, { Component } from 'react';\r\nimport { Redirect, Route, Switch } from 'react-router-dom';\r\nimport { USER_ROLES_ID as UserRoles, REQUEST_TYPE } from \"../../../constants/external-constants\";\r\nimport RequestPage from '../request/request-page.component'\r\nimport OrderRequestTable from '../request/request-log/request-log.component';\r\nimport OrderRequestQuotationTable from '../request/request-log/request-quotation.component';\r\nimport OrderRequestApprovalTable from '../request/request-log/request-approval.component';\r\nimport OrderAllRequestApprovalTable from '../request/request-log/request-all-log.component';\r\nimport OrderRequestCoverageTable from '../request/request-log/request-coverage.component';\r\nimport RequestDetailDisplay from \"../../external/request/request-details/request-details-modal-display.component\";\r\nimport CreateRequestDisplay from '../../external/request/create-request/create-request-modal-display.component';\r\n\r\nclass RequestPageLayout extends Component {\r\n\r\n render() {\r\n let dealName = sessionStorage.getItem('DealName');\r\n const roleId = parseInt(sessionStorage.getItem('UserRoleID'));\r\n let showAllRequest = roleId === UserRoles.manager || roleId === UserRoles.lineManager || JSON.parse(sessionStorage.getItem('IsWireLineApprover')) || roleId === UserRoles.admin;\r\n const requestTab = showAllRequest ? REQUEST_TYPE.allRequest : REQUEST_TYPE.orderRequest;\r\n return (\r\n \r\n \r\n \r\n { /*create request*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default RequestPageLayout;\r\n","import React, { Component } from 'react';\r\n\r\nclass ReportPage extends Component {\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default ReportPage;\r\n","import React, { Component } from 'react';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport '../report-page.component.css';\r\nimport ButtonIcon from \"../../../button\";\r\nimport { ORFSelect, ORFDropdownCheckbox, ORFButton } from '../../../common/forms/order-request-form.component';\r\n\r\n\r\nexport class OrderVolumeFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n hideFilter: false,\r\n selectedRegions: [],\r\n selectedAllRegions: false,\r\n regions: [\r\n {\r\n \"Key\": \"APAC\",\r\n \"Value\": \"APAC\"\r\n },\r\n {\r\n \"Key\": \"NE\",\r\n \"Value\": \"NE\"\r\n },\r\n {\r\n \"Key\": \"AFRIKA\",\r\n \"Value\": \"AFRIKA\"\r\n },\r\n {\r\n \"Key\": \"LAT\",\r\n \"Value\": \"LAT\"\r\n },\r\n {\r\n \"Key\": \"ME\",\r\n \"Value\": \"ME\"\r\n },\r\n {\r\n \"Key\": \"SEE\",\r\n \"Value\": \"SEE\"\r\n },\r\n {\r\n \"Key\": \"WE\",\r\n \"Value\": \"WE\"\r\n },\r\n {\r\n \"Key\": \"NAM\",\r\n \"Value\": \"NAM\"\r\n },\r\n {\r\n \"Key\": \"India\",\r\n \"Value\": \"India\"\r\n },\r\n {\r\n \"Key\": \"China\",\r\n \"Value\": \"China\"\r\n }\r\n ],\r\n years: [\r\n {\r\n \"Key\": \"2019\",\r\n \"Value\": \"2019\"\r\n },\r\n {\r\n \"Key\": \"2020\",\r\n \"Value\": \"2020\"\r\n },\r\n {\r\n \"Key\": \"2021\",\r\n \"Value\": \"2021\"\r\n }\r\n ],\r\n weeks: [\r\n {\r\n \"Key\": \"1\",\r\n \"Value\": \"1\"\r\n },\r\n {\r\n \"Key\": \"2\",\r\n \"Value\": \"2\"\r\n },\r\n {\r\n \"Key\": \"3\",\r\n \"Value\": \"3\"\r\n }\r\n ]\r\n }\r\n }\r\n\r\n onCheckDropdown = (e) => {\r\n const { selectedRegions, selectedAllRegions, regions } = this.state;\r\n const target = e.target;\r\n const value = target.value;\r\n let newSelectedValues = [];\r\n\r\n if ((this.getAllValues(regions).find(x => x === value) == undefined)) {\r\n newSelectedValues = selectedAllRegions ? [] : this.getAllValues(regions);\r\n } else {\r\n newSelectedValues = this.updateSelectedValues(value, selectedRegions);\r\n }\r\n\r\n this.setState({\r\n selectedAllRegions: newSelectedValues.length == regions.length,\r\n selectedRegions: newSelectedValues\r\n });\r\n }\r\n\r\n showHideFilter = (e,v) => {\r\n this.setState({\r\n hideFilter: !v,\r\n });\r\n }\r\n\r\n\r\n getKeyByValue = (object, value) => {\r\n return object.find(o => o.Value === value).Key;\r\n }\r\n getAllValues = (objects) => {\r\n var newList = [];\r\n objects.forEach(function (obj) {\r\n newList.push(obj.Value);\r\n })\r\n return newList;\r\n }\r\n\r\n getAllKeys = (objects) => {\r\n var newList = [];\r\n objects.forEach(function (obj) {\r\n newList.push(obj.Key);\r\n })\r\n return newList;\r\n }\r\n\r\n updateSelectedValues = (v, options) => {\r\n\r\n var newFilter = [...options];\r\n if (options.some((value) => value === v)) {\r\n newFilter = newFilter.filter((val) => val !== v);\r\n } else {\r\n newFilter.push(v);\r\n }\r\n\r\n return newFilter\r\n }\r\n\r\n render() {\r\n const { regions, selectedRegions, selectedAllRegions, years, weeks, hideFilter } = this.state;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { StackedBarChart , LegendComp } from '../../../common/graph/bar-graph.component';\r\nimport { ChartHeaderDropdown } from '../../../common/data-header/chart-header-dropdown.component';\r\nimport '../report-page.component.css';\r\n\r\nconst graphData = [\r\n { name: 'APAC', rejected: 1, cancelled: 2, waitingforauthorization: 3, approved: 2, inprogress: 1, completed:4},\r\n { name: 'WE', rejected: 2, cancelled: 4, waitingforauthorization: 5, approved: 1, inprogress: 2, completed:5},\r\n { name: 'SEE', rejected: 1, cancelled: 3, waitingforauthorization: 4, approved: 1, inprogress: 1, completed:6},\r\n { name: 'NE', rejected: 3, cancelled: 2, waitingforauthorization: 4, approved: 3, inprogress: 1, completed:4},\r\n { name: 'LAT', rejected: 2, cancelled: 1, waitingforauthorization: 3, approved: 1, inprogress: 3, completed:5}\r\n ];\r\n\r\nconst barData = [ {dataKey: 'rejected', name: 'Rejected', color:'#919eab'}, \r\n {dataKey: 'cancelled', name: 'Cancelled', color:'#d5002f'}, \r\n {dataKey: 'waitingforauthorization', name: 'Waiting for Authorization', color:'#ffc82c'}, \r\n {dataKey: 'approved', name: 'Approved', color:'#00baff'}, \r\n {dataKey: 'inprogress', name: 'In Progress', color:'#008eff'}, \r\n {dataKey: 'completed', name: 'Completed', color:'#7ec344'}\r\n]\r\n\r\nconst countData = [{ total: '500', description:'Total Count of Request'}]\r\n\r\nclass TemReqComp extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Order Volume\r\n
\r\n\r\n
\r\n \r\n
\r\n Week 20
\r\n\r\n alert(\"click\")} iconLeft=\"file-pdf\" iconSize=\"14px\" customClassName=\"pdf-button\" labelName=\"Customize Report\" />\r\n
\r\n \r\n alert(\"click\")} iconLeft=\"file-pdf\" iconSize=\"14px\" customClassName=\"pdf-button\" labelName=\"Export File\" />\r\n
\r\n \r\n this.showHideFilter(e, hideFilter)}>{hideFilter ? \"Show\" : \"Hide\"} Filter\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default TemReqComp;","import React, { Component } from 'react';\r\nimport { BarGraphWithLabel , LegendComp } from '../../../common/graph/bar-graph.component';\r\nimport { ChartHeaderDropdown } from '../../../common/data-header/chart-header-dropdown.component';\r\nimport '../report-page.component.css';\r\n\r\nconst graphData = [\r\n { name: \"APAC\", dfive: 13, dsixtofifteen: 13, dgreaterfifteen:0},\r\n { name: \"WE\", dfive: 0, dsixtofifteen: 12, dgreaterfifteen:0},\r\n { name: \"SEE\", dfive: 6, dsixtofifteen: 18, dgreaterfifteen:12},\r\n { name: \"NE\", dfive: 14, dsixtofifteen: 0, dgreaterfifteen:0},\r\n { name: \"LAT\", dfive: 12, dsixtofifteen: 12, dgreaterfifteen:14}\r\n ];\r\n\r\n\r\nconst countData = [ { total: '2', description:'Total Count <5 Days'},\r\n { total: '1', description:'Total Count 6-15 Days'},\r\n { total: '321', description:'Total Count >15 Days'}\r\n ];\r\n\r\nconst barData = [ \r\n {dataKey: 'dfive', name: '5 days', color:'#ffc82c'}, \r\n {dataKey: 'dsixtofifteen', name: '6-15 days', color:'#7ec344'}, \r\n {dataKey: 'dgreaterfifteen', name: '>15 days', color:'#919eab'}\r\n ];\r\n\r\nclass TemReqComp extends Component {\r\n\r\n \r\n render() { \r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default TemReqComp;","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport Icons from \"../../icon\";\r\nimport { TYPE_FUNCTION } from \"../../../constants/external-constants\";\r\nexport class CustomDropdown extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n isActive:false\r\n }\r\n }\r\n\r\n handleToggle=()=>{\r\n \r\n if (typeof this.props.toggleActiveState === TYPE_FUNCTION) { \r\n this.props.toggleActiveState();\r\n }else {\r\n this.setState({\r\n isActive: !this.state.isActive\r\n })\r\n } \r\n }\r\n \r\n render() {\r\n return(\r\n <>\r\n \r\n
\r\n {\r\n (this.state.isActive || this.props.activeDropdown )&& this.props.children\r\n } \r\n \r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { OrderVolumeFilter } from './order-volume/order-volume-filter.component';\r\nimport TemRequest from './../reports/order-volume/tem-request.component';\r\nimport AgeingProgress from './order-volume/ageing-progress.component';\r\nimport './report-page.component.css';\r\n\r\nclass OrderVolumePage extends Component {\r\n\r\n render() {\r\n return (\r\n {this.props.label}
\r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default OrderVolumePage;\r\n","import React from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Component } from \"react\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport { InventoryConfirmation } from \"../modal/inventory-confirmation.component\";\r\nimport { ACTION_TYPES, MAX_LENGTH } from \"../../../../constants/external-constants\";\r\nimport { addPlanDetailActions } from \"../../../../store/external/inventory/details-view/add-plan-details.reducer\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport { TRANSLATIONS } from '../../../../utils/constant.utils';\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\nimport CustomSearchableSelectWrapper from \"../../../common/custom-form/custom-searchable-select-wrapper.component\";\r\nimport CustomSearchableSelect from \"../../../common/custom-form/custom-searchable-select.component\";\r\nimport TableWithButton from \"../../../common/details-table/table-with-button.component\";\r\nimport { NotificationModal } from \"../../../common/modal/notification-modal.component\";\r\nimport { CustomDropdown } from \"../../../common/custom-form/custom-dropdown.component\";\r\nimport { ConfirmationNotificationModal } from \"../../../common/modal/confirmation-modal.component\";\r\nimport { CONFIRMATION_VALUE } from \"../../../../utils/constant.utils\";\r\n\r\nclass AddPlanDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n activeDropdown: false,\r\n showTable: false,\r\n enableAddBtn: true,\r\n inventorycircuit_plans_Id: null,\r\n showNotif: false,\r\n showModal: false,\r\n notifTitle: '',\r\n isUpdate: false,\r\n isNewPlan: false,\r\n hasSelectedNewPlan: false,\r\n originalPlanComponents: [],\r\n }\r\n }\r\n\r\n loadPlanDetails(planId, useOriginalComponent) {\r\n this.props.getInventoryCircuitPlanComponents(planId, (useOriginalComponent && this.props.isOriginalComponent) ? true : useOriginalComponent);\r\n\r\n this.setState({\r\n isUpdate: this.updatePlan(planId)\r\n });\r\n }\r\n\r\n ShowTable() {\r\n this.props.showDetails(true)\r\n }\r\n\r\n clearField(){\r\n //please change the actual state of your component\r\n this.setState({ filterSelected: \"\", showTable:false })\r\n this.searchableChange(0)\r\n }\r\n\r\n componentDidMount() {;\r\n const { getInventoryCircuitPlanDetails, getInventoryCircuitPlanComponents, circuitId, planId,\r\n getInventoryPlanTypesByVendorByCircuitType, circuitTypeId, vendorId } = this.props;\r\n const { hasSelectedNewPlan } = this.state;\r\n getInventoryPlanTypesByVendorByCircuitType(vendorId, circuitTypeId);\r\n if (circuitId !== 0 && circuitId !== undefined && circuitId !== null && planId !== 0 && planId !== undefined && planId !== null && !hasSelectedNewPlan) {\r\n getInventoryCircuitPlanComponents(planId, true);\r\n }\r\n else {\r\n getInventoryCircuitPlanComponents(planId, false);\r\n }\r\n getInventoryCircuitPlanDetails(circuitId);\r\n }\r\n\r\n componentWillUnmount() {\r\n const { resetPlanDetails } = this.props;\r\n this.clearField();\r\n resetPlanDetails();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.isTogglePlan !== this.props.isTogglePlan) {\r\n // Close the dropdown if isTogglePlan changes\r\n this.setState({ activeDropdown: false });\r\n }\r\n if (prevProps.isOriginalComponent !== this.props.isOriginalComponent) {\r\n this.setState({ hasSelectedNewPlan: this.props.isOriginalComponent ? false : true });\r\n }\r\n }\r\n cancelBtn() {\r\n this.setState({ enableAddBtn: false })\r\n const { inventoryCicuitPlanDetailsForm } = this.props;\r\n const { isNewPlan } = this.state;\r\n\r\n if (!inventoryCicuitPlanDetailsForm.PlanId || isNewPlan) {\r\n this.clearField()\r\n }\r\n\r\n this.isActiveDropDownState();\r\n if(this.props.titleBtn===ACTION_TYPES.Update) {\r\n this.props.toggleDropdown()\r\n this.props.showDetails(true)\r\n this.props.enableUpdate(false)\r\n\r\n }\r\n }\r\n\r\n onChangeInventoryCircuitPlanSelect = (indicator, item) => {\r\n const { getInventoryCircuitPlanComponents, inventoryCircuitPlanDetails } = this.props;\r\n\r\n if (item !== inventoryCircuitPlanDetails.PlanId) {\r\n getInventoryCircuitPlanComponents(item);\r\n }\r\n \r\n this.setState({\r\n enableUpdate: true,\r\n\r\n });\r\n }\r\n\r\n transformOptions = (option) => {\r\n // use to transform data structure aligned to custom select dropdown\r\n let newOption;\r\n newOption = option?.map(elem => {\r\n return {\r\n FilterId: elem.Key || elem.PlanId,\r\n FilterName: elem.Value || elem.PlanName,\r\n FilterValue: elem.Value || elem.PlanName,\r\n }\r\n })\r\n return newOption;\r\n }\r\n\r\n searchableChange(event, model) {\r\n this.loadPlanDetails(event, false);\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '')\r\n return TRANSLATIONS[TRANSLATIONS['defaultLocaleLanguage']][key];\r\n\r\n return TRANSLATIONS[locale][key];\r\n }\r\n\r\n onRowClickPlanDetails = (index) => {\r\n const { planDetails } = this.props.inventoryCircuitPlanDetails;\r\n const { hasSelectedNewPlan, originalPlanComponents } = this.state;\r\n\r\n const planId = planDetails.datatable[0]?.dataItem[0]?.PlanId;\r\n\r\n if (!planId) return;\r\n\r\n if (hasSelectedNewPlan) {\r\n this.loadPlanDetails(planId, false);\r\n } else {\r\n this.loadPlanDetails(planId, true);\r\n\r\n if (originalPlanComponents.length === 0) {\r\n this.setState({\r\n originalPlanComponents: this.props.inventoryCircuitPlanDetails.planComponents?.Data?.Items || []\r\n });\r\n }\r\n }\r\n this.isActiveDropDownState();\r\n\r\n this.setState({\r\n isUpdate: true\r\n });\r\n\r\n };\r\n\r\n isActiveDropDownState = () => {\r\n this.setState(prevState => ({ activeDropdown: !prevState.activeDropdown }));\r\n }\r\n\r\n toggleActiveState = () => {\r\n this.setState({ isUpdate: false });\r\n if (this.hasExistingPlan()) {\r\n this.setState({ activeDropdown: false });\r\n }\r\n else{\r\n this.setState(prevState => ({ activeDropdown: !prevState.activeDropdown, isNewPlan: true }));\r\n }\r\n }\r\n\r\n deletePlanDetails = (index) => {\r\n this.props.deletePlanDetails();\r\n this.props.handleChangesStatus('planDetailsChange', true, \"0.00\", true);\r\n this.clearField();\r\n this.setState({ activeDropdown: false });\r\n }\r\n\r\n handleCloseNotif = () => {\r\n this.setState({ showNotif: false });\r\n }\r\n handleOpenNotif = () => {\r\n this.setState({\r\n showNotif: true,\r\n notifTitle: 'Delete'\r\n });\r\n }\r\n\r\n hasExistingPlan = () => {\r\n const { planDetails } = this.props.inventoryCircuitPlanDetails;\r\n let planExist = false;\r\n if (planDetails.datatable.length > 0) {\r\n planExist = planDetails.datatable[0].dataItem.length > 0;\r\n }\r\n\r\n return planExist;\r\n }\r\n\r\n updatePlan = (planId) => {\r\n const { planDetails } = this.props.inventoryCircuitPlanDetails;\r\n let update = false;\r\n\r\n if (planDetails.datatable.length > 0) {\r\n const dataItem = planDetails.datatable[0].dataItem;\r\n if (dataItem.length > 0) {\r\n update = dataItem.findIndex(r => r?.PlanId == planId) != -1; \r\n }\r\n }\r\n\r\n return update;\r\n }\r\n\r\n addPlanDetails = () => {\r\n this.props.addPlanDetails();\r\n this.setState({\r\n activeDropdown: false\r\n });\r\n }\r\n\r\n onClickUpdate = () => {\r\n this.setState({\r\n showModal: true,\r\n notifTitle: 'Update',\r\n isUpdate: true\r\n })\r\n }\r\n\r\n onClickAdd = () =>{\r\n\r\n this.setState({\r\n showModal: true,\r\n notifTitle: 'Add'\r\n })\r\n }\r\n\r\n isUpdateBtnDisable = (state, form, circuitPlans) => {\r\n const { isUpdate, originalPlanComponents, hasSelectedNewPlan } = this.state;\r\n const { PlanId } = form;\r\n var componentsHasChange = hasSelectedNewPlan ? false : ((this.props.planId == PlanId ) ? this.props.inventoryCircuitPlanDetails.planComponents?.Data?.Items.length !== originalPlanComponents.length : true);\r\n if (isUpdate) { \r\n const isFormValid = PlanId;\r\n const hasChange = circuitPlans?.PlanId !== Number(PlanId);\r\n if(!PlanId) {\r\n return true\r\n }\r\n return isFormValid && hasChange && !componentsHasChange;\r\n }\r\n\r\n return false\r\n }\r\n\r\n handleConfirmationModal = (buttonType) =>{\r\n if (buttonType === CONFIRMATION_VALUE.Ok){\r\n this.addPlanDetails();\r\n const mrc = this.props.inventoryCircuitPlanDetails.planComponents?.Data?.Items?.reduce((sum, item) => sum + (item.ComponentCost || 0), 0);\r\n this.props.handleChangesStatus('planDetailsChange', true, mrc, true);\r\n this.setState( prev => ({\r\n showModal: !prev.showModal,\r\n showNotif: false,\r\n isUpdate: true,\r\n hasSelectedNewPlan: true\r\n }))\r\n }else{\r\n this.setState({\r\n showModal: false,\r\n isUpdate: false\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n planDetails,\r\n circuitPlans,\r\n planComponents,\r\n } = this.props.inventoryCircuitPlanDetails;\r\n const {\r\n inventoryCicuitPlanDetailsForm,\r\n hasPendingApproval,\r\n } = this.props;\r\n\r\n const { isUpdate } = this.state\r\n\r\n const hasExistingPlan = this.hasExistingPlan();\r\n const enableButton = inventoryCicuitPlanDetailsForm.PlanId;\r\n const sectionTitle = hasExistingPlan ? this.toLocaleLanguage('plan_details') : this.toLocaleLanguage('add_plan_details');\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n this.searchableChange(e, \"inventoryCicuitPlanDetailsForm.PlanId\")}\r\n placeholder={`${this.toLocaleLanguage('select_placeholder')}`}\r\n tagName='PlanName'\r\n optionLabelKey={{\r\n Key: 'PlanId',\r\n Value: 'PlanNameOrderable',\r\n Label: 'PlanNameOrderable',\r\n }}\r\n maxLength={MAX_LENGTH.limit_255}\r\n />\r\n { !inventoryCicuitPlanDetailsForm.PlanId || planComponents.Data.Items.length > 0 &&\r\n <>\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n Cancel adding plan details\r\n
\r\n\r\n\r\n \r\n {planDetails?.datatable[0]?.dataItem?.length === 0 ? `${ACTION_TYPES.Add}` : `${ACTION_TYPES.Update}`}\r\n \r\n {planDetails?.datatable[0]?.dataItem?.length === 0 ? `${ACTION_TYPES.Add}` : `${ACTION_TYPES.Update}`} Plan Details\r\n
\r\n \r\n
\r\n }\r\n \r\n )\r\n }\r\n};\r\nexport default connect(\r\n state => {\r\n const { inventoryCircuitPlanDetails, translation } = state;\r\n const { inventoryCicuitPlanDetailsForm } = state.form;\r\n return {\r\n inventoryCircuitPlanDetails\r\n , inventoryCicuitPlanDetailsForm\r\n , ...translation\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, addPlanDetailActions),\r\n dispatch\r\n )\r\n)(AddPlanDetails);","import React, { Component } from \"react\";\r\nimport { Control } from \"react-redux-form\";\r\n\r\nexport class ControlSelect extends Component {\r\n onChangeAction = (model, value) => {\r\n const { onChangeAction } = this.props;\r\n if (onChangeAction !== undefined && onChangeAction !== null) {\r\n onChangeAction(model, value);\r\n }\r\n };\r\n\r\n render() {\r\n const { model, label, value, options, isRequired, placeholder, onChangeAction, className } = this.props;\r\n let validators = {};\r\n\r\n if (isRequired) {\r\n Object.assign(validators, {\r\n required: (val) => val && val.length\r\n });\r\n }\r\n\r\n const selectedOptions = options.length > 0 ? options.filter(r => r.FilterName == value || r.FilterValue == value) : [];\r\n const selectedValue = selectedOptions.length > 0 ? selectedOptions[0].FilterValue : \"\";\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n options.map(item => {\r\n return ()\r\n })\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class ControlText extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n value: props.value || ''\r\n }\r\n }\r\n\r\n handleChange = (e) =>{\r\n this.setState({value: e.target.value});\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n \r\n if (this.props.value !== prevProps.value) {\r\n this.setState({ value: this.props.value || '' });\r\n }\r\n }\r\n\r\n render() {\r\n const { model, label, disabled, isRequired, maxLength, placeholder, customClass } = this.props;\r\n let validators = {};\r\n\r\n if (isRequired) {\r\n Object.assign(validators, {\r\n required: (val) => val && val.length\r\n });\r\n }\r\n if (maxLength) {\r\n Object.assign(validators, {\r\n length: (val) => !val || (val && val.length <= maxLength)\r\n });\r\n }\r\n return (\r\n {label} {isRequired && *}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class ControlTextarea extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n value: props.value || \"\",\r\n }\r\n\r\n }\r\n handleChange = (e) => {\r\n this.setState({ value: e.target.value });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n \r\n if (this.props.value !== prevProps.value) {\r\n this.setState({ value: this.props.value || '' });\r\n }\r\n }\r\n render() {\r\n const { model, label, rows, isRequired, maxLength, colClassName, placeholder } = this.props;\r\n let validators = {};\r\n\r\n if (isRequired) {\r\n Object.assign(validators, {\r\n required: (val) => val && val.length\r\n });\r\n }\r\n if (maxLength) {\r\n Object.assign(validators, {\r\n length: (val) => !val || (val && val.length <= maxLength)\r\n });\r\n }\r\n\r\n return (\r\n \r\n
\r\n {label} {isRequired && *}
\r\n \r\n
\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Errors } from \"react-redux-form\";\r\n\r\nimport { ControlSelect, ControlText, ControlTextarea } from \"../../../../common/custom-form/control-field.component\";\r\nimport { CustomDropdown } from \"../../../../common/custom-form/custom-dropdown.component\";\r\nimport { inventoryCircuitSimActions } from \"../../../../../store/external/inventory/details-view/add-sim.reducer\";\r\nimport { ACTION_TYPES, Selected_Index } from \"../../../../../constants/external-constants\";\r\nimport Translation from \"../../../../../components/common/translation/translation.component\";\r\n\r\nimport TableWithButton from \"../../../../common/details-table/table-with-button.component\";\r\nimport { ConfirmationNotificationModal } from \"../../../../common/modal/confirmation-modal.component\";\r\nimport { NotificationModal } from \"../../../../common/modal/notification-modal.component\";\r\nimport { CONFIRMATION_VALUE } from \"../../../../../utils/constant.utils\";\r\nimport { assignDefaultIfEmptyString, hasObjectWithProperty } from '../../../../../utils/helpers.utils';\r\n\r\nclass AddSim extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n updateSimDetails: false,\r\n activeDropdown: false,\r\n showDetails: false,\r\n showModal: false,\r\n showNotif: false,\r\n notifTitle: null,\r\n tableLength: 0\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { circuitId, getCircuitSimList } = this.props; \r\n getCircuitSimList(circuitId).then(() =>{\r\n const { circuitSimList } = this.props.inventoryCircuitSIM;\r\n const tableLength = circuitSimList?.datatable[0]?.dataItem?.length;\r\n this.setState({tableLength})\r\n }); \r\n }\r\n\r\n componentWillUnmount() {\r\n const { resetCircuitSimForm, resetCircuitSimDetails } = this.props;\r\n resetCircuitSimForm();\r\n resetCircuitSimDetails();\r\n }\r\n\r\n showDetails(value) {\r\n this.setState({\r\n showDetails: value\r\n });\r\n }\r\n\r\n onClickCancel = () => {\r\n const { resetCircuitSimForm, toggleDropdown } = this.props;\r\n this.toggleActiveState();\r\n resetCircuitSimForm();\r\n\r\n this.setState({\r\n updateSimDetails: false\r\n });\r\n }\r\n onClickAdd = () =>{\r\n\r\n this.setState({\r\n showModal: true,\r\n notifTitle: 'added'\r\n })\r\n }\r\n handleConfirmationModal = (buttonType) =>{\r\n if (buttonType === CONFIRMATION_VALUE.Ok){\r\n this.state.updateSimDetails ? this.updateCircuitSIM() : this.addCircuitSIM()\r\n this.props.handleChangesStatus('simChange', true);\r\n this.setState( prev => ({\r\n showModal: !prev.showModal,\r\n showNotif: false\r\n }))\r\n }else{\r\n this.setState({\r\n showModal: false\r\n });\r\n }\r\n }\r\n\r\n toggleActiveState = () => {\r\n this.setState(prevState => ({ activeDropdown: !prevState.activeDropdown }));\r\n }\r\n\r\n onRowClick = (index) => {\r\n const { toggleDropdown, viewCircuitSimItem } = this.props;\r\n viewCircuitSimItem(index);\r\n\r\n this.setState({\r\n activeDropdown: true,\r\n updateSimDetails: true\r\n });\r\n }\r\n\r\n updateCircuitSIM = () => {\r\n const { updateCircuitSimItem, resetCircuitSimForm, toggleDropdown } = this.props;\r\n\r\n updateCircuitSimItem();\r\n toggleDropdown(Selected_Index.i_Five);\r\n resetCircuitSimForm();\r\n\r\n this.setState({\r\n updateSimDetails: false,\r\n notifTitle: 'updated',\r\n activeDropdown: false\r\n });\r\n }\r\n\r\n addCircuitSIM = () => {\r\n const { addCircuitSimItem, resetCircuitSimForm, toggleDropdown } = this.props;\r\n\r\n addCircuitSimItem();\r\n toggleDropdown(Selected_Index.i_Five);\r\n resetCircuitSimForm();\r\n this.toggleActiveState(false);\r\n }\r\n deleteCircuitSimItem = (index) =>{\r\n const {deleteCircuitSimItem, handleChangesStatus} = this.props;\r\n\r\n const {circuitSimList} = this.props.inventoryCircuitSIM;\r\n\r\n deleteCircuitSimItem(index); \r\n\r\n const updatedSimList = circuitSimList;\r\n\r\n let newTable = updatedSimList?.datatable[0]?.dataItem;\r\n\r\n newTable.splice(index, 1); \r\n\r\n handleChangesStatus('simChange', true);\r\n \r\n\r\n const containsObjectWithID = hasObjectWithProperty(newTable, \"ID\", -1);\r\n\r\n if(containsObjectWithID || this.state.tableLength !== newTable.length){\r\n handleChangesStatus('simChange', true);\r\n }else{\r\n handleChangesStatus('simChange', false);\r\n }\r\n }\r\n handleCloseNotif = () =>{\r\n this.setState({showNotif:false});\r\n }\r\n handleOpenNotif = () =>{\r\n this.setState({\r\n showNotif: true,\r\n notifTitle: 'deleted'\r\n });\r\n }\r\n\r\n render() {\r\n const { inventoryCircuitSIMForm, translator, hasPendingApproval } = this.props;\r\n const { circuitSimList, simTypes, simRanks } = this.props.inventoryCircuitSIM;\r\n const enableAddBtn = inventoryCircuitSIMForm.TypeID && inventoryCircuitSIMForm.Rank && inventoryCircuitSIMForm.SerialNumber;\r\n const enableUpdateBtn = this.state.updateSimDetails ? (inventoryCircuitSIMForm.TypeID && inventoryCircuitSIMForm.Rank && inventoryCircuitSIMForm.SerialNumber) &&\r\n (circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].AdditionalInformation != assignDefaultIfEmptyString(inventoryCircuitSIMForm.AdditionalInformation, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].PINNumber != assignDefaultIfEmptyString(inventoryCircuitSIMForm.PINNumber, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].PUK1 != assignDefaultIfEmptyString(inventoryCircuitSIMForm.PUK1, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].PUK2 != assignDefaultIfEmptyString(inventoryCircuitSIMForm.PUK2, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].ProductName != assignDefaultIfEmptyString(inventoryCircuitSIMForm.ProductName, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].Rank != inventoryCircuitSIMForm.Rank ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].SIM != assignDefaultIfEmptyString(inventoryCircuitSIMForm.SIM, null) ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].SerialNumber != inventoryCircuitSIMForm.SerialNumber ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].Type != inventoryCircuitSIMForm.Type ||\r\n circuitSimList.datatable[0].dataItem[inventoryCircuitSIMForm.ID].TypeID != inventoryCircuitSIMForm.TypeID\r\n ? true : false) : false;\r\n\r\n return (\r\n <>\r\n {label} {isRequired && *}
\r\n \r\n
\r\n {circuitSimList.datatable.length > 0 && circuitSimList.datatable[0].dataItem.length > 0 &&\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {
\r\n \r\n {`${this.state.updateSimDetails ? ACTION_TYPES.Update : ACTION_TYPES.Add}`}\r\n \r\n {`${this.state.updateSimDetails ? 'Update sim details' : 'Add SIM details'}`}\r\n
\r\n \r\n this.deleteCircuitSimItem(index)}\r\n rowClickAction={this.onRowClick}\r\n updateNotifTitle={this.updateNotifTitle}\r\n handleOpenNotif={this.handleOpenNotif}\r\n /> \r\n
\r\n\r\n }\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { inventoryCircuitSIM } = state;\r\n const { inventoryCircuitSIMForm } = state.form;\r\n return {\r\n inventoryCircuitSIM\r\n , inventoryCircuitSIMForm\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, inventoryCircuitSimActions),\r\n dispatch\r\n )\r\n)(AddSim);","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport { ControlSelect, ControlText, ControlTextarea } from \"../../../../common/custom-form/control-field.component\";\r\nimport { InventoryConfirmation } from \"../../modal/inventory-confirmation.component\";\r\nimport { SectionDataTable } from \"../details-table/details-table.component\";\r\nimport { CustomDropdown } from \"../../../../common/custom-form/custom-dropdown.component\";\r\nimport CustomSearchableSelectWrapper from \"../../../../common/custom-form/custom-searchable-select-wrapper.component\";\r\nimport { inventoryCircuitEquipActions } from \"../../../../../store/external/reports-reducer/inventory/details-view/add-equipment.reducer\";\r\nimport { ACTION_TYPES, Selected_Index, EQUIPMENT_TYPE, MAX_LENGTH, DATA_TYPE } from \"../../../../../constants/external-constants\";\r\nimport {\r\n SelectFieldFloatingLabel as Select, InputFieldFloatingLabel as InputField\r\n} from \"../../../../common/custom-form/select-filter.component\";\r\nimport Translation from \"../../../../../components/common/translation/translation.component\";\r\nimport { ConfirmationNotificationModal } from \"../../../../common/modal/confirmation-modal.component\";\r\nimport { NotificationModal } from \"../../../../common/modal/notification-modal.component\";\r\nimport TableWithButton from \"../../../../common/details-table/table-with-button.component\";\r\nimport { assignDefaultIfEmptyString, hasObjectWithProperty } from \"../../../../../utils/helpers.utils\";\r\n\r\nclass AddEquipment extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n updateEquipDetails: false,\r\n activeDropdown: false,\r\n showDetails: false,\r\n showModal: false,\r\n showNotif: false,\r\n notifTitle: null,\r\n tableLength: 0,\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { circuitId, vendorId, getCircuitEquipList } = this.props;\r\n getCircuitEquipList(circuitId, vendorId).then(() =>{\r\n const { circuitEquipList } = this.props.inventoryCircuitEquip;\r\n const tableLength = circuitEquipList?.datatable[0]?.dataItem?.length;\r\n this.setState({tableLength})\r\n });\r\n \r\n }\r\n componentDidUpdate(prevProps) {\r\n const { circuitId, vendorId, getCircuitEquipList } = this.props;\r\n if (this.props.vendorId !== prevProps.vendorId) {\r\n getCircuitEquipList(circuitId, vendorId).then(() =>{});;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { resetCircuitEquipForm, resetCircuitEquipDetails } = this.props;\r\n resetCircuitEquipForm();\r\n resetCircuitEquipDetails();\r\n }\r\n\r\n showDetails(value) {\r\n this.setState({\r\n showDetails: value\r\n });\r\n }\r\n\r\n onClickCancel = () => {\r\n const { resetCircuitEquipForm, toggleDropdown } = this.props;\r\n this.toggleActiveState();\r\n resetCircuitEquipForm();\r\n\r\n this.setState({\r\n updateEquipDetails: false\r\n });\r\n }\r\n\r\n onRowClick = (index) => {\r\n const { toggleDropdown, viewCircuitEquipItem } = this.props;\r\n this.toggleActiveState();\r\n viewCircuitEquipItem(index);\r\n\r\n this.setState({\r\n updateEquipDetails: true\r\n });\r\n }\r\n\r\n updateCircuitEquip = () => {\r\n const { updateCircuitEquipItem, resetCircuitEquipForm, toggleDropdown } = this.props;\r\n\r\n updateCircuitEquipItem();\r\n toggleDropdown(Selected_Index.i_Six);\r\n resetCircuitEquipForm();\r\n this.toggleActiveState(false);\r\n\r\n this.setState({\r\n updateEquipDetails: false,\r\n notifTitle: 'updated'\r\n });\r\n }\r\n\r\n addCircuitEquip = () => {\r\n const { addCircuitEquipItem, resetCircuitEquipForm, toggleDropdown } = this.props;\r\n \r\n addCircuitEquipItem();\r\n toggleDropdown(Selected_Index.i_Six);\r\n resetCircuitEquipForm();\r\n this.toggleActiveState(false);\r\n }\r\n onClickAdd = () =>{\r\n\r\n this.setState({\r\n showModal: true,\r\n notifTitle: 'added'\r\n })\r\n\r\n }\r\n\r\n toggleActiveState = () => {\r\n this.setState(prevState => ({ activeDropdown: !prevState.activeDropdown }));\r\n }\r\n\r\n handleConfirmationModal = (buttonType) =>{\r\n if(buttonType === \"ok\"){\r\n this.state.updateEquipDetails ? this.updateCircuitEquip() : this.addCircuitEquip()\r\n this.props.handleChangesStatus('equipmentChange', true)\r\n this.setState( prev => ({\r\n showModal: false,\r\n showNotif: false\r\n }))\r\n }else{\r\n this.setState({\r\n showModal: false\r\n });\r\n } \r\n }\r\n handleCloseNotif = () =>{\r\n this.setState({showNotif:false});\r\n }\r\n\r\n handleOpenNotif = () =>{\r\n this.setState({\r\n showNotif: true,\r\n notifTitle: 'deleted'\r\n });\r\n }\r\n \r\n isUpdateButtonEnabled = (state, form, circuitList) => {\r\n // Extract relevant properties from the objects\r\n const {\r\n updateEquipDetails\r\n } = state;\r\n const {\r\n TypeId,\r\n ModelId,\r\n IMEISerialNumber,\r\n StatusId,\r\n Price,\r\n ID,\r\n AssetTagNumber,\r\n ProductName,\r\n PartCode,\r\n AdditionalInformation\r\n } = form;\r\n const dataItem = circuitList.datatable[0].dataItem[ID];\r\n \r\n if (updateEquipDetails) {\r\n const isIMEIRequired = TypeId == EQUIPMENT_TYPE.Device ? IMEISerialNumber : true;\r\n const isFormValid =\r\n TypeId && ModelId && isIMEIRequired && StatusId && Price;\r\n\r\n const hasChanged =\r\n dataItem?.TypeId !== Number(TypeId) ||\r\n dataItem?.ModelId !== Number(ModelId) ||\r\n dataItem?.StatusId !== Number(StatusId) ||\r\n dataItem?.IMEISerialNumber !== IMEISerialNumber ||\r\n dataItem?.AssetTagNumber !== assignDefaultIfEmptyString(AssetTagNumber, null) ||\r\n dataItem?.ProductName !== ProductName ||\r\n dataItem?.PartCode !== assignDefaultIfEmptyString(PartCode, null) ||\r\n dataItem?.Price !== Price ||\r\n dataItem?.AdditionalInformation !== assignDefaultIfEmptyString(AdditionalInformation, null);\r\n \r\n return isFormValid && hasChanged;\r\n }\r\n \r\n return false;\r\n }\r\n\r\n deleteCircuitEquipItem = (index) =>{\r\n const {deleteCircuitEquipItem, handleChangesStatus} = this.props;\r\n const { circuitEquipList } = this.props.inventoryCircuitEquip;\r\n\r\n deleteCircuitEquipItem(index);\r\n\r\n const updatedCircuitEquipList = circuitEquipList;\r\n\r\n let newTable = updatedCircuitEquipList?.datatable[0]?.dataItem;\r\n\r\n newTable.splice(index, 1); \r\n\r\n handleChangesStatus('equipmentChange', true)\r\n \r\n\r\n const containsObjectWithID = hasObjectWithProperty(newTable, \"ID\", -1);\r\n\r\n if(containsObjectWithID || this.state.tableLength !== newTable.length){\r\n handleChangesStatus('equipmentChange', true)\r\n }else{\r\n handleChangesStatus('equipmentChange', false)\r\n\r\n }\r\n }\r\n\r\n render() {\r\n const {inventoryCircuitEquipForm, onServiceModelSelect, translator, hasPendingApproval } = this.props;\r\n const { circuitEquipList, equipTypes, equipModels, equipDevices, equipAccessories, equipStatuses } = this.props.inventoryCircuitEquip;\r\n const isDevice = inventoryCircuitEquipForm.TypeId == EQUIPMENT_TYPE.Device ? true : false;\r\n const isIMEIRequired = isDevice ? inventoryCircuitEquipForm.IMEISerialNumber : true;\r\n const enableAddBtn = inventoryCircuitEquipForm.TypeId && inventoryCircuitEquipForm.ModelId && isIMEIRequired && inventoryCircuitEquipForm.StatusId && inventoryCircuitEquipForm.Price;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {circuitEquipList.datatable.length > 0 && circuitEquipList.datatable[0].dataItem.length > 0 &&\r\n \r\n
\r\n \r\n \r\n {this.state.updateEquipDetails ?
\r\n \r\n \r\n {this.state.updateEquipDetails ?
\r\n \r\n this.deleteCircuitEquipItem(index)}\r\n rowClickAction={this.onRowClick}\r\n handleOpenNotif={this.handleOpenNotif}\r\n /> \r\n
\r\n }\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { inventoryCircuitEquip } = state;\r\n const { inventoryCircuitEquipForm } = state.form;\r\n return {\r\n inventoryCircuitEquip\r\n , inventoryCircuitEquipForm\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, inventoryCircuitEquipActions),\r\n dispatch\r\n )\r\n)(AddEquipment);","import { Component } from \"react\";\r\nimport { TabberButton } from \"../../../../common/custom-form/tabber-button.component\";\r\nimport Icons from \"../../../../icon\";\r\nimport { InventoryConfirmation } from \"../../modal/inventory-confirmation.component\";\r\nimport { TYPE_FUNCTION, ACTION_TYPES } from \"../../../../../constants/external-constants\";\r\nexport class DetailsDataTable extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n showUpdateBtn:false,\r\n editMode: false,\r\n dataItem:this.props.datatable,\r\n\r\n }\r\n }\r\n ShowUpdateBtn(){\r\n this.setState({showUpdateBtn:true})\r\n this.enableEditMode()\r\n }\r\n HideUpdateBtn(){\r\n\r\n this.setState({showUpdateBtn:false}) \r\n this.enableEditMode() \r\n }\r\n\r\n enableEditMode = () => {\r\n this.setState((prevState) => ({\r\n editMode: !prevState.editMode,\r\n }));\r\n };\r\n\r\n enableUpdate(){\r\n if (typeof this.props.enableUpdate === TYPE_FUNCTION) {\r\n this.props.enableUpdate(true)\r\n }\r\n if (typeof this.props.toggleDropdown === TYPE_FUNCTION) { \r\n this.props.toggleDropdown()\r\n }\r\n if (typeof this.props.showDetails === TYPE_FUNCTION) { \r\n this.props.showDetails(false);\r\n } \r\n }\r\n\r\n render(){ \r\n return(\r\n \r\n \r\n \r\n
\r\n {/* Delete */}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport class SectionDataTable extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showUpdateBtn: false,\r\n editMode: false,\r\n dataItem: this.props.datatable\r\n }\r\n }\r\n\r\n ShowUpdateBtn() {\r\n this.setState({ showUpdateBtn: true })\r\n this.enableEditMode()\r\n }\r\n\r\n HideUpdateBtn() {\r\n\r\n this.setState({ showUpdateBtn: false })\r\n this.enableEditMode()\r\n }\r\n\r\n enableEditMode = () => {\r\n this.setState((prevState) => ({\r\n editMode: !prevState.editMode,\r\n }));\r\n };\r\n\r\n rowClick(index) {\r\n this.props.rowClickAction(index);\r\n }\r\n\r\n renderTableDataValue(props, item, c) {\r\n return item[this.getProp(props.datatable[0].HeaderItem[0], c.name)];\r\n }\r\n\r\n getProp(columns, name) {\r\n return Object.entries(columns)\r\n .filter((x) => {\r\n return x[1].name === name;\r\n })\r\n .map((x) => x[0])[0];\r\n }\r\n\r\n renderTableData = (item) => {\r\n return Object.values(this.props.datatable[0].HeaderItem[0]).map((value) => {\r\n if (!value.hidden) {\r\n return (\r\n | \r\n {header.name}\r\n | \r\n ))\r\n \r\n )}\r\n {this.props.haveToggle && \r\n <>\r\nRead | \r\nWrite | \r\nExecute | \r\n \r\n } \r\n||
|---|---|---|---|---|---|
| \r\n | \r\n ) : (\r\n \r\n {dataItem[detail]}\r\n | \r\n )\r\n ))}\r\n {this.props.haveToggle && \r\n <>\r\n\r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n }\r\n {\r\n (this.props.haveDeleteBtn || this.props.haveEditBtn) &&\r\n \r\n {\r\n this.state.showUpdateBtn ?\r\n <>\r\n | \r\n } \r\n
\r\n {this.props.haveExternalDeleteBtn &&\r\n this.props.datatable.map((item, index) => (\r\n item.dataItem.map((listItem,indexItem)=>\r\n
\r\n \r\n
\r\n )\r\n ))}\r\n \r\n \r\n \r\n
\r\n {/* Delete */}\r\n\r\n
\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport { Component } from \"react\";\r\nimport Moment from 'moment';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { actions } from 'react-redux-form';\r\nimport { InputField, CustomSearchableSelectKeyValue } from \"../../../common/custom-form/input-filter-component\";\r\nimport { ACTION_TYPES, MAX_LENGTH, Selected_Index } from \"../../../../constants/external-constants\";\r\nimport { inventoryCostAllocationActions } from \"../../../../store/external/inventory/add-cost-allocation.reducer\";\r\nimport Translation from \"../../../common/translation/translation.component\";\r\nimport TableWithButton from \"../../../common/details-table/table-with-button.component\"\r\nimport { ConfirmationNotificationModal } from \"../../../common/modal/confirmation-modal.component\";\r\nimport { NotificationModal } from \"../../../common/modal/notification-modal.component\";\r\nimport { CONFIRMATION_VALUE } from \"../../../../utils/constant.utils\";\r\nimport { CustomDropdown } from \"../../../common/custom-form/custom-dropdown.component\";\r\nimport { hasObjectWithProperty } from \"../../../../utils/helpers.utils\";\r\n\r\nclass AddCostAllocation extends Component {\r\n constructor(props) {\r\n super(props);\r\n const modifiedCostcenterOptions = this.modifyOption(props.costcenterOptions);\r\n this.state = {\r\n inputValue: \"\",\r\n viewDetailPage: false,\r\n titleBtn: false,\r\n enableAddBtn: false,\r\n showCostAllocatioDetails: false,\r\n updateCostAllocationDetails: false,\r\n enableEdit: false,\r\n keyIndex:null,\r\n selectedGlCodeKey: \"\",\r\n selectedCostCenterKey: \"\",\r\n selectedValue: '',\r\n activeDropdown: false,\r\n showDetails: false,\r\n modalMessage: \"\",\r\n showModal: false,\r\n dataTable: [],\r\n glCodeValid: true,\r\n costCenterValid: true,\r\n isExist: false,\r\n isGreater: false,\r\n selectedGlCode: null,\r\n selectedCostCenter: null, \r\n fieldChange: false,\r\n glCode:\"\", \r\n costCenter:\"\", \r\n percent:\"\",\r\n loading:true,\r\n totalCostCodePercent:0,\r\n percentValue:\"\",\r\n tableLength:0,\r\n optionsMap: {\r\n \"GLCode\": props.glcodeOptions,\r\n \"CostCode\": modifiedCostcenterOptions\r\n },\r\n selectedItems:{\r\n GLCode: \"\",\r\n GLCodeName: \"\",\r\n CostCode: \"\",\r\n CostCodePercent: \"\",\r\n CompanyCode: \"\",\r\n\r\n },\r\n data: {\r\n GLCode: '',\r\n CostCode: '',\r\n CostCodePercent: 0,\r\n GLCodeName: '',\r\n CompanyCode: '',\r\n CostCodeID: '',\r\n GLCodeID: '',\r\n LastModified: ''\r\n },\r\n showNotif: false,\r\n notifTitle: null,\r\n isAddPercent: false,\r\n isUpdatePercent: false,\r\n isUpdateGl_Cost: false,\r\n isAddGL_Cost: false,\r\n }\r\n }\r\n\r\n handleCancel = () => {\r\n const { toggleDropdown } = this.props;\r\n toggleDropdown(Selected_Index.i_Seven);\r\n this.toggleActiveState();\r\n this.setState({\r\n glCode: '',\r\n costCenter: '',\r\n percent: '',\r\n updateCostAllocationDetails: false,\r\n enableEdit: false,\r\n keyIndex: null,\r\n isGreater:false,\r\n isExist:false,\r\n enableAddBtn: false,\r\n isAddPercent: false,\r\n isUpdatePercent: false,\r\n isAddGL_Cost: false,\r\n isUpdateGl_Cost: false,\r\n })\r\n }\r\n\r\n componentDidMount() {\r\n const { circuitId, getAddCostAllocation } = this.props;\r\n \r\n getAddCostAllocation(circuitId).then(() =>{\r\n const { circuitCostAllocation } = this.props.inventoryCostAllocation; \r\n const tableLength = circuitCostAllocation?.datatable[0]?.dataItem?.length;\r\n this.setState({tableLength})\r\n }); ; \r\n }\r\n\r\n showDetails(value) {\r\n this.setState({\r\n showDetails: value\r\n });\r\n }\r\n\r\n activateAddBtn() {\r\n if (this.state.glCode && this.state.costCenter && this.state.percent ) {\r\n this.setState({ enableAddBtn: true });\r\n } else {\r\n this.setState({ enableAddBtn: false });\r\n }\r\n }\r\n\r\n HandleOnChange(e, field) {\r\n const { value } = e.target;\r\n if (value === '' || /^\\d*(\\.\\d*)?$/.test(value)) {\r\n this.setState({ [field]: value }, () => {\r\n this.activateAddBtn();\r\n });\r\n }\r\n }\r\n\r\n OnChangeGlCode = (e) => {\r\n\r\n this.setState({\r\n selectedGlCodeKey: e.value,\r\n glCode: e.text,\r\n glCodeValid: true,\r\n isAddGLcode: false,\r\n },() => {\r\n this.activateAddBtn() \r\n });\r\n };\r\n\r\n OnChangeCostCenter = (e) => {\r\n const value = e.text.split('~')[0].trim();\r\n const companyCode = e.text.split('~')[1].trim();\r\n this.props.FormChange(`inventoryCircuitCostAllocationForm.CompanyCode`, companyCode)\r\n this.setState({\r\n selectedCostCenterKey: e.value,\r\n costCenter: value,\r\n costCenterValid: true,\r\n isAddGL_Cost: false,\r\n }, () => {\r\n this.activateAddBtn() \r\n });\r\n\r\n };\r\n\r\n clearSelectedValue = () => {\r\n this.setState({ \r\n selectedItems:{\r\n GLCode: \"\",\r\n GLCodeName:\"\",\r\n CostCode: \"\",\r\n CostCodePercent: \"\",\r\n CompanyCode: \"\"\r\n\r\n }\r\n });\r\n\r\n this.props.FormChange(`inventoryCircuitCostAllocationForm.Key`, 0);\r\n }\r\n\r\n updateCircuitCostAllocation = async (indexItem) => {\r\n let companyKey;\r\n const { inventoryCostAllocation, inventoryCircuitCostAllocationForm } = this.props;\r\n const { CostCode: _costCode, GLCode: _glCode, Key} = inventoryCircuitCostAllocationForm;\r\n \r\n const currectCompanyCode = inventoryCostAllocation.circuitCostAllocation.datatable[0].dataItem[indexItem].CompanyCode;\r\n const currentKey = this.props.costcenterOptions.find(option => option.Label === currectCompanyCode)\r\n\r\n if(Key === 0){\r\n companyKey = currentKey?.Key;\r\n }else{\r\n companyKey = Key;\r\n }\r\n const _companyCode = this.props.costcenterOptions.find(option => option.Value === _costCode && option.Key === companyKey)?.Label;\r\n\r\n this.props.FormChange(`inventoryCircuitCostAllocationForm.CompanyCode`, _companyCode)\r\n \r\n if (inventoryCostAllocation.circuitCostAllocation.datatable.length > 0) {\r\n const costAllocationItems = await inventoryCostAllocation.circuitCostAllocation.datatable[0].dataItem.filter((item, index) => index !== indexItem);\r\n const isExisting = costAllocationItems.some(item => item.CostCode === _costCode && item.GLCode === _glCode && item.CompanyCode === _companyCode);\r\n \r\n if (isExisting) {\r\n this.setState({\r\n haveError: true,\r\n isExist: true,\r\n showNotif: true,\r\n isGreater: false,\r\n isUpdateGl_Cost: true,\r\n modalMessage: | \r\n {row.name}\r\n | \r\n })\r\n )\r\n })\r\n\r\n }\r\n\r\n )}\r\n {this.props.haveToggle &&\r\n <>\r\nRead | \r\nWrite | \r\nExecute | \r\n \r\n }\r\n
|---|---|---|---|
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n }\r\n {\r\n (this.props.haveDeleteBtn || this.props.haveEditBtn) &&\r\n \r\n {\r\n this.state.showUpdateBtn ?\r\n <>\r\n | \r\n }\r\n
\r\n {this.props.haveExternalDeleteBtn &&\r\n this.props.datatable.map((item, index) => (\r\n item.dataItem.map((listItem, indexItem) =>\r\n
\r\n \r\n { this.props.deleteAction(indexItem) }} />\r\n
\r\n )\r\n ))}\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n ...bindActionCreators(\r\n Object.assign({}, inventoryCostAllocationActions),\r\n dispatch\r\n ),\r\n FormChange: (Model, value) => {\r\n dispatch(actions.change(Model, value))\r\n }\r\n }\r\n};\r\n\r\nexport default connect(\r\n state => {\r\n const { inventoryCostAllocation } = state;\r\n const { inventoryCircuitCostAllocationForm } = state.form;\r\n return {\r\n inventoryCostAllocation,\r\n inventoryCircuitCostAllocationForm\r\n };\r\n },\r\n mapDispatchToProps\r\n)(AddCostAllocation);\r\n\r\n\r\n","import React, { Component } from \"react\";\r\n\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { TablePaginationExhibit2 } from \"../../../common/table/table-pagination.component\";\r\nexport class CircuitNotification extends Component {\r\n constructor(props) {\r\n super(props); \r\n this.state={\r\n show:false,\r\n acceptConf:false,\r\n }\r\n }\r\n\r\n handelAcceptConfirmation = () => {\r\n this.props.handleModal() \r\n }\r\n\r\n render(){\r\n \r\n return(\r\n <>\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n openRequestModal = (item) => {\r\n const { setSelectedRequest } = this.props;\r\n setSelectedRequest(item);\r\n this.props.handelLink(item.RequestTypeId)\r\n }\r\n\r\n resizePage = (value) => {\r\n const { getInventoryOrderHistory, resizeInventoryOrderHistoryLogs } = this.props;\r\n resizeInventoryOrderHistoryLogs(value);\r\n getInventoryOrderHistory(this.props.circuitId, 0);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetInventoryOrderHistory();\r\n }\r\n\r\n render() {\r\n const { getInventoryOrderHistory, inventoryOrderHistory, setInventoryOrderHistoryColSearchStr } = this.props;\r\n return (\r\n <>\r\n {\r\n inventoryOrderHistory.isInventoryOrderHistoryLoaded ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.props.listHistoryTab? : null} \r\n
\r\n )\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from 'redux';\r\nimport CircuitHistory from \"./circuit-history.component\";\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport { circuitHistoryActions } from \"../../../../../store/external/inventory/history/circuit-history.reducer\";\r\nimport { inventoryOrderHistoryActions } from \"../../../../../store/external/inventory/history/order-history.reducer\";\r\nimport OrderHistory from \"./order-history.component\";\r\nimport { HistoryLayout } from \"../../../../common/history/history-layout.component\";\r\nclass DetailsHistory extends Component{\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedIndex: \"0\",\r\n enableSearchBox: false,\r\n extractAlertMsg: \"\"\r\n };\r\n this.onChangeExtractAlertMsg = this.onChangeExtractAlertMsg.bind(this);\r\n }\r\n\r\n getSelectedIndex(value){\r\n this.setState({selectedIndex:value})\r\n }\r\n\r\n displaySearchBox(value){\r\n this.setState({enableSearchBox:value})\r\n }\r\n\r\n onClickExtract = () => {\r\n const { circuitId, extractCircuitHistoryLogs, extractOrderHistory } = this.props;\r\n const { extractAlertMsg, selectedIndex } = this.state;\r\n if (window.confirm(extractAlertMsg)) {\r\n if (selectedIndex === \"0\") {\r\n extractCircuitHistoryLogs(circuitId);\r\n }\r\n if (selectedIndex === \"1\") {\r\n extractOrderHistory(circuitId);\r\n }\r\n else {\r\n return;\r\n }\r\n }\r\n }\r\n\r\n onChangeExtractAlertMsg = (val, key) => {\r\n this.setState({\r\n extractAlertMsg: val\r\n });\r\n }\r\n\r\n render(){ \r\n return (\r\n <>\r\n \r\n \r\n {!this.props.listHistoryTab && !this.props.hideCustomColumn ? : null }\r\n this.props.extractAction() : () => { }}\r\n iconLeft=\"cloud-arrow-down\" iconSize=\"17px\"\r\n customClassName={`${!this.props.isReadOnly ? \"header-option-list\" : \"\"} header-filter-button`}\r\n isDisable={isReadOnly && !isReadAndExtractOnly && !isReadAndWrite}\r\n labelName=\"Extract List\"/> \r\n
\r\n {this.props.children}\r\n \r\n
\r\n );\r\n }\r\n else {\r\n return (\r\n {`${label}`}
\r\n{`Net Amount: ${payload[0]?.payload?.TotalNetAmount}`}
\r\n{`Gross Amount: ${payload[0]?.payload?.TotalGrossAmount}`}
\r\n\r\n
\r\n );\r\n \r\n }\r\n\r\n };\r\n\r\n export default LineChartToolTip;","import React, { Component } from \"react\";\r\nimport {\r\n LineChart,\r\n Line,\r\n XAxis,\r\n YAxis,\r\n CartesianGrid,\r\n Tooltip,\r\n Legend,\r\n ResponsiveContainer\r\n} from 'recharts';\r\nimport Icon from \"../../../../icon\";\r\nimport LineChartToolTip from \"./custom-tooltip/line-chart-tooltip.component\";\r\nimport Translation from \"../../../../../components/common/translation/translation.component\";\r\nimport CustomLegend from \"../../../../common/graph/custom-legend.component\";\r\n\r\nclass UsageLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.chartRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setRef(this.chartRef);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default UsageLineChart;\r\n","import React, {Component} from \"react\";\r\nimport UsageLineChart from \"../chart/line-chart.component\";\r\n\r\nclass MonthlyTrend extends Component {\r\n render() { \r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Usage Spend Monthly Trend
\r\n\r\n ({ dataKey: item.name }))}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n NET SPEND FOR\r\n {this.props.dateCurrentMonth.Date}\r\n ${this.props.dateCurrentMonth.TotalNetAmount}\r\n
\r\n \r\n GROSS SPEND FOR\r\n {this.props.dateCurrentMonth.Date}\r\n ${this.props.dateCurrentMonth.TotalGrossAmount}\r\n
\r\n \r\n \r\n\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default MonthlyTrend\r\n","import React from 'react'\r\n\r\nconst HorizontalChartToolTip = ({ active, payload, label }) => { \r\n if (active && payload && payload.length) {\r\n return (\r\n \r\n
\r\n );\r\n } \r\n return null;\r\n };\r\n\r\n export default HorizontalChartToolTip;","import React, {Component} from \"react\";\r\nimport { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer, LabelList } from 'recharts';\r\nimport Icon from \"../../../../icon\";\r\nimport HorizontalChartToolTip from \"./custom-tooltip/horizontal-chart-tooltip.component\";\r\nimport Translation from \"../../../../common/translation/translation.component\";\r\nimport Moment from 'moment';\r\n\r\nclass UsageHorizontalChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.chartRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setRef(this.chartRef);\r\n }\r\n\r\n DetailsInfo() {\r\n \r\n if(this.props.printData)\r\n {\r\n return (\r\n {`${payload[0].value.toFixed(2)}`}
\r\n \r\n
\r\n )\r\n } else{\r\n return (\r\n {`Breakdown of Usage for the ${this.props.dateCurrentMonth.Date ? this.props.dateCurrentMonth.Date : \"\"}`}
\r\n\r\n
\r\n )\r\n }; \r\n }\r\n\r\n render() {\r\n \r\n return (\r\n Breakdown of Usage for the {Moment.utc(this.props.dateCurrentMonth.Date).format('MMMM yyyy')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default UsageHorizontalChart\r\n","import React, {Component} from \"react\";\r\nimport UsageHorizontalChart from \"../chart/horizontal-chart.component\";\r\n\r\n\r\nclass BreakdownUsageTrend extends Component {\r\n render() { \r\n return (\r\n \r\n \r\n {this.props.data.length > 0 ?\r\n
\r\n \r\n
\r\n :\r\n \r\n
\r\n
\r\n
\r\n {this.DetailsInfo()}
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.DetailsInfo()}\r\n
\r\n
\r\n
\r\n
\r\n }\r\n \r\n
\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default BreakdownUsageTrend\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport MonthlyTrend from './report/monthly-trend.component';\r\nimport BreakdownUsageTrend from './report/breakdown-usage.component';\r\nimport DATEPICKER_OR from \"../../../common/custom-form/custom-date-picker.component\";\r\nimport { inventoryUsageSpendActions } from \"../../../../store/external/inventory/usagespend.reducer\";\r\nimport Moment from 'moment';\r\nimport CustomExportButton from \"../../../common/custom-form/custom-export-button.component\";\r\nimport Translation from '../../../common/translation/translation.component';\r\nimport { Loading } from \"../../../common/loading\";\r\nimport { inventoryCircuitInvoiceActions } from \"../../../../store/external/inventory/invoice/invoice.reducer\";\r\nclass UsageSpend extends Component {\r\nconstructor(props) {\r\n super(props); \r\n this.imageRef = {\r\n monthlyTrendRef: React.createRef(),\r\n breakdownUsageTrendRef: React.createRef(),\r\n };\r\n this.state = { \r\n loading: true, \r\n ledger: [\r\n { name: 'TotalNetAmount', label: 'Net Amount', color: '#ff861c' },\r\n { name: 'TotalGrossAmount', label: 'Gross Amount', color: '#0000ff' },\r\n ],\r\n dateFormat: \"MMMM yyyy\", \r\n };\r\n }\r\n componentDidMount() {\r\n this.props.getInventoryUsageSpend(this.props.circuitId, this.props.financeAccountId);\r\n this.props.getInventoryCircuitInvoice(this.props.circuitId, this.props.financeAccountId);\r\n }\r\n\r\n SelectDatePicker(date) {\r\n this.setState({\r\n startDate: date\r\n });\r\n this.props.getInventoryUsageSpend(this.props.circuitId, this.props.financeAccountId, date);\r\n }\r\n\r\n PrintData(value) {\r\n this.setState({printData:value})\r\n }\r\n \r\n render() {\r\n const { getInventoryUsageSpend, inventoryUsageSpend,inventoryCircuitInvoice } = this.props; \r\n const extractedInvoiceDate = inventoryCircuitInvoice.inventoryCircuitInvoiceItems.Data.Items.map(item => {\r\n const date = new Date(item.InvoiceDate);\r\n const month = date.getMonth() + 1;\r\n const year = date.getFullYear();\r\n\r\n return { InvoiceMonth: month, InvoiceYear: year };\r\n });\r\n\r\n return (\r\n <>\r\n {\r\n inventoryUsageSpend.isInventoryUsageSpendLoaded ? \r\n < div className = \"usage-spend-layout-container date-picker-main-container\" >\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n this.imageRef.monthlyTrendRef = ref;\r\n if (this.monthlyTrendRef && this.breakdownUsageTrendRef) {\r\n this.setState({ loading: false });\r\n }\r\n }}\r\n /> \r\n {\r\n this.imageRef.breakdownUsageTrendRef = ref;\r\n if (this.breakdownUsageTrendRef && this.breakdownUsageTrendRef) {\r\n this.setState({ loading: false });\r\n }\r\n }}\r\n /> \r\n
\r\n : \r\n this.navigateToDetails(rowItem)}\r\n paginationAction={this.getLinkedCircuits}\r\n onColumnClick={this.sortLinkedCircuits}\r\n onColumnSearch={() => { this.getLinkedCircuits(0); }}\r\n onColumnSearchChange={setLinkedCircuitColSearchStr}\r\n isColSearchShow={this.state.displaySearch}\r\n resizePage={this.resizePage}\r\n totalPage={Pagination.TotalEntries}\r\n haveLink={true}\r\n tableClassName=\"table-fit\" \r\n hidePageSizeSelection={true}\r\n />\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction LinkedCircuit(props) {\r\n const history = useHistory();\r\n return \r\n
\r\n this.displaySearhBox()} iconLeft=\"file-magnifying-glass\" iconSize=\"17px\" customClassName=\"header-option-list header-filter-button\" labelName=\"Search\" />\r\n
\r\n {\r\n IsLoadingTable ?\r\n \r\n \r\n {isDataLoaded ? \r\n (<> \r\n
\r\n {/* {isDataLoaded && havePagination ? : \"\"} */}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport class DataTable2 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.getDataOnTable=this.getDataOnTable.bind(this);\r\n this.state={\r\n itemSelected:false,\r\n columns: {},\r\n pageList: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n }); \r\n this.checkStatus();\r\n }\r\n\r\n checkStatus() {\r\n const statusList = document.querySelectorAll(\".internal-data-table table tbody td\"); \r\n \r\n for (var i = 0; statusList.length > i; i++) {\r\n \r\n if (\r\n statusList[i].innerText.toLowerCase().includes(\"Expired\".toLowerCase())\r\n ) { \r\n statusList[i].classList.add(\"data-expired\"); \r\n } else if (\r\n statusList[i].innerText.toLowerCase().includes(\"Active\".toLowerCase())\r\n ) { \r\n statusList[i].classList.add(\"data-active\"); \r\n }\r\n } \r\n }\r\n\r\n getDataOnTable(e) { \r\n this.setState({itemId: true})\r\n if(this.props.getData)\r\n {\r\n this.props.getData(true);\r\n }\r\n \r\n if(this.props.rowId) \r\n {\r\n this.props.rowId(e.target.id) \r\n } \r\n \r\n }\r\n\r\n handelLink(id){\r\n this.props.handelLink(id)\r\n }\r\n\r\n render() {\r\n const { id, item, isDataLoaded, customClassName, pages, paginationAction, havePagination, showSearchBox, header, data, circuitID, searchVal } = this.props;\r\n return(\r\n | \r\n {header[headerList].name}\r\n \r\n {showSearchBox ? : \"\" } \r\n | \r\n ))}\r\n
|---|
| \r\n {headerItem.isLink \r\n ? this.handelLink(item.RequestTypeID)}>{item[headerItem.name]} \r\n : item[headerItem.name]\r\n }\r\n | \r\n );\r\n })} \r\n
\r\n \r\n {isDataLoaded ? \r\n (<> \r\n
\r\n {/* {isDataLoaded && havePagination ? : \"\"} */}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport class DataTable3 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.getDataOnTable=this.getDataOnTable.bind(this);\r\n this.state={\r\n itemSelected:false,\r\n columns: {},\r\n pageList: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n columns: { ...this.props.columns },\r\n pageList: this.props.pageList\r\n }); \r\n this.checkStatus();\r\n }\r\n\r\n checkStatus() {\r\n const statusList = document.querySelectorAll(\".internal-data-table table tbody td\"); \r\n \r\n for (var i = 0; statusList.length > i; i++) {\r\n \r\n if (\r\n statusList[i].innerText.toLowerCase().includes(\"Expired\".toLowerCase())\r\n ) { \r\n statusList[i].classList.add(\"data-expired\"); \r\n } else if (\r\n statusList[i].innerText.toLowerCase().includes(\"Active\".toLowerCase())\r\n ) { \r\n statusList[i].classList.add(\"data-active\"); \r\n }\r\n } \r\n }\r\n\r\n getDataOnTable(e) { \r\n this.setState({itemId: true})\r\n if(this.props.getData)\r\n {\r\n this.props.getData(true);\r\n }\r\n \r\n if(this.props.rowId) \r\n {\r\n this.props.rowId(e.target.id) \r\n } \r\n \r\n }\r\n\r\n handelLink(id){\r\n this.props.handelLink(id)\r\n }\r\n\r\n render() {\r\n const { id, item, isDataLoaded, customClassName, pages, paginationAction, havePagination, showSearchBox, header, data, searchVal, billingAccountID } = this.props;\r\n return(\r\n | \r\n {headerList.name}\r\n \r\n {showSearchBox ? : \"\" } \r\n | \r\n ))}\r\n
|---|
| \r\n {headerList.isLink \r\n ? this.handelLink(row[index])}>{row[index]} \r\n : row[index]\r\n }\r\n | \r\n )\r\n )\r\n }\r\n )\r\n }\r\n
\r\n \r\n {isDataLoaded ? \r\n (<> \r\n
\r\n {/* {isDataLoaded && havePagination ? : \"\"} */}\r\n
\r\n )\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from \"react-redux\";\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport { InputGroup } from \"react-bootstrap\";\r\nimport Icons from \"../../../../components/icon\";\r\nimport { DataTable2 } from \"../../../common/table/data-table/data-table-component\";\r\nimport { TRANSLATIONS as translation } from '../../../../utils/constant.utils';\r\nimport { inventoryCircuitActions } from \"../../../../store/external/inventory/circuit.reducer\";\r\nimport { FormControl } from \"react-bootstrap\";\r\nimport Icon from \"../../../icon\";\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\nimport { MAX_LENGTH as maxLength } from \"../../../../../app/constants/external-constants\";\r\n\r\nclass UserDetailsInfo extends Component {\r\n constructor(props) {\r\n super(props); \r\n this.onSelectedChange=this.onSelectedChange.bind(this);\r\n this.resetDefault=this.resetDefault.bind(this);\r\n this.state={\r\n show:false,\r\n clearData:false,\r\n searchVal: \"\",\r\n selected:[],\r\n options:[\r\n { value: 'one', label: 'Option One' },\r\n { value: 'two', label: 'Option Two' },\r\n ],\r\n selectedTwo:[]\r\n }\r\n }\r\n componentDidMount() {\r\n const { endUserID, inventoryCircuit, getUserHrDetails, getUserCircuitAllocation, getUserLinkedCircuit} = this.props\r\n getUserHrDetails(endUserID);\r\n getUserCircuitAllocation(endUserID);\r\n getUserLinkedCircuit(endUserID);\r\n }\r\n handleClose(){\r\n this.setState({show:false});\r\n }\r\n\r\n handleShow() { \r\n const { endUserID, inventoryCircuit, getUserHrDetails, getUserCircuitAllocation, getUserLinkedCircuit} = this.props\r\n getUserHrDetails(endUserID);\r\n getUserCircuitAllocation(endUserID); \r\n getUserLinkedCircuit(endUserID);\r\n this.setState({show:true});\r\n }\r\n\r\n onSelectedChange(selected) {\r\n this.setState({selected:selected})\r\n }\r\n\r\n onChange = (selected) => {\r\n this.setState({ selected });\r\n };\r\n\r\n resetDefault() { \r\n this.setState({clearData:true});\r\n }\r\n\r\n resetClearData(item) {\r\n this.setState({clearData:item})\r\n }\r\n\r\n setSearchValue = (e) => {\r\n this.setState({ searchVal: e.target.value });\r\n }\r\n\r\n toLocaleLanguage = (key) => {\r\n const { locale } = this.props;\r\n if (locale === null || locale === '' || locale === undefined)\r\n return translation[translation['defaultLocaleLanguage']][key];\r\n\r\n return translation[locale][key];\r\n }\r\n\r\n searchAction = async (e) => {\r\n const { endUserID } = this.props;\r\n let searchVal = e.target.value;\r\n this.props.setUserLinkedCircuitSearchValue(searchVal);\r\n if (e.key === 'Enter') {\r\n await this.props.getUserLinkedCircuit(endUserID, searchVal);\r\n e.preventDefault();\r\n }\r\n \r\n }\r\n\r\n navigateToDetails(rowItem) {\r\n if (rowItem != null) {\r\n window.open(`/external/inventory/linked-circuit/${rowItem.ID}`, \"_blank\")\r\n }\r\n }\r\n \r\n render(){\r\n const { show } = this.state;\r\n const { getUserLinkedCircuit, endUserID } = this.props;\r\n return(\r\n <>\r\n\r\n | \r\n {headerList.name}\r\n \r\n {showSearchBox ? : \"\" } \r\n | \r\n ))}\r\n
|---|
| \r\n {headerList.isLink \r\n ? this.handelLink(row[index])}>{row[index]} \r\n : row[index]\r\n }\r\n | \r\n )\r\n )\r\n }\r\n )\r\n }\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n | {this.toLocaleLanguage('hr_sap_id_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.hrSapId : null} | \r\n
| {this.toLocaleLanguage('first_name_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.firstName : null} | \r\n
| {this.toLocaleLanguage('last_name_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.lastName : null} | \r\n
| {this.toLocaleLanguage('middle_initial_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.middle : null} | \r\n
| {this.toLocaleLanguage('email_address_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.emailAdd : null} | \r\n
| {this.toLocaleLanguage('position_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.position : null} | \r\n
| {this.toLocaleLanguage('status_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.status : null} | \r\n
| {this.toLocaleLanguage('date_left_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.dateleft : null} | \r\n
| {this.toLocaleLanguage('first_lm_hr_sap_id_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.firstLineManagerId : null} | \r\n
| {this.toLocaleLanguage('first_lm_email_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.firstLineManagerEmailAdd : null} | \r\n
| {this.toLocaleLanguage('second_lm_hr_sap_id_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.secondLineManagerId : null} | \r\n
| {this.toLocaleLanguage('second_lm_email_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.secondLineManageremailAdd : null} | \r\n
| {this.toLocaleLanguage('delegate_approver_capital')} | \r\n{this.props.userDetails != null ? this.props.userDetails.delegateAprover : null} | \r\n
{this.toLocaleLanguage('location_capital')}
\r\n| {this.toLocaleLanguage('location_site_id_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.locationSiteId : null}\r\n | \r\n
| {this.toLocaleLanguage('address_1_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.address1 : null}\r\n | \r\n
| {this.toLocaleLanguage('address_2_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.address2 : null}\r\n | \r\n
| {this.toLocaleLanguage('city_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.city : null}\r\n | \r\n
| {this.toLocaleLanguage('state_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.locationState : null}\r\n | \r\n
| {this.toLocaleLanguage('country_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.country : null}\r\n | \r\n
| {this.toLocaleLanguage('zip_capital')} | \r\n\r\n {this.props.userDetails != null ? this.props.userDetails.locationZip : null}\r\n | \r\n
{this.toLocaleLanguage('cost_allocation_capital')}
\r\n\r\n this.navigateToDetails(rowItem)}\r\n paginationAction={(pageIndex) => getUserLinkedCircuit(endUserID, this.state.searchVal, pageIndex)}\r\n totalPage={this.props.inventoryCircuit.inventoryUserLinkedCircuit.Pagination.TotalEntries}\r\n isNotSortable={true}\r\n haveLink={true}\r\n modalPagination={true}\r\n tableClassName=\"table-fit custom-table-header linked-circuit-modal-table-body\" \r\n /> \r\n {/* {\r\n
\r\n \r\n
\r\n {this.toLocaleLanguage('linked_circuits_capital')}
\r\n {this.props.inventoryCircuit.inventoryUserLinkedCircuit.Pagination.TotalEntries} {this.toLocaleLanguage('total_circuits')}\r\n\r\n \r\n \r\n \r\n \r\n this.setSearchValue(e)}\r\n onBlur={this.searchAction}\r\n onKeyPress={this.searchAction}\r\n placeholder=\"Search Circuit...\" \r\n aria-label=\"Small\"\r\n aria-describedby=\"inputGroup-sizing-sm\"\r\n />\r\n \r\n
\r\n \r\n this.navigateToDetails(rowItem)}\r\n paginationAction={(pageIndex) => getUserLinkedCircuit(endUserID, this.state.searchVal, pageIndex)}\r\n totalPage={this.props.inventoryCircuit.inventoryUserLinkedCircuit.Pagination.TotalEntries}\r\n isNotSortable={true}\r\n haveLink={true}\r\n tableClassName=\"table-fit\"\r\n />\r\n
\r\n } */}\r\n \r\n onChangeAction(`${fieldProp}.locationID`, value)}\r\n placeholder={`${translator('select_placeholder')}`}\r\n fieldProp={`${fieldProp}.locationID`}\r\n tagName='LocationSite'\r\n name={`${formName}${fieldProp}.locationID`}\r\n optionLabelKey={{\r\n Key: 'LocationId',\r\n Value: 'LocationSite'\r\n }}\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n\r\n
\r\n )\r\n }\r\n};\r\n\r\nexport default AddressDetails","import React, {Component} from \"react\";\r\nimport ButtonIcon from \"../../button\";\r\nimport \"./header-with-control.css\";\r\nexport class HeaderWithControl extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n displaySearch: false,\r\n };\r\n }\r\n DisplaySearhBox() {\r\n this.setState(prevState => {\r\n const updatedDisplaySearch = !prevState.displaySearch;\r\n this.props.displaySearchBox(this.props.title, updatedDisplaySearch);\r\n return {displaySearch: updatedDisplaySearch};\r\n });\r\n }\r\n render(){\r\n return(\r\n <>\r\n \r\n
\r\n \r\n
\r\n {this.props.children}\r\n \r\n )\r\n }\r\n}","import React, {Component} from \"react\";\r\nimport { HeaderWithControl } from \"../../../common/titlewithbutton-layout/header-with-control\";\r\nimport { TablePagination } from \"../../../common/details-table/table-pagination.component\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from 'redux';\r\nimport { inventoryCircuitInvoiceActions } from \"../../../../store/external/inventory/invoice/invoice.reducer\";\r\nimport { ROUTE_LINK_LOCATION } from '../../../../constants/external-constants';\r\n\r\n\r\nclass InvoiceCircuit extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n enableSearchBox: false,\r\n exportAlertMsg: \"Please confirm that the harvesting of data and it's usage has been approved by the client.\",\r\n };\r\n \r\n }\r\n componentDidMount() {\r\n const { getInventoryCircuitInvoice, getInventoryCircuitDispute, circuitId, financeAccountId } = this.props;\r\n getInventoryCircuitInvoice(circuitId, financeAccountId);\r\n getInventoryCircuitDispute(circuitId);\r\n }\r\n componentWillUnmount() {\r\n this.props.setDefaultInvoiceTab();\r\n }\r\n getInventoryCircuitInvoice = (pageIndex) => {\r\n const { getInventoryCircuitInvoice, circuitId, financeAccountId } = this.props;\r\n getInventoryCircuitInvoice(circuitId, financeAccountId, pageIndex);\r\n }\r\n\r\n onColumnSearchInvoice = () => {\r\n this.setState({ displaySearch: !this.state.displaySearch })\r\n const { getInventoryCircuitInvoice, circuitId, financeAccountId } = this.props;\r\n getInventoryCircuitInvoice(circuitId, financeAccountId, 0);\r\n }\r\n onColumnSearchDispute = () => {\r\n this.setState({ displaySearch: !this.state.displaySearch })\r\n const { getInventoryCircuitDispute, circuitId } = this.props;\r\n getInventoryCircuitDispute(circuitId, 0);\r\n }\r\n onColumnSortInvoice = (columnClicked, isSortedAsc) => {\r\n const { sortInventoryCircuitInvoice, circuitId, financeAccountId } = this.props;\r\n sortInventoryCircuitInvoice(columnClicked, isSortedAsc, circuitId, financeAccountId);\r\n }\r\n onColumnSortDispute = (columnClicked, isSortedAsc) => {\r\n const { sortInventoryCircuitDispute, circuitId } = this.props;\r\n sortInventoryCircuitDispute(columnClicked, isSortedAsc, circuitId);\r\n }\r\n displaySearchBox(value){\r\n this.setState(prevState => ({ \r\n enableSearchBox: prevState.enableSearchBox === value ? null : value \r\n }));\r\n }\r\n onClickExtractInvoice = () => {\r\n if (window.confirm(this.state.exportAlertMsg)) {\r\n this.props.extractCircuitInvoice(this.props.circuitId, this.props.financeAccountId);\r\n }\r\n }\r\n onClickExtractDispute = () => {\r\n if (window.confirm(this.state.exportAlertMsg)) {\r\n this.props.extractCircuitDispute(this.props.circuitId);\r\n }\r\n }\r\n rowDisputeAction = (item, hasLink) => {\r\n if (hasLink && item.DisputeId) {\r\n window.open(`${ROUTE_LINK_LOCATION.invoiceDisputeDetailsLink}/${item.DisputeId}`, \"_blank\")\r\n\r\n } else {\r\n this.setState({ showModal: true, selectedItem: item })\r\n }\r\n }\r\n rowInvoiceAction = (item, hasLink) => {\r\n if (hasLink && item.InvoiceId) {\r\n window.open(`${ROUTE_LINK_LOCATION.invoiceRouteLink}/${item.InvoiceId}`, \"_blank\")\r\n\r\n } else {\r\n this.setState({ showModal: true, selectedItem: item })\r\n }\r\n }\r\n render(){\r\n const { getInventoryCircuitInvoice, inventoryCircuitInvoice, setInventoryCircuitInvoiceColSearchStr, getInventoryCircuitDispute, inventoryCircuitDispute, setInventoryCircuitDisputeColSearchStr, sortInventoryCircuitInvoice } = this.props; \r\n return(\r\n {this.props.title}
\r\n\r\n \r\n this.props.extractAction() : () => { }} iconLeft=\"cloud-arrow-down\" iconSize=\"17px\" customClassName={`${!this.props.isReadOnly ? \"header-option-list\" : \"\"} header-filter-button`} labelName=\"Extract List\"\r\n isDisable={this.props.isReadOnly && !this.props.isReadAndExtractOnly && !this.props.isReadAndWrite}/>\r\n
\r\n \r\n \r\n { this.rowInvoiceAction(item, hasLink) }}\r\n paginationAction={this.getInventoryCircuitInvoice}\r\n onColumnClick={this.onColumnSortInvoice }\r\n onColumnSearch={() => { this.onColumnSearchInvoice() }}\r\n onColumnSearchChange={setInventoryCircuitInvoiceColSearchStr}\r\n isColSearchShow={this.state.enableSearchBox === \"invoices\"}\r\n resizePage={() => { } }\r\n totalPage={inventoryCircuitInvoice.inventoryCircuitInvoiceItems.Pagination.TotalEntries}\r\n isNotSortable={false}\r\n isLoading={false} \r\n haveLink={true}\r\n hidePageSizeSelection={true}\r\n />\r\n \r\n \r\n \r\n { this.rowDisputeAction(item, hasLink) }}\r\n paginationAction={(value) => { getInventoryCircuitDispute(this.props.circuitId, value)}}\r\n onColumnClick={this.onColumnSortDispute }\r\n onColumnSearch={() => { this.onColumnSearchDispute() }}\r\n onColumnSearchChange={setInventoryCircuitDisputeColSearchStr}\r\n isColSearchShow={this.state.enableSearchBox === \"disputes\"}\r\n resizePage={() => { } }\r\n totalPage={inventoryCircuitInvoice.inventoryCircuitDisputeItems.Pagination.TotalEntries}\r\n isNotSortable={false}\r\n isLoading={false} \r\n haveLink={true}\r\n noAvailableData={true}\r\n hidePageSizeSelection={true}\r\n />\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => {\r\n const { inventoryCircuitInvoice } = state;\r\n\r\n return {\r\n inventoryCircuitInvoice\r\n };\r\n },\r\n dispatch => bindActionCreators(\r\n Object.assign({}, inventoryCircuitInvoiceActions),\r\n dispatch\r\n )\r\n)(InvoiceCircuit);","import React, { Component } from \"react\";\r\n\r\nexport class TextArea extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isFocused: false,\r\n };\r\n }\r\n\r\n handleFocus = () => {\r\n this.setState({ isFocused: true });\r\n };\r\n\r\n handleBlur = () => {\r\n this.setState({ isFocused: false });\r\n };\r\n\r\n render() {\r\n const { label, onChange, inputValue, maxLength, customClass, placeholder, className } = this.props;\r\n const { isFocused } = this.state;\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, {Component} from \"react\";\r\nimport Icons from \"../../icon\";\r\nimport { ConfirmationNotificationModal } from \"../modal/confirmation-modal.component\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport moment from 'moment';\r\nimport { CONFIRMATION_VALUE } from \"../../../utils/constant.utils\";\r\nimport { httpDownload, httpGet, httpPost } from '../../../utils/api.utils';\r\nimport { ORDER_AUDIT_VERBIAGE, FILE_ATTACHMENT_MODULES, DISPLAY_ITEM } from \"../../../constants/external-constants\";\r\nimport Translation from \"../translation/translation.component\";\r\nimport { convertToFormatDate, displayFinalFileName } from \"../../../utils/helpers.utils\";\r\n\r\nclass CommentList extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: true,\r\n commentID: 0,\r\n expanded: false,\r\n showModal: false,\r\n extractAlertMsg: \"\",\r\n showNumberOfComments: DISPLAY_ITEM.five\r\n }\r\n \r\n }\r\n\r\n handleViewMore() {\r\n const { commentList } = this.props;\r\n this.setState(prev => ({\r\n ...prev,\r\n showNumberOfComments: prev.showNumberOfComments < commentList.length ? prev.showNumberOfComments + DISPLAY_ITEM.five : DISPLAY_ITEM.five\r\n })\r\n ) \r\n }\r\n \r\n handleViewLess() {\r\n this.setState({ expanded: false })\r\n }\r\n\r\n handleDelete(commentID) {\r\n this.setState({\r\n commentID : commentID,\r\n showModal: true,\r\n modalMessage: \"Are you sure you want to delete?\"\r\n });\r\n \r\n }\r\n\r\n handleModal(okCancel) {\r\n this.setState({ \r\n showModal: false,\r\n });\r\n if(CONFIRMATION_VALUE.Ok === okCancel) {\r\n this.props.deleteCommentAction(this.state.commentID); \r\n }\r\n \r\n }\r\n\r\n displayComment = (data) => {\r\n var yearDayMonth = (data.State === false && data.ModifiedDate) ? convertToFormatDate(data.ModifiedDate, \"MMMM DD, YYYY\") : \"\";\r\n var modifiedDate = (data.State === false && data.ModifiedDate) ? convertToFormatDate(data.ModifiedDate, \"hh:mm A\") : \"\";\r\n return data.State === false ? ORDER_AUDIT_VERBIAGE.deleteCommentOrder.replace(\"{yearDayMonth}\", yearDayMonth).replace(\"{time}\", modifiedDate) : data.Comment;\r\n } \r\n\r\n downloadFile = async (circuitEquipmentDisputeInvoiceID, commentID, fileName) => {\r\n var fileAttachementModule =\r\n this.props.isEquipment ? FILE_ATTACHMENT_MODULES.equipmentComments \r\n : this.props.isDisputeComment ? FILE_ATTACHMENT_MODULES.disputeComments \r\n : this.props.isInvoiceComment ? FILE_ATTACHMENT_MODULES.invoiceComments\r\n : FILE_ATTACHMENT_MODULES.circuitComments;\r\n\r\n if (window.confirm(this.state.extractAlertMsg)) {\r\n await httpDownload('common/fileAttachment/downloadFile/'\r\n + fileAttachementModule + '/'\r\n + circuitEquipmentDisputeInvoiceID + '/'\r\n + commentID + '/'\r\n + encodeURIComponent(fileName))\r\n .then(function (response) {\r\n return response.blob();\r\n })\r\n .then(function (blob) {\r\n let downloadUrl = window.URL.createObjectURL(blob);\r\n //Hide Loading\r\n let a = document.createElement('a');\r\n if (window.navigator.msSaveOrOpenBlob) {\r\n window.navigator.msSaveOrOpenBlob(blob, fileName);\r\n } else if (typeof a.download === 'undefined') {\r\n window.location = downloadUrl;\r\n } else {\r\n a.href = downloadUrl;\r\n a.download = fileName\r\n document.body.appendChild(a);\r\n a.click();\r\n }\r\n });\r\n }\r\n };\r\n\r\n onChangeExtractAlertMsg = (val, key) => {\r\n this.setState({\r\n extractAlertMsg: val\r\n });\r\n }\r\n\r\n render() {\r\n const { commentList } = this.props;\r\n var showNumberOfComments = this.state.showNumberOfComments < commentList.length ? this.state.showNumberOfComments : commentList.length;\r\n return (\r\n\r\n \r\n
\r\n {label}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default CommentList;","import React, {Component} from \"react\";\r\nimport { TextArea } from \"../custom-form/custom-textarea.component\";\r\nimport ButtonIcon from \"../../button\";\r\nimport Icons from \"../../icon\";\r\nimport { NotificationModal } from \"../modal/notification-modal.component\";\r\nimport CommentList from \"./comment-list.component\";\r\nimport { Allowed_Extension, Conf_Message_Allowed_Extension } from \"../../../constants/external-constants\";\r\nimport Translation from \"../../../../app/components/common/translation/translation.component\";\r\nimport { displayFinalFileName } from \"../../../utils/helpers.utils\";\r\n\r\nclass Comment extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.fileRef = React.createRef();\r\n this.state = {\r\n inputValue: \"\",\r\n fileList: [],\r\n fileListData: [],\r\n showModal: false,\r\n modalMessage: \"\"\r\n }\r\n }\r\n\r\n handleConfirmationModal = () => {\r\n this.setState(prevState => ({ showModal: !prevState.showModal}));\r\n }\r\n\r\n handleOnChange = (e) => {\r\n this.setState({ inputValue: e.target.value }) \r\n }\r\n\r\n handlePost = () => {\r\n this.props.addCommentAction(this.state.fileList, this.state.fileListData, this.state.inputValue)\r\n this.setState({\r\n inputValue: \"\",\r\n fileList: [],\r\n fileListData: [],\r\n });\r\n };\r\n\r\n resetFileInput = () => {\r\n this.fileRef.current.value = null;\r\n }\r\n\r\n handleFileChange = (event) => {\r\n const file = event.target.files[0];\r\n const filename = file?.name ?? '';\r\n const extIndex = filename?.lastIndexOf('.') ?? '';\r\n const newName = filename?.substring(0, Math.min(extIndex, 20)) ?? '';\r\n const extension = filename?.substring(extIndex + 1) ?? '';\r\n const finalName = extIndex > 20 ? `${newName}...${extension}` : filename;\r\n const allowedExtensions = Allowed_Extension;\r\n const modalMessageExt = Conf_Message_Allowed_Extension;\r\n\r\n if (file) {\r\n if (file?.size <= 10 * 1024 * 1024) {\r\n if (this.state.fileList.length <= 2) {\r\n if (allowedExtensions.includes(extension)) {\r\n this.setState({\r\n uploadedFileName: finalName,\r\n fileList: [...this.state.fileList, filename],\r\n fileListData: [...this.state.fileListData, file]\r\n });\r\n } else {\r\n this.setState({\r\n showModal: true,\r\n modalMessage: `Only files with the following format are allowed: ${modalMessageExt.map((ext) =>\" \"+ ext)}`\r\n });\r\n }\r\n } else {\r\n this.setState({\r\n showModal: true,\r\n modalMessage: \"Number of files exceeds the allowable limit of 3\"\r\n });\r\n }\r\n } else {\r\n this.setState({\r\n showModal: true,\r\n modalMessage: \"Total file size exceeds the allowable limit of 10 MB\"\r\n });\r\n }\r\n }\r\n else {\r\n this.setState({\r\n showModal: false,\r\n\r\n });\r\n }\r\n this.resetFileInput();\r\n };\r\n\r\n\r\n deleteAttachInComment(index) {\r\n this.setState((prevState) => {\r\n const copyFileList = prevState.fileList.slice();\r\n const copyFileListData = prevState.fileListData.slice();\r\n\r\n copyFileList.splice(index, 1)\r\n copyFileListData.splice(index, 1)\r\n return {\r\n fileList: copyFileList,\r\n fileListData: copyFileListData\r\n }\r\n })\r\n }\r\n \r\n render() {\r\n var hasNoComment = this.state.inputValue;\r\n var isOnComment = sessionStorage.getItem('UserId') != this.props.commentList.modifiedBy;\r\n return (\r\n \r\n {(this.props.commentList && this.props.commentList.length > 0 ) ?\r\n commentList.slice(0, showNumberOfComments).map((data, index) => \r\n
\r\n \r\n
\r\n )\r\n :\r\n \r\n \r\n {\r\n data[\"State\"] &&\r\n JSON.parse(data[\"FileName\"]) && JSON.parse(data[\"FileName\"]).map((file, i) => (\r\n this.handleDelete(data[\"CommentID\"])}\r\n />\r\n }\r\n
\r\n data[\"CircuitID\"] != null ? this.downloadFile(data[\"CircuitID\"], data[\"CommentID\"], file)\r\n : data[\"DisputeID\"] != null ? this.downloadFile(data[\"DisputeID\"], data[\"CommentID\"], file)\r\n : data[\"InvoiceID\"] != null ? this.downloadFile(data[\"InvoiceID\"], data[\"CommentID\"], file)\r\n : this.downloadFile(data[\"EquipmentID\"], data[\"CommentID\"], file) : () => { }}\r\n >\r\n
\r\n ))}\r\n {\r\n (data[\"State\"] && this.props.isReadAndWrite) && data[\"isOwnerComment\"] && \r\n \r\n
\r\n \r\n
\r\n \r\n {data[\"FirstName\"]} {data[\"LastName\"]} \r\n
\r\n posted on
\r\n {moment.utc(data[\"DateCreated\"]).local().format(\"MMMM DD, yyyy\")}\r\nat
\r\n {moment.utc(data[\"DateCreated\"]).local().format('hh:mm A')} \r\n\r\n {this.displayComment(data)}\r\n
\r\n\r\n
\r\n }\r\n {this.props.noMessage}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Comment;","import React, {Component} from \"react\";\r\nimport Comment from \"../../../common/comments/comment.component\";\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { inventoryCircuitActions } from \"../../../../store/external/inventory/circuit.reducer\";\r\nimport { Loading } from \"../../../common/loading\";\r\nimport { MAX_LENGTH } from \"../../../../../app/constants/external-constants\";\r\n\r\nclass CircuitComment extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: true,\r\n }\r\n \r\n }\r\n\r\n componentDidMount() {\r\n const { getInventoryCircuitComments } = this.props;\r\n getInventoryCircuitComments(this.props.circuitId)\r\n .then(()=>{ this.setState({isLoading:false})\r\n });\r\n }\r\n\r\n postComment(attachedFilename, attachedFileData, commentDescription) {\r\n const { postInventoryCircuitComments, getInventoryCircuitComments } = this.props;\r\n postInventoryCircuitComments(this.props.circuitId, attachedFilename, attachedFileData, commentDescription);\r\n getInventoryCircuitComments(this.props.circuitId)\r\n .then(()=>{ this.setState({isLoading:false})\r\n }); \r\n }\r\n\r\n\r\n handleDeleteCircuitComments = async (circuitId) => {\r\n this.setState({isLoading:true});\r\n const { deleteInventoryCircuitComments, getInventoryCircuitComments } = this.props;\r\n await deleteInventoryCircuitComments(circuitId, this.props.circuitId);\r\n await getInventoryCircuitComments(this.props.circuitId) .then(()=>{\r\n this.setState({isLoading:false})\r\n });\r\n this.setState({show : false})\r\n }\r\n\r\n \r\n\r\n\r\n render(){\r\n if(this.state.isLoading) {\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.isReadAndWrite &&\r\n - \r\n {this.state.fileList.map((file, index) => (\r\n
- \r\n \r\n\r\n { this.deleteAttachInComment(index)}}>x\r\n \r\n ))}\r\n
\r\n } inputValue={this.state.inputValue} maxLength={this.props.maxLength} onChange={(e) => this.handleOnChange(e)} />\r\n
\r\n \r\n this.fileRef.current.click()} iconLeft=\"paper-clip-light\" iconSize=\"17px\" isDisable={!hasNoComment} customClassName=\"header-option-list header-filter-button\" labelName=\"Attach File\">\r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n | {this.toLocaleLanguage('account_number_capital')} | \r\n{detailsInfo?.accountNumber && detailsInfo.accountNumber} | \r\n
| {this.toLocaleLanguage('account_type_capital')} | \r\n{detailsInfo?.accountType && detailsInfo.accountType} | \r\n
| {this.toLocaleLanguage('contract_id_capital')} | \r\n{detailsInfo?.contractID && detailsInfo.contractID} | \r\n
| {this.toLocaleLanguage('vendor_capital')} | \r\n{detailsInfo?.vendor && detailsInfo.vendor} | \r\n
| {this.toLocaleLanguage('currency_capital')} | \r\n{detailsInfo?.currency && detailsInfo.currency} | \r\n
| {this.toLocaleLanguage('service_type_capital')} | \r\n{detailsInfo?.serviceType && detailsInfo.serviceType} | \r\n
| {this.toLocaleLanguage('status_capital')} | \r\n{detailsInfo?.status && detailsInfo.status} | \r\n
| {this.toLocaleLanguage('client_capital')} | \r\n{detailsInfo?.client && detailsInfo.client} | \r\n
| {this.toLocaleLanguage('allocation_level_capital')} | \r\n{detailsInfo?.allocationLevel && detailsInfo.allocationLevel} | \r\n
| {this.toLocaleLanguage('ap_vendor_id_capital')} | \r\n{detailsInfo?.apVendorID && detailsInfo.apVendorID} | \r\n
| {this.toLocaleLanguage('remit_id_capital')} | \r\n{detailsInfo?.remitID && detailsInfo.remitID} | \r\n
{this.toLocaleLanguage('location_capital')}
\r\n| {this.toLocaleLanguage('billing_address_capital')} | \r\n{detailsInfo?.billingAddress && detailsInfo.billingAddress} | \r\n
| {this.toLocaleLanguage('remit_address_capital')} | \r\n{detailsInfo?.remitAddress && detailsInfo.remitAddress} | \r\n
{this.toLocaleLanguage('cost_allocation_capital')}
\r\n\r\n this.navigateToDetails(rowItem)}\r\n modalPagination={true}\r\n paginationAction={this.handlePaginationAction}\r\n totalPage={this.props.linkedPages ? this.props.linkedPages.TotalEntries : 0}\r\n isNotSortable={true}\r\n haveLink={true}\r\n tableClassName=\"table-fit custom-table-header linked-circuit-modal-table-body\"\r\n noDataAvailable={true}\r\n /> \r\n
\r\n \r\n
\r\n {this.toLocaleLanguage(this.props.linkedTitle)}
\r\n {this.props.linkedPages ? this.props.linkedPages.TotalEntries : 0} {linkedTitle == \"linked_circuits_capital\" ? this.toLocaleLanguage('total_circuits') : this.toLocaleLanguage('total_invoices')}\r\n\r\n \r\n \r\n \r\n this.handleSearchChange(e)}\r\n onBlur={this.searchAction}\r\n onKeyPress={this.searchAction}\r\n placeholder={this.props.searchPlaceHolder}\r\n aria-label=\"Small\"\r\n aria-describedby=\"inputGroup-sizing-sm\"\r\n maxLength={MAX_LENGTH.limit_100}\r\n />\r\n \r\n
\r\n \r\n