\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { token, validateEmail, CheckTokenExp } from '../../../config';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Tooltip, Popover, Menu } from 'antd';\r\nimport { textedit, textdelete } from '../../../components/Ants/TooltipText/Text';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\n\r\nexport default class TablePerson extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n\r\n {\r\n title: 'Name',\r\n dataIndex: 'PER_NAME',\r\n key: 'PER_NAME',\r\n width: 300,\r\n render: text => (text ? {text}
: \"No name\")\r\n },\r\n {\r\n title: 'Destination',\r\n dataIndex: 'DES_VALUE_LIST',\r\n width: 300,\r\n render: (text, item) => (\r\n \r\n {\r\n item.DES_PRIMARY ? item.DES_PRIMARY : \"\"\r\n }\r\n {\r\n item.DES_VALUE_LIST.length > 0 ?\r\n
{\r\n return (\r\n {value}
\r\n )\r\n })\r\n }>\r\n {\"+\" + item.DES_COUNT + \" more\"} \r\n \r\n : null\r\n }\r\n\r\n
text)}>\r\n {\r\n value.map((text, i) =>\r\n \r\n {text} {value.length == i + 1 ? \"\" : \" , \"}\r\n \r\n )\r\n }\r\n
\r\n )\r\n },\r\n {\r\n title: 'Channel',\r\n dataIndex: 'channel',\r\n key: 'channel',\r\n width: 100,\r\n align: 'center',\r\n render: (text, item) => {\r\n { var phone = false; var email = false; }\r\n return (\r\n \r\n {\r\n item.CHANNEL_PRIMARY == \"2\" ? email = true : phone = true\r\n }\r\n {\r\n item.CHANNEL_LIST.map((value, index) => {\r\n if (value == \"2\") {\r\n if (!email) {\r\n email = true;\r\n }\r\n } else {\r\n if (!phone) {\r\n phone = true\r\n }\r\n } \r\n }\r\n )\r\n }\r\n {\r\n phone ?\r\n
\r\n )\r\n }\r\n },\r\n {\r\n title: 'Birthday',\r\n dataIndex: 'PER_DOB',\r\n key: 'PER_DOB',\r\n width: 100,\r\n },\r\n {\r\n dataIndex: 'key',\r\n key: 'key',\r\n width: 50,\r\n align: 'right',\r\n render: (key, item) => (\r\n \r\n
\r\n \r\n \r\n\r\n {\r\n this.props.warningModal(true, \"Do you want to delete this person? \", \"Deleted person successfully.\"),\r\n this.props.setStateByProps(\"action\", \"delete\"),\r\n this.props.setStateByProps(\"key\", [{ PER_ID: item.PER_ID }])\r\n }}>\r\n \r\n \r\n } trigger=\"click\">\r\n \r\n
\r\n
key.PER_ID}\r\n pagination={{\r\n defaultPageSize: 10,\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: true,\r\n total: this.state.totalpage,\r\n showTotal: (total, range) => `${range[0]}-${range[1]} of ${this.state.totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }}\r\n onRow={(item, index) => ({\r\n onDoubleClick: () => this.setClickId(item)\r\n })}\r\n rowSelection={rowSelection}\r\n dataSource={data}\r\n columns={columns}\r\n tableLayout=\"fixed\"\r\n className=\"table-ants\"\r\n />\r\n\r\n \r\n
Check and upload the file again.
\r\n
\r\n
Insert {json.insert} records
\r\n
\r\n
Insert {json.insert} records
\r\n
\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n\r\n
Upload File}\r\n placement={this.state.placementUpload}\r\n height={'auto'}\r\n closable={false}\r\n onClose={this.onCloseUpload}\r\n visible={this.state.visibleUpload}\r\n >\r\n \r\n \r\n \r\n \r\n {loading ? 'UPLOADING' : 'START UPLOAD'}\r\n \r\n File type * xlsx maximum upload file size total 1 MB \r\n \r\n
\r\n \r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col } from 'antd';\r\n\r\n\r\nexport default class TagDestination extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n render() {\r\n const { icon, title, deskey, length } = this.props;\r\n\r\n return (\r\n \r\n {\r\n icon == \"mobile\" ?\r\n \r\n {\r\n this.props.warningModal(true, \"Do you want to delete?\", \"Delete Success.\"),\r\n this.props.setStateByProps(\"action\", \"deletedes\"),\r\n this.props.setStateByProps(\"deskey\", deskey)\r\n }}> \r\n\r\n \r\n \r\n : icon == \"email\" ?\r\n \r\n {\r\n this.props.warningModal(true, \"Do you want to delete?\", \"Delete Success.\"),\r\n this.props.setStateByProps(\"action\", \"deletedes\"),\r\n this.props.setStateByProps(\"deskey\", deskey)\r\n }}> \r\n \r\n \r\n : \"\"\r\n }\r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col } from 'antd';\r\n\r\n\r\nexport default class TagPersonTag extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n }\r\n\r\n render() {\r\n const { title, tagkey } = this.props;\r\n\r\n return (\r\n \r\n \r\n {title}\r\n {\r\n this.props.warningModal(true, \"Do you want to delete tag?\", \"Delete Success.\"),\r\n this.props.setStateByProps(\"action\", \"deletetag\"),\r\n this.props.setStateByProps(\"tagkey\", tagkey)\r\n }}> \r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Icon, Row, Col,\r\n Button, Tooltip, Checkbox, Spin, PageHeader, Card, Tag, Modal\r\n} from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { token, getUrlVars, validateEmail, CheckTokenExp, ReplaceUrlTaga } from '../../../../config';\r\nimport TagDestination from '../../../../components/Ants/Tag/TagDestination';\r\nimport TagPersonTag from '../../../../components/Ants/Tag/TagPersonTag';\r\nimport SelectTags from '../../../../components/Ants/Select/SelectTags';\r\nimport ModalSuccess from '../../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../../components/Ants/Modal/ModalWarning';\r\nimport { apiClient } from '../../../../api';\r\nimport{root} from '../../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { MonthPicker, RangePicker, WeekPicker } = DatePicker;\r\nconst { TextArea } = Input;\r\nconst confirm = Modal.confirm;\r\nconst dateFormat = 'DD/MM/YYYY';\r\n\r\nexport default class Detail extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n PER_ID: null,\r\n PER_ACC: 0,\r\n PER_FIRSTNAME: null,\r\n PER_LASTNAME: null,\r\n PER_GENDER: 0,\r\n PER_CITY: null,\r\n PER_ADDRESS: null,\r\n PER_COUNTRY: null,\r\n PER_DOB: null,\r\n DES_ID: 0,\r\n DES_VALUE: null,\r\n DES_CREATE_DATE: null,\r\n DES_UPDATE_DATE: null,\r\n Check_des: null,\r\n Create_Des: true,\r\n Destinationslist: [],\r\n Taglist: [],\r\n Errorslist: [],\r\n //errors: [],\r\n loading: false,\r\n form: \"\",\r\n disable_tag: true,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n name: \"\",\r\n dest: \"\",\r\n tag: \"\",\r\n search: \"\",\r\n tag: undefined,\r\n deskey: 0,\r\n errordup: \"\",\r\n errors: \"\",\r\n tagerror: \"\",\r\n tagid: null,\r\n primary: \"\",\r\n errorsPrimary: \"\"\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.RequestInfoPerson = this.RequestInfoPerson.bind(this);\r\n this.handleCheckDestinationsRepeat = this.handleCheckDestinationsRepeat.bind(this);\r\n this.handleOnDeleteDestinations = this.handleOnDeleteDestinations.bind(this);\r\n this.handleValidateDes = this.handleValidateDes.bind(this);\r\n this.handleValidateTag = this.handleValidateTag.bind(this);\r\n this.handleOnDeleteTag = this.handleOnDeleteTag.bind(this);\r\n //this.handleOnSavePerson = this.handleOnSavePerson.bind(this);\r\n this.handleAddTag = this.handleAddTag.bind(this);\r\n this.handleCheckDestinationsRepeatPrimary = this.handleCheckDestinationsRepeatPrimary.bind(this);\r\n this.handleOnSaveDestinations = this.handleOnSaveDestinations.bind(this);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.RequestInfoPerson();\r\n ReplaceUrlTaga();\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"deletedes\") {\r\n this.handleOnDeleteDestinations();\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: value });\r\n }\r\n if (this.state.action == \"deletetag\") {\r\n this.handleOnDeleteTag();\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\" });\r\n value = false;\r\n this.props.history.push('/people/person/')\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n if (this.state.action == \"save\") {\r\n if (this.state.primary.length >= 9 || this.state.primary.length >= 11) {\r\n this.setState({ action: \"saveall\" });\r\n this.handleOnSavePersonDestinations();\r\n } else {\r\n value = false\r\n }\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n if (this.state.action == \"vali_des\") {\r\n this.handleValidateDes();\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"vali_tag\") {\r\n this.handleValidateTag();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n //this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n this.setState(state => {\r\n if (state.successModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n RequestInfoPerson() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n if (getUrlVars()[\"id\"]) {\r\n\r\n apiClient.get('api/Person/PERSON/' + getUrlVars()[\"id\"]\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n PER_ID: json.PER_ID,\r\n PER_FIRSTNAME: json.PER_FIRSTNAME,\r\n PER_LASTNAME: json.PER_LASTNAME,\r\n PER_GENDER: json.PER_GENDER,\r\n PER_CITY: json.PER_CITY,\r\n PER_ADDRESS: json.PER_ADDRESS,\r\n PER_COUNTRY: json.PER_COUNTRY,\r\n PER_DOB: json.PER_DOB,\r\n Destinationslist: json.PERSONDESTINATION.filter((item) => item.DES_PRIMARY == null),\r\n DES_ID: json.PERSONDESTINATION.filter((item) => item.DES_VALUE == null)[0].DES_ID,\r\n primary: json.PERSONDESTINATION.filter((item) => item.DES_VALUE == null)[0].DES_PRIMARY,\r\n Taglist: json.PERSONGROUPASSIGN,\r\n disable_tag: json.PERSONDESTINATION.length > 0 ? false : true,\r\n //errors: \"\",\r\n //errorsPrimary: \"\",\r\n }, function () { this.state.Destinationslist.length > 0 ? this.setState({ Create_Des: false }) : this.setState({ Create_Des: true }) });\r\n setTimeout(() => {\r\n this.setState({ loading: false });\r\n }, 10);\r\n })\r\n .catch(error => {\r\n this.setState({\r\n PER_ID: null,\r\n PER_FIRSTNAME: null,\r\n PER_LASTNAME: null,\r\n PER_GENDER: 0,\r\n PER_CITY: null,\r\n PER_ADDRESS: null,\r\n PER_COUNTRY: null,\r\n PER_DOB: null,\r\n Destinationslist: [],\r\n Taglist: [],\r\n Create_Des: true,\r\n DES_VALUE: null,\r\n errors: \"\",\r\n loading: false,\r\n disable_tag: true,\r\n errorsPrimary: \"\",\r\n })\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n this.setState({\r\n PER_ID: null,\r\n PER_FIRSTNAME: null,\r\n PER_LASTNAME: null,\r\n PER_GENDER: 0,\r\n PER_CITY: null,\r\n PER_ADDRESS: null,\r\n PER_COUNTRY: null,\r\n PER_DOB: null,\r\n Destinationslist: [],\r\n Taglist: [],\r\n Create_Des: true,\r\n DES_VALUE: null,\r\n errors: \"\",\r\n loading: false,\r\n disable_tag: true,\r\n errorsPrimary: \"\",\r\n })\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleCheckDestinationsRepeat(e) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ errors: \"\", iconLoading: true, form: \"validating\" })\r\n\r\n let req = JSON.stringify({\r\n \"DES_VALUE\": this.state.DES_VALUE,\r\n });\r\n\r\n apiClient.post('api/Person/CHECK_DESTINATION', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n\r\n this.setState({ errordup: json, loading: false });\r\n this.warningModal(true, \"Do you want to add this destination?\", \"Added destination successfully.\")\r\n this.setStateByProps(\"action\", \"vali_des\");\r\n })\r\n .catch(req => {\r\n\r\n //let error = req.response.data.replace(/\"/g, \"\");\r\n //let errors = {};\r\n //let form = \"\";\r\n //if (error != \"Data already exists\") {\r\n // errors = error;\r\n //} else {\r\n // errors = \"\";\r\n //}\r\n //this.setState({ errors: errors, iconLoading: false })\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleCheckDestinationsRepeatPrimary(e) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ errorsPrimary: \"\" })\r\n if (e.length >= 7) {\r\n this.setState({ errors: \"\", iconLoading: true, form: \"validating\" })\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n \"DES_PRIMARY\": e,\r\n \"DES_PER\": getUrlVars()[\"id\"]\r\n });\r\n\r\n apiClient.post('api/Person/CHECK_DESTINATIONPRIMARY', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({ errorsPrimary: json })\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(req => {\r\n\r\n let error = req.response.data.replace(/\"/g, \"\");\r\n let errors = {};\r\n let form = \"\";\r\n if (error != \"Data already exists\") {\r\n errors = error;\r\n } else {\r\n errors = \"\";\r\n }\r\n this.setState({ errorsPrimary: errors })\r\n\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n this.setState({ errorsPrimary: \"Invalid number\" })\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnSavePersonDestinations() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ errors: \"\", tagerror: \"\", DES_VALUE: null, tag: \"\" });\r\n if (!this.state.errors) {\r\n let req = JSON.stringify({\r\n PER_FIRSTNAME: this.state.PER_FIRSTNAME == \"\" ? null : this.state.PER_FIRSTNAME,\r\n PER_LASTNAME: this.state.PER_LASTNAME == \"\" ? null : this.state.PER_LASTNAME,\r\n PER_ID: this.state.PER_ID?this.state.PER_ID:0,\r\n DES_ID: this.state.DES_ID,\r\n DES_VALUE: null,\r\n DES_PRIMARY: this.state.primary,\r\n PER_GENDER: this.state.PER_GENDER > 0 ? this.state.PER_GENDER : null,\r\n PER_CITY: this.state.PER_CITY == \"\" ? null : this.state.PER_CITY,\r\n PER_ADDRESS: this.state.PER_ADDRESS == \"\" ? null : this.state.PER_ADDRESS,\r\n PER_COUNTRY: this.state.PER_COUNTRY == \"\" ? null : this.state.PER_COUNTRY,\r\n PER_DOB: this.state.PER_DOB != null ? moment(this.state.PER_DOB, 'DD/MM/YYYY').format('DD/MM/YYYY') : null,\r\n });\r\n\r\n apiClient.post('api/Person/PERSONDESTINATIONS_SAVE', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n let obj = {};\r\n const rows = this.state.Destinationslist;\r\n\r\n if (!json.DES_PRIMARY) {\r\n obj[\"DES_ID\"] = json.DES_ID;\r\n obj[\"DES_PER\"] = json.DES_PER;\r\n obj[\"DES_VALUE\"] = json.DES_VALUE;\r\n obj[\"DES_CREATE_DATE\"] = json.DES_CREATE_DATE;\r\n obj[\"DES_UPDATE_DATE\"] = json.DES_UPDATE_DATE;\r\n obj[\"DES_IS_DELETED\"] = json.DES_IS_DELETED;\r\n\r\n rows.push(obj);\r\n }\r\n\r\n\r\n function compare(a, b) {\r\n if (a.DES_ID > b.DES_ID)\r\n return -1;\r\n if (a.DES_ID < b.DES_ID)\r\n return 1;\r\n return 0;\r\n }\r\n\r\n this.setState({\r\n PER_ID: json.DES_PER,\r\n primary: json.DES_PRIMARY,\r\n Destinationslist: rows.sort(compare),\r\n disable_tag: rows.length > 0 ? false : true,\r\n });\r\n\r\n if (this.state.action == \"saveall\") {\r\n this.props.history.push({ search: '?id=' + json.DES_PER })\r\n //this.props.history.push('/people/person/')\r\n } else {\r\n this.props.history.push({\r\n pathname: '/people/person/detail',\r\n search: '?id=' + json.DES_PER\r\n })\r\n }\r\n\r\n this.setStateByProps(\"DES_VALUE\", \"\");\r\n this.setStateByProps(\"tag\", \"\");\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ form: \"error\" })\r\n //message.error(text);\r\n\r\n this.setState({ loading: false });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnSaveDestinations() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ successModalVisible: true, errors: \"\" });\r\n this.modalcountDown();\r\n if (!this.state.errors) {\r\n let req = JSON.stringify({\r\n DES_ID: this.state.DES_ID,\r\n DES_PER: this.state.PER_ID,\r\n DES_VALUE: this.state.DES_VALUE,\r\n DES_PRIMARY: this.state.primary,\r\n });\r\n\r\n apiClient.post('api/Person/DESTINATION_SAVE', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n let obj = {};\r\n const rows = this.state.Destinationslist;\r\n\r\n if (!json.DES_PRIMARY) {\r\n obj[\"DES_ID\"] = json.DES_ID;\r\n obj[\"DES_PER\"] = json.DES_PER;\r\n obj[\"DES_VALUE\"] = json.DES_VALUE;\r\n obj[\"DES_CREATE_DATE\"] = json.DES_CREATE_DATE;\r\n obj[\"DES_UPDATE_DATE\"] = json.DES_UPDATE_DATE;\r\n obj[\"DES_IS_DELETED\"] = json.DES_IS_DELETED;\r\n\r\n rows.push(obj);\r\n }\r\n\r\n\r\n function compare(a, b) {\r\n if (a.DES_ID > b.DES_ID)\r\n return -1;\r\n if (a.DES_ID < b.DES_ID)\r\n return 1;\r\n return 0;\r\n }\r\n\r\n this.setState({\r\n PER_ID: json.DES_PER,\r\n Destinationslist: rows.sort(compare),\r\n disable_tag: rows.length > 0 ? false : true,\r\n });\r\n\r\n if (this.state.action == \"saveall\") {\r\n this.props.history.push({ search: '?id=' + json.DES_PER })\r\n //this.props.history.push('/people/person/')\r\n } else {\r\n this.props.history.push({\r\n pathname: '/people/person/detail',\r\n search: '?id=' + json.DES_PER\r\n })\r\n }\r\n\r\n this.setStateByProps(\"DES_VALUE\", \"\");\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ form: \"error\" })\r\n message.error(text);\r\n\r\n this.setState({ loading: false });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnDeleteDestinations() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n\r\n apiClient.get('api/Person/DESTINATION_DELETE/' + this.state.deskey + '/' + getUrlVars()[\"id\"]\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n this.RequestInfoPerson();\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ form: \"error\" })\r\n message.error(text);\r\n\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleValidateDes() {\r\n this.setState(state => {\r\n let errors = \"\";\r\n let form = \"\";\r\n\r\n if (state.DES_VALUE == \"\" || state.DES_VALUE == null) {\r\n errors = \"Required field\";\r\n }\r\n else if (state.errordup) {\r\n errors = state.errordup;\r\n }\r\n else {\r\n if (isNaN(state.DES_VALUE)) {\r\n var pattern = new RegExp(/^((\"[\\w-\\s]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w-\\s]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-z]{2,6}(?:\\.[a-z]{2})?)$)|(@\\[?((25[0-5]\\.|2[0-4][0-9]\\.|1[0-9]{2}\\.|[0-9]{1,2}\\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\]?$)/i);\r\n if (!pattern.test(state.DES_VALUE)) {\r\n errors = \"Field is not email or number\";\r\n } else {\r\n if (!state.errors) {\r\n this.handleOnSaveDestinations();\r\n }\r\n errors = \"\";\r\n }\r\n } else {\r\n if (state.DES_VALUE.length >= 9 && state.DES_VALUE.length <= 11) {\r\n if (!state.errors) {\r\n this.handleOnSaveDestinations();\r\n } else {\r\n errors = state.errors;\r\n }\r\n } else {\r\n errors = \"Invalid number\";\r\n }\r\n }\r\n }\r\n\r\n return {\r\n errors: errors,\r\n form: form\r\n }\r\n \r\n });\r\n }\r\n\r\n handleValidateTag() {\r\n var checkduplicate = this.state.Taglist.find((e) => e.PRS_PRG == this.state.tagid);\r\n if (!checkduplicate) {\r\n this.handleOnSaveTag();\r\n } else {\r\n this.setState({ tagerror: \"Duplicate Tag\" });\r\n }\r\n }\r\n\r\n handleOnDeleteTag() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n\r\n apiClient.get('api/Person/DELETE_TAG/' + this.state.tagkey + '/' + getUrlVars()[\"id\"]\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n this.RequestInfoPerson();\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnSaveTag() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ successModalVisible: true });\r\n this.modalcountDown();\r\n this.setState({ loading: true, tagerror: \"\" })\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n PRS_PER: getUrlVars()[\"id\"],\r\n PRS_PRG: typeof state.tag == \"string\" ? state.tagid : state.tag\r\n });\r\n\r\n apiClient.post('api/Person/INSERT_TAG/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({ tag: null, tagid: null });\r\n\r\n this.RequestInfoPerson();\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n );\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleAddTag() {\r\n if (!CheckTokenExp()) {\r\n if (typeof this.state.tag == \"string\") {\r\n this.setState({ loading: true })\r\n if (this.state.errors.PRG_NAME != \"\" && this.state.errors.PRG_NAME != null) {\r\n this.setState({ loading: false })\r\n return false;\r\n }\r\n\r\n let req = JSON.stringify({\r\n PRG_NAME: this.state.tag\r\n });\r\n\r\n apiClient.post('api/Tag/INSERT_TAG', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({ tagid: json.PRG_ID, search: \"\" });\r\n this.setState({ loading: false });\r\n this.warningModal(true, \"Do you want to add this tag?\", \"Added tag successfully.\")\r\n this.setStateByProps(\"action\", \"vali_tag\");\r\n })\r\n .catch(error => {\r\n this.setState({ search: \"\" });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n setTimeout(() => {\r\n this.setState({ search: \"\", tagid: this.state.tag });\r\n this.warningModal(true, \"Do you want to add this tag?\", \"Added tag successfully.\")\r\n this.setStateByProps(\"action\", \"vali_tag\");\r\n }, 10)\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n render() {\r\n const styleMarginBottom = { marginBottom: 16 };\r\n const { PER_GENDER, errors, loading, warningModalVisible, message, messageSuccess, DES_VALUE,\r\n successModalVisible, tag, tagerror, Destinationslist, PER_FIRSTNAME, PER_LASTNAME, search, primary, errorsPrimary } = this.state;\r\n const routes = [\r\n {\r\n path: '/people/person/',\r\n breadcrumbName: 'People',\r\n },\r\n {\r\n path: 'Person',\r\n breadcrumbName: 'Person' + (getUrlVars()[\"id\"] ? ' edit' : ' new'),\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 Primary Destination \r\n * \r\n \r\n \r\n \r\n {errorsPrimary} :\r\n \r\n }\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n First Name \r\n Last Name \r\n
\r\n\r\n \r\n Gender \r\n \r\n Gender \r\n Male \r\n Female \r\n \r\n \r\n Birthday \r\n
\r\n\r\n \r\n Address \r\n \r\n \r\n
\r\n\r\n \r\n Country \r\n City \r\n
\r\n\r\n \r\n {\r\n this.warningModal(true, \"Do you want to discard change?\", \"Discarded change successfully.\");\r\n this.setStateByProps(\"action\", \"discard\");\r\n }}>\r\n \r\n\r\n\r\n {\r\n this.warningModal(true, \"Do you want to save this person?\", \"Saved person successfully.\");\r\n this.setStateByProps(\"action\", \"save\");\r\n }}>\r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n Destination \r\n \r\n
\r\n\r\n \r\n this.handleCheckDestinationsRepeat()}>\r\n \r\n \r\n
\r\n\r\n {\r\n errors ?\r\n {errors} :\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 Tags \r\n \r\n
\r\n\r\n \r\n { this.setState({ tagerror: \"\" }), this.handleAddTag() }}\r\n >\r\n \r\n \r\n
\r\n\r\n {tagerror} \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 title ?\r\n \r\n handleOnSelectRowDelete(id, e.target.checked)}\r\n />\r\n < Row gutter={16} type=\"flex\" justify=\"center\" style={{ textAlign: \"center\", marginBottom: '-25px' }}>\r\n {title} \r\n \r\n \r\n \r\n\r\n \r\n
\r\n\r\n { this.props.warningModal(true, \"Do you want to delete this tag?\", \"Deleted tag successfully.\"), handleOnSelectRowDelete(id, true), setStateByProps(\"action\", \"delete\") }}>\r\n \r\n
\r\n :\r\n \r\n \r\n
\r\n\r\n \r\n {\r\n this.props.warningModal(true, \"Do you want to create this tag?\", \"Created tag successfully.\"),\r\n setStateByProps(\"action\", \"add\")\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","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Tooltip, Popover, Menu } from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, CheckTokenExp } from '../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateTimeFormat = 'DD/MM/YYYY HH:mm:ss';\r\n\r\nexport default class TableLog extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n {\r\n title: 'Tag Name',\r\n dataIndex: 'PRG_NAME',\r\n key: 'PRG_NAME',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Member',\r\n dataIndex: 'MEMBER',\r\n key: 'MEMBER',\r\n width: 100,\r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'CREATE_DATE',\r\n key: 'CREATE_DATE',\r\n width: 150,\r\n \r\n },\r\n {\r\n dataIndex: 'PRG_ID',\r\n key: 'PRG_ID',\r\n width: 50,\r\n align: 'right',\r\n render: (key, item) => (\r\n \r\n
\r\n \r\n \r\n\r\n {\r\n this.props.warningModal(true, \"Do you want to delete this tag?\", \"Deleted tag successfully.\"),\r\n this.props.setStateByProps(\"action\", \"delete\"),\r\n this.props.setStateByProps(\"Tagdeletelist\", [{ 'PRG_ID': key }])\r\n }}>\r\n \r\n \r\n } trigger=\"click\">\r\n \r\n
\r\n\r\n
key.PRG_ID}\r\n pagination={{\r\n defaultPageSize: 10,\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: true,\r\n total: totalpage,\r\n showTotal: (total, range) => `${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n onRow={(item, index) => ({\r\n onDoubleClick: () => this.setClickId(item)\r\n })}\r\n rowSelection={rowSelection}\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n tableLayout=\"fixed\"\r\n />\r\n Tag this.props.setStateByProps('visible', false)}> }\r\n visible={visible}\r\n onOk={this.props.handleOk}\r\n onCancel={false}\r\n footer={[\r\n \r\n { this.props.warningModal(true, \"Do you want to add this tag?\", \"Add tag successfully.\"), this.props.setStateByProps('action', 'add') }}>\r\n \r\n \r\n
\r\n ]}\r\n >\r\n \r\n Name \r\n * \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Pagination } from 'antd';\r\n\r\nimport { token, CheckTokenExp,ReplaceUrlTaga } from '../../../config';\r\n\r\nimport CardTag from '../../../components/Ants/Card/CardTag';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport TableTag from '../../../components/Ants/Table/TableTag';\r\nimport ModalTag from '../../../components/Ants/Modal/ModalTag';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\n\r\nexport default class Tag extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n title: \"\",\r\n member: \"\",\r\n PRG_ID: 0,\r\n data: [],\r\n Create_Tag: false,\r\n Tagdeletelist: [],\r\n Disabled: true,\r\n loading: false,\r\n errors: [],\r\n SEARCH: \"\",\r\n minpage: 1,\r\n pagesize: 10,\r\n totalpage: 0,\r\n current: 1,\r\n currentpage: null,\r\n action: \"\",\r\n search: {\r\n value: \"\",\r\n },\r\n visible: false,\r\n screenwidth: 0,\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.RequestInfoTags = this.RequestInfoTags.bind(this);\r\n this.onChangePage = this.onChangePage.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.handleOnSaveTag = this.handleOnSaveTag.bind(this);\r\n this.handleOnDeleteAllTag = this.handleOnDeleteAllTag.bind(this);\r\n this.handleOnSelectRowDelete = this.handleOnSelectRowDelete.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.showModal = this.showModal.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n //this.RequestInfoTags(1, 10, \"\");\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n ReplaceUrlTaga();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 116 : e.offsetWidth - 116 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n RequestInfoTags(minpage, pagesize, value, currentpage) {\r\n if (!CheckTokenExp()) {\r\n this.state.data.length > 0 ? \"\" : this.setState({ loading: true });\r\n let req = JSON.stringify({\r\n \"SEARCH_TAG\": value,\r\n \"MINPAGE\": minpage,\r\n \"PAGESIZE\": pagesize\r\n });\r\n\r\n apiClient.post('api/Tag/TAG_LIST', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({ totalpage: json ? json.totalpage : 0, current: currentpage == null ? this.state.current : currentpage });\r\n this.setState({\r\n data: json.tag_list,\r\n Tagdeletelist: []\r\n });\r\n\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ totalpage: 0, current: this.state.current});\r\n this.setState({\r\n data: [],\r\n Tagdeletelist: []\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.state.Tagdeletelist ?\r\n this.setState({ warningModalVisible: value, message, messageSuccess }) : \"\"\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"add\") {\r\n this.handleOnSaveTag();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n if (this.state.action == \"delete\") {\r\n this.handleOnDeleteAllTag();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n\r\n onChangePage(currentPage, pageSize) {\r\n var maxpage = currentPage * pageSize;\r\n var minpage = maxpage - pageSize + 1;\r\n this.setState({ pagesize: pageSize, minpage: minpage, current: currentPage },\r\n function () {\r\n this.RequestInfoTags(minpage, pageSize, this.state.SEARCH, currentPage);\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n handleOnSaveTag() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n if (this.state.errors.PRG_NAME != \"\" && this.state.errors.PRG_NAME != null) {\r\n this.setState({ loading: false })\r\n return false;\r\n }\r\n\r\n let req = JSON.stringify({\r\n PRG_NAME: this.state.PRG_NAME\r\n });\r\n\r\n apiClient.post('api/Tag/INSERT_TAG', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.RequestInfoTags(1, 10, \"\");\r\n this.onSearch();\r\n this.setState({ PRG_NAME: \"\" });\r\n this.setState({ loading: false, visible: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnDeleteAllTag() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n let req = JSON.stringify({\r\n TAGS: this.state.Tagdeletelist,\r\n });\r\n\r\n apiClient.post('api/Tag/DELETE_ALL_TAG', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.RequestInfoTags(1, 10, \"\");\r\n this.onSearch();\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n handleOnSelectRowDelete(id, action) {\r\n const rows = [...this.state.Tagdeletelist]\r\n if (action == true) {\r\n rows.push({ 'PRG_ID': id });\r\n } else {\r\n var index = rows.findIndex(x => x.PRG_ID === id);\r\n if (index > -1) {\r\n rows.splice(index, 1);\r\n }\r\n }\r\n this.setState({\r\n Tagdeletelist: rows,\r\n Disabled: rows.length == 0 ? true : false\r\n })\r\n\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n value: state.SEARCH,\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n showModal() {\r\n this.setState({\r\n visible: true,\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, totalpage, Tagdeletelist, PRG_NAME, visible, screenwidth } = this.state;\r\n const { title, member, search } = this.state;\r\n const routes = [\r\n {\r\n path: '/people/person/',\r\n breadcrumbName: 'People',\r\n },\r\n {\r\n path: 'Person',\r\n breadcrumbName: 'Tag',\r\n },\r\n\r\n ];\r\n var styleinput_tagName = {\r\n width: screenwidth,\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\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
{text}
: \"No name\")\r\n },\r\n {\r\n title: 'Destination',\r\n dataIndex: 'DES_VALUE_LIST',\r\n width: 300,\r\n render: (text, item) => (\r\n \r\n {\r\n item.DES_PRIMARY ? item.DES_PRIMARY : \"\"\r\n }\r\n {\r\n item.DES_VALUE_LIST.length > 0 ?\r\n
{\r\n return (\r\n {value}
\r\n )\r\n })\r\n }>\r\n {\"+\" + item.DES_COUNT + \" more\"} \r\n \r\n : null\r\n }\r\n\r\n
text)}>\r\n {\r\n value.map((text, i) =>\r\n \r\n {text} {value.length == i + 1 ? \"\" : \" , \"}\r\n \r\n )\r\n }\r\n
\r\n )\r\n },\r\n {\r\n title: 'Channel',\r\n dataIndex: 'channel',\r\n key: 'channel',\r\n width: 100,\r\n align: 'center',\r\n render: (text, item) => {\r\n { var phone = false; var email = false; }\r\n return (\r\n \r\n {\r\n item.CHANNEL_PRIMARY == \"2\" ? email = true : phone = true\r\n }\r\n {\r\n item.CHANNEL_LIST.map((value, index) => {\r\n if (value == \"2\") {\r\n if (!email) {\r\n email = true;\r\n }\r\n } else {\r\n if (!phone) {\r\n phone = true\r\n }\r\n }\r\n }\r\n )\r\n }\r\n {\r\n phone ?\r\n
\r\n )\r\n }\r\n },\r\n ],\r\n pagesize: 10,\r\n currentpage: 1,\r\n minpage: 1,\r\n maxpage: 10,\r\n enddata: 10,\r\n totalpage: 0,\r\n };\r\n\r\n this.onChangePage = this.onChangePage.bind(this);\r\n this.getData = this.getData.bind(this);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.search !== prevProps.search) {\r\n this.getData();\r\n }\r\n if (this.props.loading !== prevProps.loading) {\r\n this.getData();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n const { search } = this.props;\r\n\r\n this.setState(state => {\r\n\r\n let req = JSON.stringify({\r\n \"START_DATE\": null,\r\n \"END_DATE\": null,\r\n \"PRG_ID\": getUrlVars()[\"id\"],\r\n \"SEARCH\": search ? search.name : \"\",\r\n \"DEST\": search ? search.dest : \"\",\r\n \"MINPAGE\": state.minpage,\r\n \"PAGESIZE\": state.maxpage\r\n });\r\n\r\n apiClient.post('api/Tag/PERSON_LIST', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState(state => {\r\n var json = data.data;\r\n return {\r\n data: json ? json.person_list : [],\r\n totalpage: json ? json.totalpage : 0,\r\n currentpage: state.minpage == 1 ? 1 : state.currentpage,\r\n minpage: 1\r\n };\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n data: [],\r\n totalpage: 0,\r\n currentpage: 1,\r\n minpage: 1\r\n });\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n onChangePage(currentPage, pageSize) {\r\n var currentpage = this.state.pagesize == pageSize ? currentPage : 1;\r\n var maxpage = currentpage * pageSize;\r\n var minpage = maxpage - pageSize + 1;\r\n\r\n this.setState({\r\n loading: true,\r\n currentpage: currentpage,\r\n pagesize: pageSize,\r\n minpage: minpage,\r\n maxpage: maxpage\r\n });\r\n this.getData();\r\n }\r\n\r\n render() {\r\n const { columns, data, totalpage, loading } = this.state;\r\n const { search } = this.props;\r\n const rowSelection = {\r\n onChange: (selectedRowKeys, selectedRows) => {\r\n this.props.setStateByProps(\"Insertlist\", selectedRows)\r\n },\r\n getCheckboxProps: record => ({\r\n key: record.key,\r\n }),\r\n };\r\n return (\r\n \r\n
key.ID}\r\n pagination={{\r\n defaultPageSize: \"10\",\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: true,\r\n total: totalpage,\r\n showTotal: (total, range) => `${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }}\r\n rowSelection={rowSelection}\r\n dataSource={data}\r\n columns={columns}\r\n className=\"table-ants\"\r\n />\r\n\r\n \r\n {\r\n this.props.warningModal(true, \"Do you want to delete this member?\", \"Deleted member successfully.\"),\r\n this.props.setStateByProps(\"action\", \"delete\"),\r\n this.props.setStateByProps(\"Deletelist\", [{ PRS_ID: item.PRS_ID }])\r\n }}\r\n > \r\n
\r\n ),\r\n },\r\n {\r\n title: 'Name',\r\n dataIndex: 'PER_NAME',\r\n key: 'PER_NAME',\r\n render: text => (text ? {text}
: \"No name\")\r\n },\r\n {\r\n title: 'Destination',\r\n dataIndex: 'DES_VALUE_LIST',\r\n width: 300,\r\n render: (text, item) => (\r\n \r\n {\r\n item.DES_PRIMARY ? item.DES_PRIMARY : \"123456789\"\r\n }\r\n {\r\n item.DES_VALUE_LIST.length > 0 ?\r\n
{\r\n return (\r\n {value}
\r\n )\r\n })\r\n }>\r\n {\"+\" + item.DES_COUNT + \" more\"} \r\n \r\n : null\r\n }\r\n\r\n
text)}>\r\n {\r\n value.map((text, i) =>\r\n \r\n {text} {value.length == i + 1 ? \"\" : \" , \"}\r\n \r\n )\r\n }\r\n
\r\n )\r\n },\r\n {\r\n title: 'Channel',\r\n dataIndex: 'channel',\r\n key: 'channel',\r\n width: 100,\r\n align: 'center',\r\n render: (text, item) => {\r\n { var phone = false; var email = false; }\r\n return (\r\n \r\n {\r\n item.CHANNEL_PRIMARY == \"2\" ? email = true : phone = true\r\n }\r\n {\r\n item.CHANNEL_LIST.map((value, index) => {\r\n if (value == \"2\") {\r\n if (!email) {\r\n email = true;\r\n }\r\n } else {\r\n if (!phone) {\r\n phone = true\r\n }\r\n }\r\n }\r\n )\r\n }\r\n {\r\n phone ?\r\n
\r\n )\r\n }\r\n },\r\n ],\r\n StartDate_Per: null,\r\n EndDate_Per: null,\r\n PRG_ID: 0,\r\n SEARCH_PER: \"\",\r\n totalpage: 0,\r\n Tagpersonlist: [],\r\n pagesize: 10,\r\n currentpage: 1,\r\n minpage: 1,\r\n maxpage: 10,\r\n enddata: 10,\r\n data: [],\r\n };\r\n\r\n this.RequestInfoTagsTagGroupAssign = this.RequestInfoTagsTagGroupAssign.bind(this);\r\n this.onChangePagePerson = this.onChangePagePerson.bind(this);\r\n this.getTagname = this.getTagname.bind(this);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.RequestInfoTagsTagGroupAssign();\r\n //this.getTagname();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.search !== prevProps.search) {\r\n this.RequestInfoTagsTagGroupAssign();\r\n }\r\n }\r\n\r\n RequestInfoTagsTagGroupAssign(currentpage_per) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n const { search } = this.props;\r\n\r\n this.setState(state => {\r\n\r\n let req = JSON.stringify({\r\n \"START_DATE\": this.state.StartDate_Per == \"\" ? null : this.state.StartDate_Per,\r\n \"END_DATE\": this.state.EndDate_Per == \"\" ? null : this.state.EndDate_Per,\r\n \"PRG_ID\": getUrlVars()[\"id\"],\r\n \"SEARCH\": search.name,\r\n \"DEST\": search.des,\r\n \"MINPAGE\": state.minpage,\r\n \"PAGESIZE\": state.maxpage\r\n });\r\n\r\n apiClient.post('api/Tag/TAGGROUPASSIGN_LIST', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n totalpage: json ? json.totalpage : 0,\r\n currentpage: state.minpage == 1 ? 1 : state.currentpage,\r\n minpage: 1\r\n });\r\n this.setState({ Tagpersonlist: json ? json.person_list : [], }, () => { this.props.updateWindowDimensions() });\r\n this.getTagname();\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n Tagpersonlist: [],\r\n totalpage: 0,\r\n currentpage: 1,\r\n minpage: 1\r\n });\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n getTagname() {\r\n if (!CheckTokenExp()) {\r\n if (getUrlVars()[\"id\"]) {\r\n apiClient.get('api/Tag/TAGNAME?id=' + getUrlVars()[\"id\"]\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.props.setStateByProps(\"titel\", json);\r\n this.props.setStateByProps(\"TAG_NAME\", json);\r\n\r\n })\r\n .catch(error => {\r\n\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n onChangePagePerson(currentPage, pageSize) {\r\n var currentpage = this.state.pagesize == pageSize ? currentPage : 1;\r\n var maxpage = currentpage * pageSize;\r\n var minpage = maxpage - pageSize + 1;\r\n\r\n this.setState({\r\n loading: true,\r\n currentpage: currentpage,\r\n pagesize: pageSize,\r\n minpage: minpage,\r\n maxpage: maxpage\r\n });\r\n this.RequestInfoTagsTagGroupAssign();\r\n }\r\n\r\n render() {\r\n const { columns, Tagpersonlist, loading, totalpage } = this.state;\r\n const rowSelection_person = {\r\n onChange: (selectedRowKeys, selectedRows) => {\r\n this.props.setStateByProps(\"Deletelist\", selectedRows);\r\n },\r\n };\r\n return (\r\n \r\n
key.ID}\r\n pagination={{\r\n current: this.state.currentpage,\r\n defaultPageSize: \"10\",\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: true,\r\n total: totalpage,\r\n showTotal: (total, range) => `${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: (currentPage, pageSize) => this.onChangePagePerson(currentPage, pageSize),\r\n onChange: (currentPage, pageSize) => this.onChangePagePerson(currentPage, pageSize)\r\n }}\r\n rowSelection={rowSelection_person}\r\n dataSource={Tagpersonlist}\r\n columns={columns}\r\n className=\"table-ants\"\r\n tableLayout=\"fixed\"\r\n />\r\n\r\n Add Member \r\n\r\n \r\n Search\r\n \r\n \r\n 0 ? false : true}\r\n onClick={() => {\r\n this.props.warningModal(true, \"Do you want to add member to this tag?\", \"Added member successfully.\"),\r\n this.props.setStateByProps(\"action\", \"addperson\")\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","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,\r\n Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu,\r\n Dropdown, Popover, Modal, Drawer, Upload\r\n} from 'antd';\r\nimport { token, getUrlVars, getFileExtension, CheckTokenExp,ReplaceUrlTaga } from '../../../../config';\r\n\r\nimport TableTagDetail from '../../../../components/Ants/Table/TableTagDetail';\r\nimport ModalTagAddMember from '../../../../components/Ants/Modal/ModalTagAddMember';\r\nimport ModalSuccess from '../../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../../components/Ants/Modal/ModalWarning';\r\nimport { apiClient } from '../../../../api';\r\nimport{root} from '../../../../config';\r\n\r\nexport default class Detail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n visible: false,\r\n titel: \"\",\r\n name: \"\",\r\n des: \"\",\r\n search: {\r\n name: \"\",\r\n des: \"\",\r\n },\r\n selectedFileList: [],\r\n action: \"\",\r\n Deletelist: [],\r\n Insertlist: [],\r\n popoverhide: false,\r\n TAG_NAME: \"\",\r\n screenwidth: 0,\r\n screenwidth2: 0,\r\n errorsTag: \"\",\r\n exportloading: false,\r\n }\r\n\r\n this.showModal = this.showModal.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.handleCancel = this.handleCancel.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.ExportfileToExcel = this.ExportfileToExcel.bind(this);\r\n this.ExportfileToExcelTemplate = this.ExportfileToExcelTemplate.bind(this);\r\n this.showDrawerUpload = this.showDrawerUpload.bind(this);\r\n this.onCloseUpload = this.onCloseUpload.bind(this);\r\n this.UploadFile = this.UploadFile.bind(this);\r\n this.dummyRequest = this.dummyRequest.bind(this);\r\n this.onUpload = this.onUpload.bind(this);\r\n this.handleOnAddTagPerson = this.handleOnAddTagPerson.bind(this);\r\n this.handleOnDeleteAllTagGroupAssign = this.handleOnDeleteAllTagGroupAssign.bind(this);\r\n this.handleVisibleChange = this.handleVisibleChange.bind(this);\r\n this.handleOnSaveTag = this.handleOnSaveTag.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n ReplaceUrlTaga();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n var e2 = document.getElementById(\"main2\");\r\n if (e && e2) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 224 : e.offsetWidth - 224 });\r\n this.setState({ screenwidth2: scroll ? e2.offsetWidth - 124 : e2.offsetWidth - 124 });\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n showModal() {\r\n this.setState({\r\n visible: true\r\n });\r\n\r\n\r\n this.onSearch();\r\n };\r\n\r\n handleOk(e) {\r\n this.setState({\r\n visible: false,\r\n });\r\n };\r\n\r\n handleCancel(e) {\r\n this.setState({\r\n visible: false,\r\n });\r\n };\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"uplaod\") {\r\n this.UploadFile();\r\n this.setState({ action: \"\", successModalVisible: value });\r\n }\r\n if (this.state.action == \"addperson\") {\r\n this.handleOnAddTagPerson();\r\n this.setState({ visible: false });\r\n this.setState({ action: \"\", successModalVisible: value });\r\n }\r\n if (this.state.action == \"delete\") {\r\n this.handleOnDeleteAllTagGroupAssign();\r\n this.setState({ action: \"\", successModalVisible: value });\r\n }\r\n\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\", successModalVisible: value });\r\n value = false;\r\n this.props.history.push('/people/tag/')\r\n\r\n }\r\n\r\n if (this.state.action == \"addtag\") {\r\n this.handleOnSaveTag();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n //this.setState({ successModalVisible: value });\r\n\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n this.setState(state => {\r\n if (state.successModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n des: state.des,\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n ExportfileToExcel() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ exportloading: true })\r\n let req = JSON.stringify({\r\n \"PRG_ID\": getUrlVars()[\"id\"],\r\n \"SEARCH\": this.state.name,\r\n \"DEST\": this.state.des,\r\n \"TAGNAME\": this.state.titel,\r\n });\r\n\r\n apiClient.post('api/Tag/EXPORT/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setStateByProps(\"active\", \"\");\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = \"TagPerson.xlsx\";\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ exportloading: false });\r\n })\r\n .catch(error => {\r\n var errorMsg = error;\r\n this.setState({ exportloading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n ExportfileToExcelTemplate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ exportloading: true })\r\n\r\n apiClient.get('api/Tag/EXPORT_TEMPLATE/'\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = \"TagPerson_Template.xlsx\";\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ exportloading: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ exportloading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n showDrawerUpload() {\r\n this.setState({\r\n visibleUpload: true,\r\n });\r\n\r\n };\r\n\r\n onCloseUpload() {\r\n this.setState({\r\n visibleUpload: false,\r\n });\r\n };\r\n\r\n onUpload(info) {\r\n if (info.file.size <= 1048576) {\r\n const nextState = {};\r\n switch (info.file.status) {\r\n case \"uploading\":\r\n if (getFileExtension(info.file.name) == \"xlsx\" || getFileExtension(info.file.name) == \"xls\") {\r\n nextState.selectedFileList = [info.file];\r\n } else {\r\n this.onCloseUpload();\r\n Modal.error({\r\n title: 'The file format is incorrect.',\r\n className: 'popup-error',\r\n content: (\r\n \r\n
Check and upload the file again.
\r\n
\r\n // Duplicate data or invalid format\r\n //
,\r\n // icon: \r\n
Insert {json.insert} records
\r\n
\r\n // Duplicate data or invalid format\r\n //
,\r\n // icon: \r\n
Insert {json.insert} records
\r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n \r\n Tag Name \r\n \r\n
\r\n\r\n \r\n { this.setState({ errorsTag: \"\" }), this.warningModal(true, \"Do you want to add this tag?\", \"Add tag successfully.\"), this.setStateByProps('action', 'addtag') }}>\r\n \r\n { this.warningModal(true, \"Do you want to discard change?\", \"Discarded change successfully.\"), this.setState({ action: \"discard\" }) }}>\r\n \r\n\r\n\r\n \r\n {errorsTag} :\r\n \r\n }\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n\r\n \r\n 0 ? false : true}\r\n onClick={() => { this.warningModal(true, \"Do you want to delete this member?\", \"Deleted member successfully.\"), this.setStateByProps(\"action\", \"delete\") }}>\r\n \r\n \r\n \r\n
this.handleVisibleChange(e)}\r\n content={\r\n \r\n \r\n \r\n \r\n \r\n { this.handleVisibleChange(false), this.showDrawerUpload() }}>\r\n \r\n \r\n \r\n } trigger=\"click\">\r\n\r\n \r\n\r\n \r\n\r\n
\r\n\r\n \r\n \r\n Search\r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n
Upload File}\r\n placement={this.state.placementUpload}\r\n height={'auto'}\r\n closable={false}\r\n onClose={this.onCloseUpload}\r\n visible={this.state.visibleUpload}\r\n >\r\n \r\n \r\n \r\n \r\n {loading ? 'UPLOADING' : 'START UPLOAD'}\r\n \r\n File type * xlsx maximum upload file size total 1 MB \r\n \r\n
\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 { Link } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Modal, Input } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, validateEmail, CheckTokenExp } from '../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { TextArea } = Input;\r\n\r\nexport default class TableBacklist extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n {\r\n title: 'Name',\r\n dataIndex: 'BLK_NAME',\r\n key: 'BLK_NAME',\r\n width: 200,\r\n render: text => (text ? {text}
: \"No name\")\r\n },\r\n {\r\n title: 'Destination',\r\n dataIndex: 'BLK_DES',\r\n key: 'BLK_DES',\r\n width: 150,\r\n },\r\n {\r\n title: 'Channel',\r\n dataIndex: 'BLK_DES',\r\n key: 'BLK_DES',\r\n width: 100,\r\n render: (text, item) => (\r\n \r\n {validateEmail(item.BLK_DES) ?\r\n
\r\n )\r\n },\r\n {\r\n title: 'Description',\r\n dataIndex: 'BLK_DESC',\r\n key: 'BLK_DESC',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'BLK_CREATE_DATE',\r\n key: 'BLK_CREATE_DATE',\r\n width: 150,\r\n },\r\n ],\r\n Blacklistslist: [],\r\n pagesize: 10,\r\n currentpage: 1,\r\n minpage: 1,\r\n maxpage: 10,\r\n enddata: 10,\r\n totalpage: 0,\r\n };\r\n\r\n this.onChangePage = this.onChangePage.bind(this);\r\n this.getData = this.getData.bind(this);\r\n\r\n\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.search !== prevProps.search) {\r\n this.getData();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n const { search } = this.props;\r\n\r\n this.setState(state => {\r\n\r\n let req = JSON.stringify({\r\n \"START_DATE\": search.dateRange[0] ? moment(search.dateRange[0]).format(\"DD/MM/YYYY\") : null,\r\n \"END_DATE\": search.dateRange[1] ? moment(search.dateRange[1]).format(\"DD/MM/YYYY\") : null,\r\n \"SEARCH_BLACKLIST\": search.name,\r\n \"DEST\": search.dest,\r\n \"MINPAGE\": state.minpage,\r\n \"PAGESIZE\": state.maxpage\r\n });\r\n\r\n apiClient.post('api/Blacklist/BLACKLIST_LIST', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState(state => {\r\n var json = data.data;\r\n return {\r\n Blacklistslist: json.black_list,\r\n totalpage: json ? json.totalpage : 0,\r\n currentpage: state.minpage == 1 ? 1 : state.currentpage,\r\n minpage: 1\r\n };\r\n }, () => { this.props.updateWindowDimensions() });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n data: [],\r\n totalpage: 0,\r\n currentpage: 1,\r\n minpage: 1\r\n });\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n onChangePage(currentPage, pageSize) {\r\n var currentpage = this.state.pagesize == pageSize ? currentPage : 1;\r\n var maxpage = currentpage * pageSize;\r\n var minpage = maxpage - pageSize + 1;\r\n\r\n this.setState({\r\n loading: true,\r\n currentpage: currentpage,\r\n pagesize: pageSize,\r\n minpage: minpage,\r\n maxpage: maxpage\r\n });\r\n this.getData(minpage);\r\n }\r\n\r\n render() {\r\n const { columns, Blacklistslist, loading } = this.state;\r\n const rowSelection = {\r\n columnWidth: 30,\r\n onChange: (selectedRowKeys, selectedRows) => {\r\n this.props.setStateByProps(\"key\", selectedRowKeys)\r\n },\r\n };\r\n return (\r\n \r\n\r\n
key.BLK_ID}\r\n pagination={{\r\n defaultPageSize: \"10\",\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: true,\r\n total: this.state.totalpage,\r\n showTotal: (total, range) => `${range[0]}-${range[1]} of ${this.state.totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }}\r\n rowSelection={rowSelection}\r\n columns={columns}\r\n dataSource={Blacklistslist}\r\n className=\"table-ants\"\r\n tableLayout=\"fixed\"\r\n />\r\n\r\n\r\n\r\n\r\n \r\n Backlist \r\n \r\n \r\n \r\n
\r\n ]}\r\n >\r\n\r\n \r\n Name \r\n {c.TEXT} ))\r\n }\r\n \r\n\r\n \r\n
\r\n\r\n \r\n Destination \r\n * \r\n {this.state.errors.BLK_DES}
\r\n }\r\n \r\n
\r\n\r\n \r\n Description \r\n * \r\n {\r\n this.props.setStateByProps(\"BLK_DESC\", e.currentTarget.value)\r\n }}\r\n />\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Icon, Row, Col,\r\n Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu, Dropdown, Modal, Popover, Drawer,\r\n Upload\r\n} from 'antd';\r\nimport { token, getFileExtension, CheckTokenExp,ReplaceUrlTaga } from '../../../config';\r\n\r\nimport TableBacklist from '../../../components/Ants/Table/TableBacklist';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalBlacklist from '../../../components/Ants/Modal/ModalBlacklist';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\n\r\nconst { MonthPicker, RangePicker, WeekPicker } = DatePicker;\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { TextArea } = Input;\r\n\r\n\r\n\r\nexport default class Blacklist extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n visible: false,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n msg_errors: \"\",\r\n name: \"\",\r\n dest: \"\",\r\n dateRange: [null, null],\r\n key: [],\r\n search: {\r\n name: \"\",\r\n dest: \"\",\r\n dateRange: [null, null]\r\n },\r\n action: \"\",\r\n BLK_DES: \"\",\r\n visibleUpload: false,\r\n selectedFileList: [],\r\n placementUpload: 'right',\r\n screenwidth: 0,\r\n exportloading: false,\r\n };\r\n\r\n\r\n this.showModal = this.showModal.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.handleCancel = this.handleCancel.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.handleCheckBlacklist = this.handleCheckBlacklist.bind(this);\r\n this.handleOnSaveBlacklist = this.handleOnSaveBlacklist.bind(this);\r\n this.handleOnDeleteBlacklist = this.handleOnDeleteBlacklist.bind(this);\r\n this.ExportfileToExcel = this.ExportfileToExcel.bind(this);\r\n this.ExportfileToExcelTemplate = this.ExportfileToExcelTemplate.bind(this);\r\n this.showDrawerUpload = this.showDrawerUpload.bind(this);\r\n this.onCloseUpload = this.onCloseUpload.bind(this);\r\n this.UploadFile = this.UploadFile.bind(this);\r\n this.dummyRequest = this.dummyRequest.bind(this);\r\n this.onUpload = this.onUpload.bind(this);\r\n this.handleVisibleChange = this.handleVisibleChange.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n ReplaceUrlTaga();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 132 : e.offsetWidth - 132 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n showModal() {\r\n this.setState({\r\n visible: true,\r\n });\r\n };\r\n\r\n handleOk(e) {\r\n this.setState({\r\n visible: false,\r\n BLK_PER: undefined,\r\n BLK_DES: \"\",\r\n BLK_DESC: \"\",\r\n errors: \"\",\r\n });\r\n };\r\n\r\n handleCancel(e) {\r\n this.setState({\r\n visible: false,\r\n BLK_PER: undefined,\r\n BLK_DES: \"\",\r\n BLK_DESC: \"\",\r\n errors: \"\",\r\n });\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"add\") {\r\n this.handleOnSaveBlacklist();\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: value, errors: \"\" });\r\n }\r\n if (this.state.action == \"delete\") {\r\n this.handleOnDeleteBlacklist();\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: value });\r\n }\r\n if (this.state.action == \"uplaod\") {\r\n this.UploadFile();\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n if (this.state.action == \"error\") {\r\n this.setState({ action: \"\", errors: this.state.msg_errors });\r\n }\r\n\r\n\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n dest: state.dest,\r\n dateRange: state.dateRange\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n handleCheckBlacklist() {\r\n if (!CheckTokenExp()) {\r\n let req = JSON.stringify({\r\n \"BLK_DES\": this.state.BLK_DES,\r\n });\r\n\r\n apiClient.post('api/Blacklist/CHECK_DESTINATION', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState(state => {\r\n var json = data.data;\r\n this.handleOnSaveBlacklist();\r\n this.handleOk();\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n handleOnSaveBlacklist() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true })\r\n\r\n let req = JSON.stringify({\r\n BLK_PER: this.state.BLK_PER == 0 ? null : this.state.BLK_PER,\r\n BLK_DES: this.state.BLK_DES,\r\n BLK_DESC: this.state.BLK_DESC,\r\n });\r\n\r\n apiClient.post('api/Blacklist/INSERT_BLACKLIST', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState(state => {\r\n var json = data.data;\r\n\r\n this.setState({ visible: false, BLK_PER: undefined, BLK_DES: \"\", BLK_DESC: \"\" });\r\n this.onSearch();\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n handleOnDeleteBlacklist() {\r\n if (!CheckTokenExp()) {\r\n this.state.key.map((key) => {\r\n this.setState({ loading: true })\r\n apiClient.get('api/Blacklist/DELETE_BLACKLIST/' + key\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState(state => {\r\n var json = data.data;\r\n this.onSearch();\r\n this.setState({ BLK_PER: \"\" });\r\n });\r\n\r\n this.setState({ loading: false, key: [] });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ loading: false });\r\n });\r\n }\r\n )\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n ExportfileToExcel() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ exportloading: true })\r\n let req = JSON.stringify({\r\n \"START_DATE\": this.state.dateRange[0] ? moment(this.state.dateRange[0]).format(\"DD/MM/YYYY\") : null,\r\n \"END_DATE\": this.state.dateRange[1] ? moment(this.state.dateRange[1]).format(\"DD/MM/YYYY\") : null,\r\n \"SEARCH_BLACKLIST\": this.state.name,\r\n \"DEST\": this.state.dest\r\n });\r\n\r\n apiClient.post('api/Blacklist/EXPORT/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setStateByProps(\"active\", \"\");\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = \"Blacklist.xlsx\";\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ exportloading: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ exportloading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n ExportfileToExcelTemplate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ exportloading: true })\r\n\r\n apiClient.get('api/Blacklist/EXPORT_TEMPLATE/'\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = \"Blacklist_Template.xlsx\";\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ exportloading: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ exportloading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n showDrawerUpload() {\r\n this.setState({\r\n visibleUpload: true,\r\n });\r\n\r\n };\r\n\r\n onCloseUpload() {\r\n this.setState({\r\n visibleUpload: false,\r\n });\r\n };\r\n\r\n onUpload(info) {\r\n if (info.file.size <= 1048576) {\r\n const nextState = {};\r\n switch (info.file.status) {\r\n case \"uploading\":\r\n if (getFileExtension(info.file.name) == \"xlsx\" || getFileExtension(info.file.name) == \"xls\") {\r\n nextState.selectedFileList = [info.file];\r\n } else {\r\n this.onCloseUpload();\r\n Modal.error({\r\n title: 'The file format is incorrect.',\r\n className: 'popup-error',\r\n content: (\r\n \r\n
Check and upload the file again.
\r\n
\r\n // Duplicate data or invalid format\r\n //
,\r\n // icon: \r\n
Insert {json.insert} records
\r\n
Update {json.update} records
\r\n
\r\n \r\n \r\n \r\n \r\n { this.handleVisibleChange(false), this.showDrawerUpload() }}>\r\n \r\n \r\n \r\n \r\n );\r\n const routes = [\r\n {\r\n path: '/people/',\r\n breadcrumbName: 'People',\r\n },\r\n {\r\n breadcrumbName: 'Blacklist',\r\n },\r\n ];\r\n var styleinput_name = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_destination = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_date = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n const props = {\r\n showUploadList: {\r\n showDownloadIcon: false,\r\n showRemoveIcon: true,\r\n },\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n
Upload File}\r\n placement={this.state.placementUpload}\r\n height={'auto'}\r\n closable={false}\r\n onClose={this.onCloseUpload}\r\n visible={this.state.visibleUpload}\r\n >\r\n \r\n \r\n \r\n \r\n {loading ? 'UPLOADING' : 'START UPLOAD'}\r\n \r\n File type * xlsx maximum upload file size total 1 MB \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, {Component} from 'react';\r\n\r\nexport default class Communication extends Component {\r\n render() {\r\n return (\r\n \r\n Report Communication\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { Select } from 'antd';\r\n\r\nimport { token } from '../../../config';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class SelectStatusReport extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n list: [\r\n { id: 4, name: \"RECURRING\" },\r\n { id: 0, name: \"PENDING\" },\r\n { id: 1, name: \"IN PROGRESS\" },\r\n { id: 2, name: \"COMPLETED\" },\r\n { id: 5, name: \"EXPIRED\" },\r\n { id: 9, name: \"ERROR\" }],\r\n select: [],\r\n };\r\n\r\n //this.getData = this.getData.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n //this.getData();\r\n }\r\n\r\n //getData() {\r\n // this.state.list.length > 0 ? \"\" : this.setState({ loading: true });\r\n // let req = JSON.stringify({\r\n\r\n // });\r\n // apiClient.post('api/report/Reportstatus', req\r\n // , {\r\n // headers: {\r\n // 'Authorization': `Bearer ${token}`,\r\n // 'Content-type': 'application/json; charset=UTF-8'\r\n // }\r\n // })\r\n // .then(data => {\r\n // var json = data.data;\r\n // this.setState({ list: json });\r\n\r\n // this.setState({ loading: false });\r\n // })\r\n // .catch(error => {\r\n // this.setState({ loading: false });\r\n // });\r\n //}\r\n\r\n render() {\r\n const { loading, list } = this.state;\r\n const { placeholder, select, setStateByProps, style } = this.props;\r\n return (\r\n {item.name} \r\n )\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React,{Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport {\r\n Form,Input,DatePicker,TimePicker,Select,Cascader,InputNumber,Icon,Row,Col,\r\n Button,Tooltip,Checkbox,Spin,PageHeader,Card,Menu,Dropdown,Modal, \r\n} from 'antd';\r\nimport { apiClient } from '../../api';\r\nimport {token,CheckTokenExp} from '../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport SelectReportType from '../../components/Ants/Select/SelectReportType';\r\nimport SelectStatusReport from '../../components/Ants/Select/SelectStatusReport';\r\nimport TableCardReport from '../../components/Ants/Table/TableCardReport';\r\nimport ModalSuccess from '../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../components/Ants/Modal/ModalWarning';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst {Option} = Select;\r\nconst {MonthPicker,RangePicker,WeekPicker} = DatePicker;\r\nconst dateFormat = 'DD/MM/YYYY';\r\n\r\nexport default class ReportNew extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.onDeleteItem = this.onDeleteItem.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.disabledDate = this.disabledDate.bind(this);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n account: [],\r\n users: [],\r\n name: \"\",\r\n startdata: 1,\r\n enddata: 10,\r\n template: 0,\r\n reportType: undefined,\r\n statusReport: undefined,\r\n dateRange: [null,null],\r\n key: [],\r\n search: {\r\n account: [],\r\n name: \"\",\r\n startdata: 1,\r\n enddata: 10,\r\n template: 0,\r\n users: [],\r\n statusReport: \"\",\r\n startdate: \"\",\r\n enddate: \"\",\r\n search:true\r\n },\r\n screenwidth: 0,\r\n width:0,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\",this.updateWindowDimensions.bind(this));\r\n this.onSearch = this.onSearch.bind(this);\r\n this.onSearch();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\",this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({screenwidth: scroll ? e.offsetWidth - 140 : e.offsetWidth - 140})\r\n }\r\n }\r\n },500);\r\n this.setState({width:window.innerWidth});\r\n }\r\n\r\n onSearch() {\r\n let s = this.state.search.search;\r\n this.setState(state => {\r\n return {\r\n search: {\r\n account: state.account,\r\n users: state.users,\r\n name: state.name,\r\n startdata: state.startdata,\r\n enddata: state.enddata,\r\n template: state.reportType ? state.reportType : 0,\r\n statusReport: state.statusReport,\r\n startdate: state.dateRange[0] ? moment(state.dateRange[0],dateFormat).format(dateFormat) : null,\r\n enddate: state.dateRange[1] ? moment(state.dateRange[1],dateFormat).format(dateFormat) : null,\r\n search:!s\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n setStateByProps(parameters,value) {\r\n value ? value : \"\";\r\n this.setState({[parameters]: value});\r\n }\r\n\r\n warningModal(value,message,messageSuccess) {\r\n this.setState({warningModalVisible: value,message,messageSuccess});\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n successModal(value) {\r\n this.onDeleteItem(this.state.key);\r\n this.setState({successModalVisible: value});\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n },1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({successModalVisible: false});\r\n window.location = '/report/';\r\n },secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n onDeleteItem(key) {\r\n if (!CheckTokenExp()) {\r\n this.setState({loading: true});\r\n\r\n let req = JSON.stringify({\r\n key: key\r\n });\r\n\r\n apiClient.post('api/report/delete',req\r\n ,{\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({startdata: 1,enddata: 50});\r\n this.onSearch();\r\n this.setState({loading: false});\r\n })\r\n .catch(error => {\r\n this.setState({loading: false});\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n disabledDate(current) {\r\n return current && current < moment(new Date()).add(-1,'year');\r\n }\r\n\r\n render() {\r\n const {message,messageSuccess,warningModalVisible,successModalVisible,loading,} = this.state;\r\n const {search,account,users,reportType,statusReport,dateRange,key,screenwidth,width} = this.state;\r\n const routes = [\r\n {\r\n path: '/Report/',\r\n breadcrumbName: 'Report',\r\n },\r\n\r\n ];\r\n\r\n var input = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 120\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
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n Name\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Type\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Status\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Date Range\r\n
\r\n
\r\n this.setStateByProps(\"dateRange\",value)}\r\n value={dateRange}\r\n format={dateFormat} />\r\n
\r\n
\r\n
\r\n
\r\n .\r\n
\r\n
\r\n \r\n Search\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
errorModal(false)}\r\n onCancel={() => errorModal(false)}\r\n footer={null}\r\n width={360}\r\n >\r\n \r\n
\r\n\r\n \r\n ERROR. \r\n {messageError} \r\n \r\n
\r\n\r\n\r\n \r\n \r\n\r\n \r\n warningModal(true, message, messageSuccess)}\r\n onCancel={() => warningModal(false, message, messageSuccess)}\r\n width={360}\r\n footer={[\r\n closemodal()}>\r\n Cancel\r\n ,\r\n \r\n successModal()}>\r\n CREAT REPORT\r\n \r\n ]}\r\n >\r\n \r\n
\r\n \r\n {message} \r\n \r\n
\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 { Tag, Tooltip, Card, Skeleton, Modal, Button, Row, Col } from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\nimport ModalWarning_Loginfo from \"../../../components/Ants/Modal/ModalWarning_Loginfo\";\r\nimport { token, capitalizeFLetter, deepEqual, CheckTokenExp } from '../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\n\r\nconst dateTimeFormat = 'DD MMM YYYY, HH:mm:ss';\r\nclass CardLog extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showbottom: false\r\n };\r\n this.geticonstatus = this.geticonstatus.bind(this);\r\n }\r\n\r\n geticonstatus() {\r\n let status = this.props.status_name;\r\n let icon = \"\";\r\n let color = \"\";\r\n switch (status) {\r\n case \"DELIVERED\": color = \"#5bd2a6\"; icon = \"fa fa-check-circle\"; break;\r\n case \"UNDELIVERED\": color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; break;\r\n case \"PENDING\": color = \"#FED531\"; icon = \"fa fa-check-circle\"; break;\r\n case \"COMPLETED\": color = \"#FED531\"; icon = \"fa fa-check-circle\"; break;\r\n case \"EXPIRED\": color = \"#FED531\"; icon = \"fa fa-exclamation-circle\"; break;\r\n case \"REJECTED\": color = \"#d25c5b\"; icon = \"fa fa-times-circle\"; break;\r\n }\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
{(moment(this.props.senddate).format(dateTimeFormat))}
\r\n
{this.props.sender}
\r\n
Account
\r\n
{this.props.acc_name}
\r\n {this.state.showbottom ?
User
:
}\r\n {this.state.showbottom ?
{this.props.username}
:
}\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.donedate && this.props.donedate != \"\" ? (moment(this.props.donedate).format(dateTimeFormat)) : \"-\"}
\r\n
{this.props.mobile}
\r\n
Comunication
\r\n
{this.props.campaign && this.props.campaign != \"\" ? this.props.campaign : \"-\"}
\r\n {this.state.showbottom ?
Message ID
:
}\r\n {this.state.showbottom ?
{this.props.messageid ? this.props.messageid : this.props.smsId}
:
}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.geticonstatus()}\r\n
\r\n
\r\n {this.props.status_name}\r\n
\r\n
Reason: {this.props.status_desc}
\r\n
{this.props.message}
\r\n {this.state.showbottom ?
Number of message: {this.props.credit}
:
}\r\n {this.state.showbottom ?
SMS Type: {this.props.sms_type}
:
}\r\n
\r\n
\r\n
\r\n
\r\n
{ this.setState({ showbottom: !this.state.showbottom }) }}>\r\n
\r\n
\r\n
\r\n\r\n )\r\n }\r\n\r\n}\r\n\r\nclass BTNSort extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n name: \"\",\r\n sortActive: false,\r\n sort: \"\"\r\n };\r\n\r\n }\r\n componentDidMount() {\r\n this.setState({ name: this.props.name });\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.sort !== this.state.sort) {\r\n this.setState({ sort: nextProps.sort });\r\n }\r\n }\r\n render() {\r\n const enable = { color: \"#5F5F61\" };\r\n const disable = { color: \"#b9b9c8\" };\r\n return ( { this.props.onSort({ name: this.state.name, sort: this.state.sort == \"desc\" ? \"asc\" : \"desc\" }) }} >\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 (showing > 0) ? (\r\n
\r\n
\r\n
\r\n
Showing {showing} / {totalpage}
\r\n
\r\n
\r\n
\r\n\r\n )\r\n\r\n :
}\r\n\r\n {\r\n (showing > 0) ?\r\n (\r\n
\r\n
\r\n
\r\n
From\r\n\r\n
\r\n
{ this.onHandleSort(e); }} />\r\n \r\n
\r\n
To
\r\n
{ this.onHandleSort(e); }} />\r\n \r\n
\r\n
\r\n
\r\n )\r\n :
}\r\n {\r\n log.slice(0,showing).map(item => (\r\n
\r\n ))\r\n }\r\n {\r\n loading ?\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 (showing < totalpage && !loading) ?\r\n (
{\r\n let s = showing;\r\n s = s + 50;\r\n this.setState({showing: s})\r\n // this.getData()}\r\n }}>\r\n
\r\n
) : (
)\r\n }\r\n
\r\n\r\n
{ }}\r\n /> \r\n\r\n { this.getData(value) }}\r\n onChange={(value) => setStateByProps(\"campaign\", value)}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.name == null ? \"Unknown\" : item.name} \r\n )\r\n }\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 { Select } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport { token, CheckTokenExp } from '../../../config';\r\nimport ModalServerError from '../Modal/ModalServerError';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class SelectStatus extends Component {\r\n state = {\r\n loading: false,\r\n list: [], // Full list of statuses\r\n selectedStatuses: {}, // Map of status ID to status name\r\n selectedValues: [], // Names of selected statuses\r\n modalVisible: false,\r\n };\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n getData = () => {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n apiClient.get('api/Status', {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n if (data.status === 200 && data.data) {\r\n const statusMap = data.data.reduce((acc, item) => {\r\n acc[item.ID] = item.TEXT;\r\n return acc;\r\n }, {});\r\n this.setState({ list: data.data, selectedStatuses: statusMap });\r\n this.props.setStateByProps(\"statuslist\", data.data);\r\n } else {\r\n this.setState({ modalVisible: true, list: [] });\r\n this.props.setStateByProps(\"statuslist\", []);\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true, list: [], loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n onChange = (value) => {\r\n const { selectedStatuses } = this.state;\r\n // Map selected IDs to names\r\n const selectedStatusNames = value.map(id => selectedStatuses[id] || id); \r\n this.setState({ selectedValues: selectedStatusNames });\r\n this.props.setStateByProps(\"status\", selectedStatusNames); // Send names of selected statuses\r\n };\r\n\r\n // Restore the list with deselected options\r\n getFilteredList = () => {\r\n const { list, selectedValues } = this.state;\r\n\r\n // Filter the list to show only non-selected options\r\n const selectedStatusNames = selectedValues.map(name => {\r\n const id = Object.keys(this.state.selectedStatuses).find(key => this.state.selectedStatuses[key] === name);\r\n return id;\r\n });\r\n\r\n const filteredList = list.filter(item => !selectedStatusNames.includes(item.ID.toString()));\r\n\r\n return filteredList;\r\n };\r\n\r\n render() {\r\n const { loading, selectedValues, modalVisible } = this.state;\r\n const { placeholder, select, mode, disablestatus, selectall, style } = this.props;\r\n\r\n return (\r\n <>\r\n { this.getData(value) }}\r\n onChange={this.onChange}\r\n value={selectedValues} // Set value based on selected values state\r\n suffixIcon={loading ? \"\" : SELECT ALL }\r\n {this.getFilteredList().map((item) => (\r\n {item.TEXT} \r\n ))}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Select } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, CheckTokenExp } from '../../../config';\r\nimport ModalServerError from '../Modal/ModalServerError';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class SelectSMSType extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n list: [],\r\n select: [],\r\n modalVisible: false,\r\n };\r\n\r\n this.getData = this.getData.bind(this);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n getData(value) {\r\n if (!CheckTokenExp()) {\r\n this.state.list.length > 0 ? \"\" : this.setState({ loading: true });\r\n apiClient.get('api/loginfo/SMS_TYPE'\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n if (data.status === 200 && data.data) {\r\n this.setState({ list: data.data });\r\n } else {\r\n this.setState({ modalVisible: true });\r\n this.setState({ list: [] });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ list: [] });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n\r\n render() {\r\n const { loading, list, modalVisible } = this.state;\r\n const { placeholder, select, setStateByProps, style } = this.props;\r\n return (\r\n <>\r\n { this.getData(value) }}\r\n onChange={(value) => setStateByProps(\"smstype\", value)}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.TEXT == null ? \"Unknown\" : item.TEXT} \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, {Component} from \"react\";\r\nimport {\r\n Table,\r\n Divider,\r\n Tag,\r\n Icon,\r\n Button,\r\n Card,\r\n Row,\r\n Col,\r\n Modal,\r\n Spin,\r\n} from \"antd\";\r\n\r\nexport default class ModalWarningIsOk extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {};\r\n }\r\n\r\n render() {\r\n const {\r\n loading,\r\n warningModalVisible,\r\n warningModal,\r\n successModal,\r\n modalcountDown,\r\n message,\r\n messageSuccess,\r\n closemodal,\r\n } = this.props;\r\n return (\r\n \r\n \r\n warningModal(true, message, messageSuccess)}\r\n onCancel={() => warningModal(false, message, messageSuccess)}\r\n width={360}\r\n footer={[\r\n closemodal()}\r\n >\r\n OK\r\n ,\r\n ]}\r\n >\r\n \r\n
\r\n \r\n {message} \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, {Component} from \"react\";\r\nimport {\r\n Form,\r\n Input,\r\n DatePicker,\r\n TimePicker,\r\n Select,\r\n Cascader,\r\n InputNumber,\r\n Icon,\r\n Row,\r\n Col,\r\n Button,\r\n Tooltip,\r\n Checkbox,\r\n Spin,\r\n PageHeader,\r\n Card,\r\n Menu,\r\n Dropdown,\r\n Modal,\r\n} from \"antd\";\r\nimport moment from \"moment\";\r\nimport \"moment-timezone\";\r\nimport TableCardLog from \"../../components/Ants/Table/TableCardLog\";\r\nimport SelectAccount from \"../../components/Ants/Select/SelectAccount\";\r\nimport SelectCampaign from \"../../components/Ants/Select/SelectCampaign\";\r\nimport SelectSender from \"../../components/Ants/Select/SelectSender\";\r\nimport SelectUser from \"../../components/Ants/Select/SelectUser\";\r\nimport SelectStatus from \"../../components/Ants/Select/SelectStatusName\";\r\nimport SelectSMSType from \"../../components/Ants/Select/SelectSMSType\";\r\nimport {getUrlVars, ReplaceUrlTaga} from \"../../config\";\r\nimport ModalWarningIsOk from \"../../components/Ants/Modal/ModalWarningIsOk\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst {MonthPicker, RangePicker, WeekPicker} = DatePicker;\r\nconst dateFormat = \"DD/MM/YYYY\";\r\nconst dateFormatTime = \"DD/MM/YYYY HH:mm\";\r\n\r\nexport default class Log extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.onSearch = this.onSearch.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.disabledDate = this.disabledDate.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.range = this.range.bind(this);\r\n this.closemodal = this.closemodal.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.areDatesEqual = this.areDatesEqual.bind(this);\r\n \r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n startrow: 1,\r\n endrow: 50,\r\n campaign: sessionStorage.getItem(\"campaignName\")\r\n ? [sessionStorage.getItem(\"campaignName\")]\r\n : [],\r\n status: [],\r\n mobile: [],\r\n sender: [],\r\n users: [],\r\n account: [],\r\n dateRange: sessionStorage.getItem(\"startDate\")\r\n ? [\r\n moment(sessionStorage.getItem(\"startDate\")),\r\n moment(sessionStorage.getItem(\"startDate\")).add(48, \"hours\"),\r\n ]\r\n : [moment().subtract(6, \"hours\"), moment()],\r\n smstype: [],\r\n search: {\r\n account: [],\r\n startrow: 1,\r\n endrow: 50,\r\n campaign: getUrlVars()[\"campaignid\"]\r\n ? [parseInt(getUrlVars()[\"campaignid\"])]\r\n : [],\r\n status: [],\r\n mobile: [],\r\n sender: [],\r\n users: [],\r\n smstype: [],\r\n dateRange: [],\r\n },\r\n screenwidth: 0,\r\n screenwidth2: 0,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n ReplaceUrlTaga();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n\r\n if (sessionStorage.getItem(\"campaignId\")) {\r\n this.onSearch();\r\n } else {\r\n sessionStorage.clear();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\r\n \"resize\",\r\n this.updateWindowDimensions.bind(this)\r\n );\r\n sessionStorage.clear();\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({\r\n screenwidth: scroll ? e.offsetWidth - 32 : e.offsetWidth - 32,\r\n });\r\n this.setState({\r\n screenwidth2: scroll ? e.offsetWidth - 462 : e.offsetWidth - 462,\r\n });\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n onSearch() {\r\n let dbeforetwo = new Date(moment().subtract(2, \"days\"));\r\n const hour = dbeforetwo.getHours();\r\n const minute = dbeforetwo.getMinutes();\r\n dbeforetwo = new Date(\r\n dbeforetwo.getFullYear(),\r\n dbeforetwo.getMonth(),\r\n dbeforetwo.getDate(),\r\n hour,\r\n minute,\r\n 0\r\n );\r\n // console.log(\"testt 1\", moment(dbeforetwo).format(\"DD/MM/YYYY HH:mm:ss\"))\r\n // console.log(\"testt 2\", moment(new Date(this.state.dateRange[0])).format(\"DD/MM/YYYY HH:mm:ss\"))\r\n if (new Date(this.state.dateRange[0]).getTime() < dbeforetwo.getTime()) {\r\n console.log(\"testt not search\");\r\n // this.setState({dateRange: []});\r\n this.warningModal(\r\n true,\r\n \"Please select Date Range in 48 hr from now.\"\r\n );\r\n } else {\r\n this.setState((state) => {\r\n return {\r\n search: {\r\n account: state.account,\r\n startrow: state.startrow,\r\n endrow: state.endrow,\r\n campaign: sessionStorage.getItem(\"campaignId\")\r\n ? [sessionStorage.getItem(\"campaignId\")]\r\n : state.campaign,\r\n status: state.status,\r\n mobile: state.mobile,\r\n sender: state.sender,\r\n users: state.users,\r\n smstype: state.smstype,\r\n dateRange: state.dateRange[0]\r\n ? [\r\n moment(state.dateRange[0]).format(dateFormatTime),\r\n moment(state.dateRange[1]).format(dateFormatTime),\r\n ]\r\n : [null, null],\r\n history: this.props.history,\r\n },\r\n };\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({[parameters]: value});\r\n if (parameters == \"campaign\") {\r\n const index = value.indexOf(sessionStorage.getItem(\"campaignName\"));\r\n if (index > -1) {\r\n value.splice(index, 1);\r\n this.setState({[parameters]: value});\r\n this.setState({\r\n dateRange: [moment().subtract(6, \"hours\"), moment().add(24, \"hours\")],\r\n });\r\n }\r\n\r\n sessionStorage.clear();\r\n }\r\n\r\n if (parameters == \"account\") {\r\n this.setState({users: []});\r\n }\r\n }\r\n\r\n disabledDate(current) {\r\n // Can not select days before today and today\r\n return current && current < moment().subtract(3, \"days\");\r\n }\r\n\r\n range(start, end) {\r\n const result = [];\r\n for (let i = start; i < end; i++) {\r\n result.push(i);\r\n }\r\n return result;\r\n }\r\n\r\n warningModal(value, messages) {\r\n this.setState({message: messages});\r\n this.setState({warningModalVisible: value});\r\n }\r\n\r\n closemodal() {\r\n this.setState({warningModalVisible: false});\r\n }\r\n\r\n successModal() {\r\n // this.state.history.push(\"/report/createnew\");\r\n }\r\n\r\n areDatesEqual(date1, date2) {\r\n return (\r\n date1.getFullYear() === date2.getFullYear() &&\r\n date1.getMonth() === date2.getMonth() &&\r\n date1.getDate() === date2.getDate()\r\n );\r\n }\r\n\r\n render() {\r\n const {\r\n account,\r\n campaign,\r\n dateRange,\r\n sender,\r\n users,\r\n status,\r\n mobile,\r\n search,\r\n screenwidth,\r\n screenwidth2,\r\n smstype,\r\n showBox,\r\n loading,\r\n warningModalVisible,\r\n message,\r\n messageSuccess,\r\n } = this.state;\r\n const styleMarginBottom = {marginBottom: 16};\r\n const routes = [\r\n {\r\n path: \"/report/\",\r\n breadcrumbName: \"Report\",\r\n },\r\n {\r\n path: \"/report/logs/\",\r\n breadcrumbName: \"Logs\",\r\n },\r\n ];\r\n var styleinput_account = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n var styleinput_campaign = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n var styleinput_sender = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n var styleinput_date = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n\r\n var styleinput_user = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n var styleinput_status = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n var styleinput_mobile = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 180,\r\n };\r\n\r\n var styleinput_smstype = {\r\n width: \"100%\",\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 100,\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n
\r\n
Campaign
\r\n
\r\n
\r\n
\r\n
\r\n
Mobile
\r\n
\r\n this.setStateByProps(\"mobile\", e)}\r\n placeholder=\"Select a mobile\"\r\n tokenSeparators={[\",\", \" \"]}\r\n open={false}\r\n >\r\n
\r\n
\r\n
\r\n
Sender
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Date Range\r\n * \r\n
\r\n
\r\n {\r\n const date_type = \"day\";\r\n if (!date) {\r\n return false;\r\n }\r\n return moment(date).isBefore(\r\n moment().subtract(2, \"days\"),\r\n date_type\r\n );\r\n }}\r\n disabledTime={(current, type) => {\r\n if (type === \"start\" && current) {\r\n let date1, date2 = new Date(moment().subtract(2, \"days\").format(\"YYYY-MM-DD 00:00:00\"))\r\n if (Array.isArray(current)) {\r\n date1 = new Date(current[0].format(\"YYYY-MM-DD 00:00:00\"))\r\n } else {\r\n date1 = new Date(current.format(\"YYYY-MM-DD 00:00:00\"))\r\n }\r\n // console.log(\"date1\", date1.getTime(), date1)\r\n // console.log(\"date2\", date2.getTime(), date2)\r\n if (date1.getTime() <= date2.getTime()) {\r\n console.log('วันที่ตรงกัน');\r\n let now = new Date();\r\n const hour = now.getHours();\r\n const minute = now.getMinutes();\r\n return {\r\n disabledHours: () => this.range(-1, hour), // ปิดการเลือกชั่วโมง 0-3 และ 23 (เที่ยงคืนถึงตีสาม และ 23:00 น.)\r\n disabledMinutes: () => this.range(-1, minute), // ปิดการเลือกนาทีที่ 15, 30, และ 45\r\n // disabledSeconds: () => this.range(0, second), // ปิดการเลือกวินาทีที่ 10, 20, และ 30\r\n }\r\n }\r\n } else {\r\n return false;\r\n }\r\n }}\r\n onChange={(value) =>\r\n this.setStateByProps(\"dateRange\", value)\r\n }\r\n value={dateRange}\r\n format={dateFormatTime}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n
Account
\r\n
\r\n
\r\n
\r\n
\r\n
User
\r\n
\r\n
\r\n
\r\n
\r\n
Status
\r\n
\r\n
\r\n
\r\n
\r\n
SMS Type
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n Search\r\n \r\n
\r\n
\r\n
{}}\r\n />\r\n {/* {}}\r\n /> */}\r\n \r\n {text}
)\r\n },\r\n {\r\n title: 'Pin Length',\r\n dataIndex: 'pinLength',\r\n key: 'pinLength',\r\n width: 100,\r\n },\r\n {\r\n title: 'Expire Time(Sec.)',\r\n dataIndex: 'expireTime',\r\n key: 'expireTime',\r\n width: 100,\r\n },\r\n {\r\n title: 'Status',\r\n dataIndex: 'status',\r\n key: 'status',\r\n width: 150,\r\n render: (status, text) => (\r\n \r\n {status ? \"Active\" : \"Inactive\"}\r\n \r\n ),\r\n },\r\n {\r\n title: 'Created Date',\r\n dataIndex: 'createDate',\r\n key: 'createDate',\r\n width: 150,\r\n render: text => (moment(text).format(dateFormatDateTime))\r\n },\r\n {\r\n dataIndex: 'APP_ID',\r\n key: 'APP_ID2',\r\n width: 30,\r\n align: 'right',\r\n render: (key, item) => (\r\n \r\n
\r\n \r\n \r\n\r\n {\r\n this.props.warningModal(true, \"Do you want to delete this app OTP?\", \"Deleted app OTP successfully.\");\r\n this.props.setStateByProps(\"action\", \"deletelist\");\r\n this.props.setStateByProps(\"itemOtp\", [{ otcId: item.otcId }]);\r\n }}>\r\n \r\n \r\n } trigger=\"click\">\r\n \r\n
\r\n\r\n
key.otcId}\r\n pagination={{\r\n defaultPageSize: 10,\r\n pageSizeOptions: ['10', '20', '50', '100'],\r\n showSizeChanger: false,\r\n total: totalpage,\r\n showTotal: (total, range) => {range[0]}-{range[1]} of {totalpage} items
,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n onRow={(item, index) => ({\r\n onDoubleClick: () => this.setClickId(item)\r\n })}\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n tableLayout=\"fixed\"\r\n />\r\n { this.getData(value) }}\r\n onChange={(value) => { setStateByProps(\"appotp\", value), this.getDataOTPInfo(value) }}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.otcName} \r\n )\r\n }\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col, Modal, Input } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, CheckTokenExp } from '../../../config';\r\n\r\nimport SelectAppOtp from '../Select/SelectAppOtp';\r\n\r\nconst { TextArea } = Input;\r\nexport default class ModalTestOTP extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n appotp: undefined,\r\n Mobile_format: false,\r\n error_message: \"\",\r\n Prefix: \"\",\r\n\r\n };\r\n this.CleanPhoneNumber = this.CleanPhoneNumber.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ Mobile_format: false });\r\n }\r\n\r\n CleanPhoneNumber(phone) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ Mobile_format: false });\r\n\r\n if (isNaN(phone)) {\r\n this.setState({ Mobile_format: true });\r\n }\r\n else if (phone.length < 10) {\r\n this.setState({ Mobile_format: true });\r\n }\r\n else {\r\n apiClient.get('OTP/CleanPhone/' + phone\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n if (json.phone !== \"\" && json.phone.length === 11) {\r\n this.setState({ Mobile_format: false });\r\n }\r\n else {\r\n this.setState({ Mobile_format: true });\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n render() {\r\n const { loading, visible, warningModal,cancelModal, setStateByProps, appotp, mobile, Prefix, result_message } = this.props;\r\n const { Mobile_format } = this.state;\r\n const styleMarginBottom = { marginBottom: 16 };\r\n const labelvalidate = { color: \"red\", float: 'left' };\r\n const labelError = { textAlign: 'center', fontSize: '30px', marginTop: '-20px', color: \"red\", width: '100%' };\r\n const labelSuccess = { textAlign: 'center', fontSize: '30px', marginTop: '-20px', color: \"green\", width: '100%' };\r\n return (\r\n Test OTP \r\n Please input your mobile number! \r\n :\r\n null\r\n }\r\n {this.state.credit_error === true ?\r\n Credit not enough! \r\n :\r\n\r\n null}\r\n {this.state.error_message ?\r\n {this.state.error_message} \r\n :\r\n null}\r\n\r\n {\r\n result_message ?\r\n {result_message} \r\n :\r\n null\r\n }\r\n\r\n {\r\n warningModal(true, \"Do you want to send this message?\", \"Send message successfully.\"),\r\n setStateByProps(\"action\", \"otpsend\")\r\n\r\n }}>\r\n \r\n \r\n
\r\n ]}\r\n >\r\n \r\n \r\n App OTP Name \r\n * \r\n
\r\n\r\n \r\n Mobile \r\n * \r\n
\r\n\r\n\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col, Modal, Input, Spin } from 'antd';\r\nimport { token } from '../../../config';\r\n\r\nimport SelectAppOtp from '../Select/SelectAppOtp';\r\n\r\nconst { TextArea } = Input;\r\nexport default class ModalVerifyCodeOTP extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n\r\n render() {\r\n const { appotp } = this.state;\r\n const { loading, visible, warningModal, mobile,cancelModal, refcode, handleOk_verifyotp, setStateByProps, result_message, status, verifyotp_close, codeotp, Prefix } = this.props;\r\n const styleMarginBottom = { marginBottom: 8 };\r\n const labelError = { textAlign: 'center', fontSize: '30px', marginTop: '-20px', color: \"red\", width: '100%' };\r\n const labelSuccess = { textAlign: 'center', fontSize: '30px', marginTop: '-20px', color: \"green\", width: '100%' };\r\n return (\r\n Test OTP \r\n \r\n \r\n Moblie : {mobile} \r\n \r\n
\r\n\r\n \r\n Code OTP \r\n * \r\n {Prefix ? {Prefix.length == 0 ? \"\" : Prefix + \" - \"} : null} \r\n Ref Code : {refcode} \r\n \r\n {\r\n result_message ?\r\n {result_message} \r\n :\r\n null\r\n }\r\n
\r\n\r\n \r\n { warningModal(true, \"Do you want to verify OTP?\", \"Verify Success.\"), setStateByProps(\"action\", \"verifyotp\") }}>\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,\r\n Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu, Dropdown, Modal\r\n} from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, CheckTokenExp } from '../../../config';\r\n\r\nimport TableConfigurationOTP from '../../../components/Ants/Table/TableConfigurationOTP';\r\n\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalTestOTP from '../../../components/Ants/Modal/ModalTestOTP';\r\nimport ModalVerifyCodeOTP from '../../../components/Ants/Modal/ModalVerifyCodeOTP';\r\n\r\nexport default class Configuration extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n visible: false,\r\n VerifyCodeOTP_visible: false,\r\n loading: false,\r\n loading_VerifyCodeOTP: false,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n AppName: \"\",\r\n ref_Code: \"\",\r\n currentpage: 1,\r\n pageSize: 10,\r\n itemOtp: [],\r\n search: {\r\n AppName: \"\",\r\n currentpage: 1,\r\n pageSize: 10,\r\n action: \"\"\r\n },\r\n action: \"\",\r\n codeotp: \"\",\r\n code_OTP_validate: false,\r\n result_message: \"\",\r\n status: false,\r\n mobile: \"\",\r\n screenwidth: 0,\r\n Prefix: \"\"\r\n };\r\n\r\n this.showModal = this.showModal.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.handleCancel = this.handleCancel.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.DeleteOtp = this.DeleteOtp.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.handleOk_verifyotp = this.handleOk_verifyotp.bind(this);\r\n this.verifyotp_close = this.verifyotp_close.bind(this);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.onSearch();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 116 : e.offsetWidth - 116 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n showModal() {\r\n this.setState({\r\n visible: true,\r\n });\r\n };\r\n\r\n handleOk(e) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true, codeotp: \"\", result_message: \"\" });\r\n\r\n let req = JSON.stringify({\r\n otcid: this.state.appotp,\r\n mobile: this.state.mobile,\r\n\r\n });\r\n\r\n apiClient.post('OTP/requestOTP', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n var json = data.data;\r\n\r\n // if (json.sms_status == 4) {\r\n // this.setState({ result_message: \"Credit not enough!\" });\r\n // } else if (json.sms_status == 9) {\r\n // this.setState({ result_message: json.status.description });\r\n // } else {\r\n // this.setState({\r\n // ref_Code: json.refCode,\r\n // OTP_ID: json.otpId\r\n // });\r\n\r\n // this.setState({ visible: false, VerifyCodeOTP_visible: true });\r\n // this.setState({ appotp: undefined, codeotp: \"\", result_message: \"\" });\r\n // }\r\n\r\n if(json.success.message === \"Success\") {\r\n this.setState({\r\n ref_Code: json.referenceCode,\r\n OTP_ID: json.otpId,\r\n Prefix: json.prefix\r\n });\r\n\r\n this.setState({ visible: false, VerifyCodeOTP_visible: true });\r\n this.setState({ appotp: undefined, codeotp: \"\", result_message: \"\" });\r\n } else {\r\n this.setState({ result_message: json.success.message });\r\n }\r\n\r\n //this.showModal();\r\n //this.setState({ loading_VerifyCodeOTP: false });\r\n this.setState({ loading: false });\r\n //this.setState({ visible: false, });\r\n })\r\n .catch(error => {\r\n\r\n Modal.error({\r\n title: \"Error\",\r\n className: 'popup-error',\r\n onOk() { },\r\n });\r\n\r\n this.setState({ loading: false });\r\n this.setState({ visible: false, });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n };\r\n\r\n handleCancel(e) {\r\n this.setState({\r\n visible: false,\r\n });\r\n };\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"deletelist\") {\r\n this.DeleteOtp();\r\n\r\n }\r\n if (this.state.action == \"otpsend\") {\r\n value = false;\r\n this.handleOk();\r\n\r\n\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"verifyotp\") {\r\n value = false;\r\n this.handleOk_verifyotp();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n this.setState(state => {\r\n if (state.successModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n AppName: state.AppName,\r\n currentpage: state.currentpage,\r\n pageSize: state.pageSize,\r\n action: state.action\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n DeleteOtp() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n otcId: this.state.itemOtp.map(m => m.otcId)\r\n });\r\n\r\n apiClient.post('OTP/Delete', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.onSearch();\r\n this.setState({ loading: false });\r\n this.setState({ action: \"\" });\r\n })\r\n .catch(error => {\r\n this.setState({ action: \"\" });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n\r\n handleOk_verifyotp() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading_VerifyCodeOTP: true });\r\n\r\n if (!this.state.codeotp) {\r\n this.setState({ code_OTP_validate: true })\r\n this.setState({ loading_VerifyCodeOTP: false });\r\n return false;\r\n }\r\n\r\n let req = JSON.stringify({\r\n otpid: this.state.OTP_ID,\r\n otpcode: this.state.codeotp,\r\n });\r\n\r\n apiClient.post('OTP/verifyOTP', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n let result = \"Success\";\r\n\r\n // if (json.error) {\r\n // result = json.error.message;\r\n // } else {\r\n // result = json.isexprcode ? \"OTP Code Expired\" : json.iserrcnt ? \"Over Limit Usage\" : json.result ? \"Success\" : \"Verify Fail\";\r\n // }\r\n result = json.isExprCode ? \"OTP Code Expired\" : json.isErrorCount ? \"Over Limit Usage\" : json.result ? \"Success\" : \"Verify Fail\";\r\n\r\n this.setState({ result_message: result, status: json.result, max_use: (parseInt(this.state.max_use) + 1) });\r\n\r\n this.setState({ loading_VerifyCodeOTP: false });\r\n })\r\n .catch(error => {\r\n\r\n this.setState({ loading_VerifyCodeOTP: false });\r\n //this.setState({ VerifyCodeOTP_visible: false, });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n verifyotp_close() {\r\n this.setState({ VerifyCodeOTP_visible: false, otpid: \"\", otpcode: \"\", mobile: \"\", OTP_ID: \"\", appotp: undefined, codeotp: \"\", ref_Code: \"\", result_message: \"\" });\r\n }\r\n\r\n\r\n\r\n render() {\r\n const { visible, VerifyCodeOTP_visible, loading, loading_VerifyCodeOTP, message, messageSuccess, warningModalVisible,\r\n successModalVisible, search, mobile, appotp, itemOtp, ref_Code, screenwidth, result_message, status, codeotp, Prefix } = this.state;\r\n const routes = [\r\n {\r\n path: '/otp/configuration/',\r\n breadcrumbName: 'OTP',\r\n },\r\n ];\r\n var styleinput_name = {\r\n width: screenwidth,\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n return (\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n
\r\n \r\n 0 ? false : true}\r\n onClick={() => { \r\n this.setState({ action: \"deletelist\" }), \r\n this.warningModal(true, \"Do you want to delete this app OTP?\", \"Deleted app OTP successfully.\")\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 Search\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
4 digit \r\n 5 digit \r\n 6 digit \r\n 7 digit \r\n 8 digit \r\n 9 digit \r\n 10 digit \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,\r\n Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu, Dropdown, Modal, Switch\r\n} from 'antd';\r\nimport { token, CheckTokenExp,ReplaceUrlTaga } from '../../../../config';\r\nimport { apiClient } from '../../../../api';\r\nimport{root} from '../../../../config';\r\nimport SelectSender from '../../../../components/Ants/Select/SelectSender';\r\nimport SelectPinLenght from '../../../../components/Ants/Select/SelectPinLenght';\r\nimport ModalSuccess from '../../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../../components/Ants/Modal/ModalWarning';\r\nimport ModalServerError from '../../../../components/Ants/Modal/ModalServerError';\r\n\r\nimport MultipleTrigger from '../../../../components/Ants/Mentions/MultipleTrigger';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class OtpAdd extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n indexcontent: 0,\r\n contentlength: 0,\r\n content: \"\",\r\n content_old: \"\",\r\n MessageCount: 1,\r\n CharacterCount: 160,\r\n variable: [],\r\n variabledef: [\"firstName\", \"lastName\", \"address\",\r\n \"city\", \"country\", \"gender\", \"birthDate\"],\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n id: undefined,\r\n APP_ID: undefined,\r\n APP_GUID: undefined,\r\n APPNAME: undefined,\r\n STATUS: true,\r\n sender: undefined,\r\n Prefix: \"\",\r\n pin_length: undefined,\r\n Expire: undefined,\r\n otp_max: undefined,\r\n action: \"\",\r\n error_message: \"\",\r\n notifyUrl: \"\",\r\n notifyType: \"application/json\",\r\n callBack: \"\",\r\n modalVisible: false,\r\n };\r\n\r\n this.indexcontent = this.indexcontent.bind(this);\r\n this.countMessage = this.countMessage.bind(this);\r\n this.getData = this.getData.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.saveData = this.saveData.bind(this);\r\n this.IsMatchingCode = this.IsMatchingCode.bind(this);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n var params = {};\r\n if (this.props.location.search) {\r\n var parts = this.props.location.search.substring(1).split('&');\r\n for (var i = 0; i < parts.length; i++) {\r\n var nv = parts[i].split('=');\r\n if (!nv[0]) continue;\r\n params[nv[0]] = nv[1] || true;\r\n }\r\n this.setState({ id: params.id });\r\n params.id ? this.getData(params.id) : null;\r\n \r\n }\r\n ReplaceUrlTaga();\r\n }\r\n\r\n indexcontent(e) {\r\n var start = this.state.content.substring(0, e.target.selectionEnd);\r\n var c = (start.split(\"{\").length - 1) * 2;\r\n this.setState({ indexcontent: e.target.selectionEnd + c });\r\n }\r\n\r\n countMessage(content) {\r\n content = content ? content : \"\";\r\n\r\n var countCodeOTP = (content.match(/{Code OTP}/g) || []).length;\r\n var countRefOTP = (content.match(/Ref Code}/g) || []).length;\r\n\r\n if (countCodeOTP > 1) {\r\n return false;\r\n }\r\n\r\n if (countRefOTP > 1) {\r\n return false;\r\n }\r\n\r\n //1 Message / Used with 5 remaining 165\r\n this.setState(state => {\r\n var contentlength = content == undefined ? 0 : content.length;\r\n var addParameter = (((state.Prefix ? state.Prefix.length : 0)) + (state.pin_length ? state.pin_length : 0));\r\n var code_otp = \"{Code OTP}\";\r\n var ref_code = \"{Ref Code}\";\r\n var check_otp = content.search(code_otp);\r\n var check_ref = content.search(ref_code);\r\n //contentlength = (contentlength + addParameter) - (check_otp == -1 ? 0 : code_otp.length) - (check_ref == -1 ? 0 : 5);\r\n contentlength = (contentlength + (check_otp === -1 ? 0 : addParameter)) - (check_otp == -1 ? 0 : code_otp.length) - (check_ref == -1 ? 0 : 1);\r\n var msgCount = 0;\r\n var messremaining = 160;\r\n if (contentlength) {\r\n if (!content.match(/^([a-zA-Z0-9\\|!#$%&/()*^=?»«@£§€{}.-;'\"<>_[\\]\\\\,\\-\\+ \\n\\r])+$/i)) {\r\n msgCount = contentlength <= 70 ? 1 : contentlength <= 134 ? 2 : parseInt(Math.ceil(parseFloat(contentlength) / 67));\r\n messremaining = contentlength <= 70 ? 70 - contentlength : contentlength <= 134 ? 134 - contentlength : (134 + (67 * (msgCount - 2))) - contentlength;\r\n } else {\r\n msgCount = contentlength <= 160 ? 1 : contentlength <= 306 ? 2 : parseInt(Math.ceil(parseFloat(contentlength) / 153));\r\n messremaining = contentlength <= 160 ? 160 - contentlength : contentlength <= 306 ? 306 - contentlength : (306 + (153 * (msgCount - 2))) - contentlength;\r\n }\r\n }\r\n\r\n this.setState({\r\n content: content,\r\n content_require: false,\r\n });\r\n this.setState({ MessageCount: msgCount });\r\n this.setState({ contentlength: contentlength });\r\n this.setState({ CharacterCount: messremaining });\r\n });\r\n }\r\n\r\n getData(value) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n apiClient.get(\"OTP/INFO/\" + value,\r\n {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data.data;\r\n this.setState({\r\n APP_ID: json.otcId,//\"json.ID\"\r\n APP_GUID: json.otcId,\r\n APPNAME: json.otcName,\r\n STATUS: json.status,\r\n sender: json.sender,\r\n Prefix: json.prefix,\r\n pin_length: json.pinLength,\r\n Expire: json.expireTime,\r\n otp_max: json.maxFail,\r\n content: json.content,\r\n notifyUrl: json.notifyURL,\r\n notifyType: json.notifyType ? json.notifyType : undefined,\r\n callBack: json.callbackData,\r\n });\r\n\r\n this.countMessage(json.content);\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n saveData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n // let req = JSON.stringify({\r\n // ID: this.state.APP_ID,\r\n // NAME: this.state.APPNAME,\r\n // STATUS: this.state.STATUS,\r\n // SENDER: this.state.sender,\r\n // PREFIX: this.state.Prefix,\r\n // PIN_LENGTH: this.state.pin_length,\r\n // EXPIRE_DATE: this.state.Expire,\r\n // OTP_MAX: this.state.otp_max,\r\n // CONTENT: this.state.content,\r\n // NOTIFY_URL: this.state.notifyUrl,\r\n // NOTIFY_TYPE: this.state.notifyType,\r\n // CALLBACK: this.state.callBack,\r\n // });\r\n\r\n let req = JSON.stringify({\r\n id: this.state.APP_ID,\r\n name: this.state.APPNAME,\r\n status: this.state.STATUS,\r\n sender: this.state.sender,\r\n prefix: this.state.Prefix,\r\n pinLength: this.state.pin_length,\r\n expireTime: this.state.Expire,\r\n maxFail: this.state.otp_max,\r\n content: this.state.content,\r\n notifyUrl: this.state.notifyUrl,\r\n notifyType: this.state.notifyType,\r\n callback: this.state.callBack,\r\n });\r\n\r\n apiClient.post(\"OTP/Save\", req,\r\n {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n if(json.message === \"Success\") {\r\n this.setState({ successModalVisible: true });\r\n this.modalcountDown();\r\n } else {\r\n this.setState({ error_message: json });\r\n Modal.error({\r\n title: json,\r\n className: 'popup-error',\r\n onOk() { },\r\n });\r\n }\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n var resp_error = error.response.data;\r\n this.setState({ error_message: resp_error });\r\n\r\n Modal.error({\r\n title: resp_error,\r\n className: 'popup-error',\r\n onOk() { },\r\n });\r\n\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n if (parameters == \"Prefix\") {\r\n if (this.IsMatchingCode(value)) {\r\n this.setState({ [parameters]: value });\r\n this.countMessage(this.state.content);\r\n }\r\n }\r\n else {\r\n this.setState({ [parameters]: value });\r\n }\r\n }\r\n\r\n IsMatchingCode(str) {\r\n var result = true;\r\n if (str.length <= 3) {\r\n var rex = /^[a-zA-Z0-9]*$/g.test(str);\r\n result = rex ? true : false;\r\n return result;\r\n }\r\n else {\r\n return false;\r\n }\r\n\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"save\") {\r\n this.saveData();\r\n this.setState({ action: \"\" });\r\n value = false;\r\n }\r\n\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\" });\r\n this.props.history.push('/otp/configuration/');\r\n value = false;\r\n\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n this.setState(state => {\r\n if (state.successModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n this.props.history.push('/otp/configuration/');\r\n }, secondsToGo * 1000);\r\n }\r\n this.setState({ error_message: \"\" });\r\n });\r\n }\r\n\r\n render() {\r\n const { loading, warningModalVisible, message, messageSuccess, successModalVisible, modalVisible } = this.state;\r\n const { APP_ID, APP_GUID, APPNAME, STATUS, sender, Prefix, pin_length, Expire, otp_max, content,\r\n error_message, notifyUrl, notifyType, callBack } = this.state;\r\n const styleMarginBottom = { marginBottom: 16 };\r\n const routes = [\r\n {\r\n path: '/otp/configuration/',\r\n breadcrumbName: 'OTP',\r\n },\r\n {\r\n breadcrumbName: 'Configuration',\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 App OTP Name \r\n * \r\n {error_message} \r\n Sender\r\n \r\n * \r\n
\r\n\r\n \r\n Pin Length\r\n \r\n * \r\n Prefix \r\n
\r\n\r\n\r\n \r\n Expire Duration\r\n \r\n * \r\n this.setStateByProps(\"Expire\", e)} />\r\n \r\n Maximum number of fail\r\n \r\n * \r\n\r\n this.setStateByProps(\"otp_max\", e)} />\r\n \r\n
\r\n\r\n \r\n Notify Url\r\n \r\n Notify Type\r\n \r\n\r\n { this.setStateByProps(\"notifyType\", value) }}\r\n value={notifyType}\r\n placeholder=\"Select notify Type\"\r\n filterOption={(input, option) =>\r\n option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\r\n }\r\n >\r\n application/json \r\n application/xml \r\n \r\n \r\n Callback Data\r\n \r\n
\r\n\r\n \r\n Content \r\n * \r\n Require Code OTP \r\n \r\n {this.state.MessageCount} {this.state.MessageCount > 1 ? \"Credits\" : \"Credit\"}, {this.state.contentlength}/{this.state.CharacterCount} characters \r\n
\r\n\r\n {\r\n this.setState({\r\n content_old: contents,\r\n indexcontent: this.state.indexcontent + 1\r\n }), this.countMessage(contents)\r\n }} />\r\n \r\n \r\n \r\n\r\n \r\n\r\n {\r\n\r\n var start = this.state.content.substring(0, this.state.indexcontent);\r\n var end = this.state.content.substring(this.state.indexcontent);\r\n\r\n let content = this.state.content;\r\n\r\n content.includes(\"{Code OTP}\") ? null :\r\n this.setState({ [\"content\"]: start + \"{Code OTP}\" + end, indexcontent: content.length + 11 }, function () { this.countMessage(this.state.content) }.bind(this));\r\n\r\n\r\n }}>\r\n \r\n \r\n {\r\n\r\n var start = this.state.content.substring(0, this.state.indexcontent);\r\n var end = this.state.content.substring(this.state.indexcontent);\r\n\r\n let content = this.state.content;\r\n\r\n content.includes(\"{Ref Code}\") ? null :\r\n this.setState({ [\"content\"]: start + \"{Ref Code}\" + end, indexcontent: content.length + 11 }, function () { this.countMessage(this.state.content) }.bind(this));\r\n\r\n\r\n }}>\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n\r\n \r\n Active OTP \r\n this.setStateByProps(\"STATUS\", e)} />\r\n \r\n { this.warningModal(true, \"Do you want to discard change?\", \"Discarded change successfully.\"), this.setState({ action: \"discard\" }) }}>\r\n \r\n { this.warningModal(true, \"Do you want to save this app OTP?\", \"Saved app OTP successfully.\"), this.setState({ action: \"save\" }) }}>\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 `${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,\r\n Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu, Dropdown, Modal, Switch\r\n} from 'antd';\r\n\r\nimport TableOTPLog from '../../../components/Ants/Table/TableOTPLog';\r\n\r\nexport default class OtpLog extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n APPNAME: \"\",\r\n OTPID: \"\",\r\n Mobile: [],\r\n Ref_Code: \"\",\r\n search: {\r\n APPNAME: \"\",\r\n OTPID: \"\",\r\n Mobile: [],\r\n Ref_Code: \"\"\r\n },\r\n };\r\n\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n\r\n }\r\n componentDidMount() {\r\n\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n APPNAME: state.APPNAME,\r\n OTPID: state.OTPID,\r\n Mobile: state.Mobile,\r\n Ref_Code: state.Ref_Code\r\n }\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const { search } = 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 { Link } from \"react-router-dom\";\r\nimport {\r\n Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,\r\n Icon, Row, Col, Button, Tooltip, Checkbox, Spin, PageHeader, Card, Menu, Dropdown, Modal, Switch\r\n} from 'antd';\r\nimport { apiClient } from '../../../../api';\r\nimport{root} from '../../../../config';\r\nimport { token, CheckTokenExp } from '../../../../config';\r\n\r\nimport SelectSender from '../../../../components/Ants/Select/SelectSender';\r\nimport SelectPinLenght from '../../../../components/Ants/Select/SelectPinLenght';\r\n\r\nexport default class Detail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n APP_ID: \"\",\r\n APP_NAME: \"\",\r\n Sender: \"\",\r\n Prefix: \"\",\r\n ExpireSec: \"\",\r\n Pin_length: \"\",\r\n OTP_ID: \"\",\r\n Ref_code: \"\",\r\n Code: \"\",\r\n Mobile: \"\",\r\n Send_Msg: \"\",\r\n CreateDate: \"\",\r\n UpdateDate: \"\",\r\n ExpireDate: \"\",\r\n };\r\n\r\n this.getData = this.getData.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n var params = {};\r\n if (this.props.location.search) {\r\n var parts = this.props.location.search.substring(1).split('&');\r\n for (var i = 0; i < parts.length; i++) {\r\n var nv = parts[i].split('=');\r\n if (!nv[0]) continue;\r\n params[nv[0]] = nv[1] || true;\r\n }\r\n this.getData(params.id);\r\n }\r\n }\r\n\r\n getData(value) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n OTP_ID: value\r\n });\r\n\r\n apiClient.post('OTP/TEST/INFO', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({\r\n APP_ID: json.APP_ID,\r\n APP_NAME: json.APP_NAME,\r\n Sender: json.Sender,\r\n Prefix: json.Prefix,\r\n ExpireSec: json.ExpireSec,\r\n Pin_length: json.Pin_length,\r\n OTP_ID: json.OTP_ID,\r\n Ref_code: json.Ref_code,\r\n Code: json.Code,\r\n Mobile: json.Mobile,\r\n Send_Msg: json.Send_Msg,\r\n CreateDate: json.CreateDate,\r\n UpdateDate: json.UpdateDate,\r\n ExpireDate: json.ExpireDate\r\n });\r\n\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n APP_ID: \"\",\r\n APP_NAME: \"\",\r\n Sender: \"\",\r\n Prefix: \"\",\r\n ExpireSec: \"\",\r\n Pin_length: \"\",\r\n OTP_ID: \"\",\r\n Ref_code: \"\",\r\n Code: \"\",\r\n Mobile: \"\",\r\n Send_Msg: \"\",\r\n CreateDate: \"\",\r\n UpdateDate: \"\",\r\n ExpireDate: \"\"\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n render() {\r\n\r\n const { APP_ID, APP_NAME, Sender, Prefix, ExpireSec, Pin_length, OTP_ID, Ref_code,\r\n Code, Mobile, Send_Msg, CreateDate, UpdateDate, ExpireDate } = this.state;\r\n\r\n const styleMarginBottom = { marginBottom: 16 };\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col } from 'antd';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateTimeFormat = 'DD/MM/YYYY HH:mm';\r\n\r\nexport default class CardIssueReport extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n }\r\n\r\n\r\n render() {\r\n const { subject, date1, message, date2, support, loading } = this.props;\r\n const styleMarginBottom = { marginBottom: 16 };\r\n return (\r\n \r\n\r\n \r\n \r\n Subject : \r\n \r\n {subject}\r\n \r\n {date1 ? moment(date1).format(dateTimeFormat) : \"\"} \r\n \r\n
\r\n\r\n \r\n Message : \r\n \r\n {message}\r\n \r\n
\r\n\r\n \r\n Support : \r\n \r\n {support}\r\n \r\n {date2 ? moment(date2).format(dateTimeFormat) : \"\"} \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Modal, Input } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport { token, deepEqual, CheckTokenExp } from '../../../config';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { TextArea } = Input;\r\nconst dateFormatDateTime = 'DD/MM/YYYY HH:mm';\r\n\r\nexport default class TableContactUs extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n {\r\n title: 'Subject',\r\n dataIndex: 'subject',\r\n key: 'subject',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Message',\r\n dataIndex: 'question',\r\n key: 'question',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'date_question',\r\n key: 'date_question',\r\n width: 150,\r\n render: text => (moment(text).format(dateFormatDateTime))\r\n },\r\n {\r\n title: 'Reply',\r\n dataIndex: 'answer',\r\n key: 'answer',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Reply Date',\r\n dataIndex: 'date_answer',\r\n key: 'date_answer',\r\n width: 150,\r\n render: text => (text ? moment(text).format(dateFormatDateTime) : \"\")\r\n },\r\n {\r\n title: 'File',\r\n dataIndex: 'image',\r\n key: 'image',\r\n width: 80,\r\n render: (text, item) => (\r\n text ? this.downloadFile(text)}>Download : \"\"\r\n )\r\n },\r\n ],\r\n data: [],\r\n minpage: 1,\r\n pagesize: 10,\r\n totalpage: 0,\r\n currentpage: 1,\r\n };\r\n\r\n this.onChangePage = this.onChangePage.bind(this);\r\n this.getData = this.getData.bind(this);\r\n this.downloadFile = this.downloadFile.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n\r\n\r\n\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (!deepEqual(this.props.search, prevProps.search)) {\r\n this.getData();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n const { search } = this.props;\r\n\r\n this.setState({ loading: true });\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n search: search.value,\r\n startdata: state.minpage,\r\n enddata: state.pagesize,\r\n });\r\n\r\n apiClient.post('api/issuereport/get', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setStateByProps();\r\n\r\n this.setState(state => {\r\n return {\r\n data: json.data,\r\n totalpage: json.totalpage,\r\n currentpage: state.minpage == 1 ? 1 : state.currentpage,\r\n minpage: 1\r\n };\r\n });\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n data: [],\r\n totalpage: 0,\r\n currentpage: 1,\r\n minpage: 1\r\n });\r\n this.setState({ loading: false });\r\n });\r\n })\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n setStateByProps() {\r\n this.props.setStateByProps(\"saveData\", \"\");\r\n }\r\n\r\n onChangePage(currentPage, pageSize) {\r\n var maxpage = currentPage * pageSize;\r\n var minpage = maxpage - pageSize + 1;\r\n\r\n this.setState(state => {\r\n return {\r\n loading: true,\r\n currentpage: state.pagesize == pageSize === 10 ? 1 : currentPage,\r\n pagesize: maxpage,\r\n minpage: minpage,\r\n };\r\n });\r\n this.getData(); \r\n\r\n }\r\n\r\n downloadFile(item, name) {\r\n if (!CheckTokenExp()) {\r\n apiClient.get('api/file/getFilename/' + item\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n })\r\n .then(data => {\r\n var filename = data.data;\r\n\r\n apiClient.get('api/file/download/' + item\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob'\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = filename;\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n })\r\n .catch(error => {\r\n\r\n });\r\n })\r\n .catch(error => {\r\n\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n render() {\r\n const { columns, loading, data, totalpage } = this.state;\r\n const { setStateByProps } = this.props;\r\n return (\r\n \r\n\r\n
{range[0]}-{range[1]} of {totalpage} items
,\r\n onShowSizeChange: (currentPage, pageSize) => this.onChangePage(currentPage, pageSize),\r\n onChange: (currentPage, pageSize) => this.onChangePage(currentPage, pageSize)\r\n }}\r\n rowKey=\"id\"\r\n style={{ cursor: 'pointer' }}\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n tableLayout=\"fixed\"\r\n />\r\n\r\n\r\n\r\n\r\n \r\n {\r\n this.state.loading ?\r\n
\r\n );\r\n\r\n const { imageUrl } = this.state;\r\n const styleMarginBottom = { marginBottom: 16 };\r\n const routes = [\r\n {\r\n path: '/contactus',\r\n breadcrumbName: 'Contact Us',\r\n },\r\n ];\r\n\r\n const props = {\r\n name: \"avatar\",\r\n beforeUpload: this.beforeUpload,\r\n fileList: this.state.fileList,\r\n onRemove: this.onRemove,\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
Contact Us \r\n \r\n { this.setState({ action: \"discard\" }), this.warningModal(true, \"Do you want to cancel change?\", \"\") }}>\r\n \r\n { this.setState({ action: \"save\" }), this.warningModal(true, \"Do you want to send this contect?\", \"Send contect successfully.\") }}>\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n ]}\r\n >\r\n \r\n \r\n this.setStateByProps(\"subject\", e)} value={subject}>\r\n Report system usage problems \r\n Buy credits \r\n Other \r\n \r\n \r\n
\r\n\r\n \r\n this.setStateByProps(\"textmessage\", e.target.value)}\r\n placeholder=\"Fill out additional information / choose a package\"\r\n autoSize={{ minRows: 5, maxRows: 10 }}\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 0 ? 'pointer' : 'context-menu' : 'context-menu'\r\n }}>\r\n {\r\n text == \"Unique\" ? :\r\n text == \"Duplicate\" ? :\r\n text == \"Blacklist\" ? :\r\n text == \"Invalid\" ? :\r\n \"\"\r\n\r\n }{\" \"}\r\n {text}\r\n
\r\n },\r\n {\r\n title: 'Recipients',\r\n dataIndex: 'recipients',\r\n key: 'recipients',\r\n render: (text, item) =>\r\n 0 ? 'pointer' : 'context-menu' : 'context-menu' }}\r\n\r\n >\r\n {\r\n item.status == \"Unique\" ? {formatNumber(text)} :\r\n item.status == \"Duplicate\" ? text == 0 ? formatNumber(text) : {formatNumber(text)} :\r\n item.status == \"Blacklist\" ? text == 0 ? formatNumber(text) : {formatNumber(text)} :\r\n item.status == \"Invalid\" ? text == 0 ? formatNumber(text) : {formatNumber(text)} :\r\n \"\"\r\n }\r\n
\r\n },\r\n ],\r\n };\r\n\r\n }\r\n\r\n downloadFile(id, status) {\r\n if (!CheckTokenExp()) {\r\n let req = JSON.stringify({\r\n id: id,\r\n status: status\r\n });\r\n\r\n apiClient\r\n .post('api/file/recipients/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n },\r\n responseType: 'blob',\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = \"campaign_\" + id + \"_\" + status + \"_\" + moment().format(dateTimeFormat) + \".xlsx\";\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n render() {\r\n const { columns, loading } = this.state;\r\n const { data } = this.props;\r\n return (\r\n \r\n
\r\n \r\n item.status != 'Unique' ? item.recipients > 0 ? 'hoverno' : '' : ''\r\n }\r\n showHeader={false}\r\n onRow={(record, rowIndex) => {\r\n return {\r\n onClick: (item) => { record.recipients > 0 ? record.status == 'Unique' ? null : this.downloadFile(record.id, record.status) : null }\r\n };\r\n }}\r\n />\r\n \r\n
\r\n \r\n\r\n
errorWarningModal(false)}\r\n onCancel={() => errorWarningModal(false)}\r\n footer={null}\r\n width={360}\r\n >\r\n \r\n
\r\n\r\n \r\n ERROR. \r\n {messageError} \r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n\r\n inputModal(true, message, messageSuccess)}\r\n onCancel={() => inputModal(false, message, messageSuccess)}\r\n width={450}\r\n footer={[\r\n inputModal(false, message, messageSuccess)}>\r\n CANCEL\r\n ,\r\n { inputModal(false, message, messageSuccess); successModal(true); modalcountDown(); }}>\r\n SAVE\r\n \r\n ]}\r\n >\r\n \n {message} \r\n \r\n
\r\n\r\n \n
\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 { Table, Divider, Tag, Icon, Button, Card, Row, Col, Modal, Input } from 'antd';\r\nimport { Link } from \"react-router-dom\";\r\n\r\nexport default class ModalCreateReport extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n }\r\n\r\n\r\n render() {\r\n const { loading, inputModalVisible, inputModal, successModal, modalcountDown, message, messageSuccess, createreport } = this.props;\r\n //const { cancelModalVisible } = this.state;\r\n\r\n return (\r\n \r\n \r\n\r\n inputModal(true, message, messageSuccess)}\r\n onCancel={() => inputModal(false, message, messageSuccess)}\r\n width={550}\r\n footer={[\r\n inputModal(false, message, messageSuccess)}>\r\n CANCEL\r\n ,\r\n { inputModal(false, message, messageSuccess); createreport(); }}>\r\n CREATE\r\n \r\n ]}\r\n >\r\n \r\n {message} \r\n It takes a few minutes to create a report. If you want to get a custom report or see all existing ones, visit the \r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from \"react\";\r\nimport {\r\n PageHeader,\r\n Button,\r\n Descriptions,\r\n Select,\r\n Row,\r\n Col,\r\n DatePicker,\r\n Icon,\r\n Form,\r\n Input,\r\n Card,\r\n Tooltip,\r\n Progress,\r\n Table,\r\n Divider,\r\n Tag,\r\n Modal,\r\n Upload,\r\n Drawer,\r\n Spin,\r\n Collapse,\r\n Breadcrumb,\r\n} from \"antd\";\r\nimport moment from \"moment\";\r\nimport \"moment-timezone\";\r\nimport NumericLabel from \"react-pretty-numbers\";\r\nimport {\r\n token,\r\n getUrlVars,\r\n formatNumber,\r\n CheckTokenExp,\r\n} from \"../../../config\";\r\nimport Card2_Extra from \"../../../components/Ants/Card/Card2_Extra\";\r\nimport TableRecipients from \"../../../components/Ants/Table/TableRecipients\";\r\nimport { MentionsInput, Mention } from \"react-mentions\";\r\nimport MentionStyle_preview from \"../../../components/Ants/Mentions/Style/MentionStyle_preview\";\r\nimport ModalSuccess from \"../../../components/Ants/Modal/ModalSuccess\";\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\nimport ModalErrorWarning from \"../../../components/Ants/Modal/ModalErrorWaring\";\r\nimport ModalWarning from \"../../../components/Ants/Modal/ModalWarning\";\r\nimport ModalInput from \"../../../components/Ants/Modal/ModalInput\";\r\nimport ModalCreateReport from \"../../../components/Ants/Modal/ModalCreateReport\";\r\nimport TableCredit from \"../../../components/Ants/Table/TableCredit\";\r\nimport TableAnalyze from \"../../../components/Ants/Table/TableAnalyze\";\r\nimport {\r\n textforceStop,\r\n textResend,\r\n} from \"../../../components/Ants/TooltipText/Text\";\r\nimport { apiClient } from \"../../../api\";\r\nimport { root } from \"../../../config\";\r\nimport ModalServerError from \"../../../components/Ants/Modal/ModalServerError\";\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { Panel } = Collapse;\r\nconst { Option } = Select;\r\nconst { MonthPicker, RangePicker, WeekPicker } = DatePicker;\r\nconst { confirm } = Modal;\r\nconst dateFormat = \"DD/MM/YYYY\";\r\nconst { Search } = Input;\r\n\r\nexport default class Detail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.onClickPreview = this.onClickPreview.bind(this);\r\n this.warningModal = this.warningModal.bind(this);\r\n this.inputModal = this.inputModal.bind(this);\r\n this.createReportModal = this.createReportModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.downloadFile = this.downloadFile.bind(this);\r\n this.confirmDownloadFile = this.confirmDownloadFile.bind(this);\r\n\r\n this.getFileCampaign = this.getFileCampaign.bind(this);\r\n this.getStatusCampaign = this.getStatusCampaign.bind(this);\r\n this.statusCampaignByid = this.statusCampaignByid.bind(this);\r\n this.ResendFail = this.ResendFail.bind(this);\r\n this.AnalyzeFunc = this.AnalyzeFunc.bind(this);\r\n this.analyze_onClose = this.analyze_onClose.bind(this);\r\n this.analyze_showDrawer = this.analyze_showDrawer.bind(this);\r\n this.CancelCampaign = this.CancelCampaign.bind(this);\r\n this.createreport = this.createreport.bind(this);\r\n this.handleDuplicate = this.handleDuplicate.bind(this);\r\n this.handleCreateTaemplate = this.handleCreateTaemplate.bind(this);\r\n this.getData = this.getData.bind(this);\r\n this.getCampaignDetail = this.getCampaignDetail.bind(this);\r\n\r\n this.statusCampaignColor = this.statusCampaignColor.bind(this);\r\n this.errorModal = this.errorModal.bind(this);\r\n this.errorWarningModal = this.errorWarningModal.bind(this);\r\n\r\n this.state = {\r\n variablePreview: false,\r\n analyze_visible: false,\r\n loading: false,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n inputModalVisible: false,\r\n btnsend_loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n screenwidth: 0,\r\n analyzeTable: [],\r\n data: [],\r\n total_recipients: [],\r\n total_recipients_analyze: [],\r\n dataScheduling: [],\r\n variable: [\r\n \"firstName\",\r\n \"lastName\",\r\n \"address\",\r\n \"city\",\r\n \"country\",\r\n \"gender\",\r\n \"birthDate\",\r\n ],\r\n columnsScheduling: [\r\n {\r\n dataIndex: \"title\",\r\n key: \"title\",\r\n render: (text) => (\r\n \r\n {text}\r\n \r\n ),\r\n },\r\n {\r\n dataIndex: \"value\",\r\n key: \"value\",\r\n render: (text) => (\r\n {text}
\r\n ),\r\n },\r\n ],\r\n columnsFile: [\r\n {\r\n title: \"Upload File Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\",\r\n },\r\n {\r\n title: \"Submitted Dated\",\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n width: \"20%\",\r\n render: (text) =>\r\n moment(text, \"DD/MM/YYYY HH:mm\").format(\"DD/MM/YYYY HH:mm\"),\r\n },\r\n {\r\n title: \"Submitted By (users)\",\r\n dataIndex: \"user\",\r\n key: \"user\",\r\n width: \"30%\",\r\n },\r\n ],\r\n dataFile: [],\r\n templateName: \"\",\r\n popUpTitel: \"\",\r\n createReportModalVisible: false,\r\n listStatus: [],\r\n SUM_RECIPTENTS: \"\",\r\n fileoid: undefined,\r\n filename: undefined,\r\n loadingAll: true,\r\n campaignDetail: [],\r\n errorModalVisible: false,\r\n errorWarningModalVisible: false,\r\n messageError: \"\",\r\n modalVisible: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getStatusCampaign();\r\n this.getFileCampaign();\r\n this.getData();\r\n this.getCampaignDetail();\r\n\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\r\n \"resize\",\r\n this.updateWindowDimensions.bind(this)\r\n );\r\n sessionStorage.clear();\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loadingAll: true });\r\n\r\n let req = JSON.stringify({\r\n _campId: getUrlVars()[\"id\"],\r\n });\r\n apiClient\r\n .post(\"api/campaign/DeliveredDetail_new/\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data[0];\r\n if (json.draft == true) {\r\n window.location.href =\r\n \"communication/edit?id=\" +\r\n getUrlVars()[\"id\"] +\r\n \"&type=\" +\r\n (json.campType == 2 ? \"broadcast\" : \"broadcasttemplate\");\r\n }\r\n\r\n this.setState(\r\n {\r\n data: json ? json : {},\r\n },\r\n () => {\r\n this.updateWindowDimensions();\r\n }\r\n );\r\n\r\n this.setState((state) => {\r\n return {\r\n total_recipients: [\r\n {\r\n key: \"1\",\r\n status: \"Unique\",\r\n recipients: state.data.uniqueAmount,\r\n id: getUrlVars()[\"id\"],\r\n },\r\n {\r\n key: \"2\",\r\n status: \"Duplicate\",\r\n recipients: state.data.duplicate,\r\n id: getUrlVars()[\"id\"],\r\n },\r\n {\r\n key: \"3\",\r\n status: \"Blacklist\",\r\n recipients: state.data.blacklist,\r\n id: getUrlVars()[\"id\"],\r\n },\r\n {\r\n key: \"4\",\r\n status: \"Invalid\",\r\n recipients: state.data.invalid,\r\n id: getUrlVars()[\"id\"],\r\n },\r\n ],\r\n dataScheduling: [\r\n {\r\n key: \"1\",\r\n title: \"Started At\",\r\n value: state.data.sentAt\r\n ? moment(state.data.sentAt, \"YYYY/MM/DD HH:mm\").format(\r\n \"DD/MM/YYYY HH:mm\"\r\n )\r\n : \"-\",\r\n },\r\n {\r\n key: \"2\",\r\n title: \"Scheduled\",\r\n value: state.data.scheduledDate\r\n ? moment(\r\n state.data.scheduledDate,\r\n \"YYYY/MM/DD HH:mm\"\r\n ).format(\"DD/MM/YYYY HH:mm\")\r\n : \"Immediated\",\r\n },\r\n {\r\n key: \"3\",\r\n title: \"Timezone\",\r\n value: \"Thailand / Bangkok (ICT)\",\r\n },\r\n {\r\n key: \"4\",\r\n title: \"Sender Name\",\r\n value: state.data.senderName,\r\n },\r\n ]\r\n // data: {\r\n // contentCamp: state.data.smsContent\r\n // }\r\n };\r\n });\r\n\r\n this.setState({ loadingAll: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loadingAll: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n getCampaignDetail() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loadingAll: true });\r\n\r\n let req = JSON.stringify({\r\n _campId: getUrlVars()[\"id\"],\r\n });\r\n apiClient\r\n .post(\"api/campaign/GetCampaignDetail/\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data[0];\r\n this.setState({\r\n loadingAll: false,\r\n campaignDetail: json ? json : {},\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ loadingAll: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n onClickPreview(value) {\r\n if (value) {\r\n setTimeout(() => {\r\n let modalcontent = document.querySelectorAll(\".ant-modal-content\");\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className += \" ant-modal-content-hide\";\r\n }\r\n }, 10);\r\n } else {\r\n setTimeout(() => {\r\n let modalcontent = document.querySelectorAll(\".ant-modal-content-hide\");\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \" ant-modal-content\";\r\n }\r\n }, 10);\r\n }\r\n\r\n this.setState({\r\n variablePreview: value,\r\n });\r\n }\r\n\r\n onClickSeeLog() {\r\n sessionStorage.setItem(\"campaignId\", getUrlVars()[\"id\"]);\r\n sessionStorage.setItem(\"campaignName\", this.state.data.campaignName);\r\n sessionStorage.setItem(\"startDate\", this.state.data.sentAt);\r\n window.open(`/report/logs`);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n inputModal(value, message, messageSuccess) {\r\n this.setState({ inputModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n createReportModal(value, message, messageSuccess) {\r\n this.setState({ createReportModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"download\") {\r\n this.downloadFile(this.state.fileoid, this.state.filename);\r\n this.setState({ action: \"\" });\r\n return false;\r\n }\r\n if (this.state.action == \"analyze\") {\r\n value = false;\r\n this.analyze_showDrawer();\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"resend\") {\r\n this.ResendFail();\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"cancel\") {\r\n this.CancelCampaign();\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"createreport\") {\r\n this.createreport();\r\n this.setState({ action: \"\" });\r\n }\r\n if (this.state.action == \"copy\") {\r\n this.handleDuplicate();\r\n this.setState({ action: \"\" });\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n\r\n if (this.state.action == \"createtemplate\") {\r\n this.handleCreateTaemplate();\r\n this.setState({ action: \"\" });\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n this.setState((state) => {\r\n if (state.successModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n if (state.errorWarningModalVisible) {\r\n setTimeout(() => {\r\n this.setState({ errorWarningModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n });\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n this.setState({ [parameters]: value });\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({\r\n screenwidth: scroll ? e.offsetWidth - 132 : e.offsetWidth - 132,\r\n });\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n downloadFile(item, name) {\r\n if (!CheckTokenExp()) {\r\n apiClient\r\n .get(\"api/file/download/\" + item, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n responseType: \"blob\",\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n const url = window.URL.createObjectURL(new Blob([json]));\r\n const link = document.createElement(\"a\");\r\n link.href = url;\r\n link.download = name;\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n getFileCampaign() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n apiClient\r\n .get(\"api/file/getFileByCampaign/\" + getUrlVars()[\"id\"], {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n this.setState({\r\n dataFile: json ? json : [],\r\n });\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n getStatusCampaign() {\r\n if (!CheckTokenExp()) {\r\n apiClient\r\n .get(\"api/Campaign/GetStatusList\", {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n if (data.status === 200 && data.data) {\r\n this.setState({ listStatus: data.data });\r\n } else {\r\n this.setState({ modalVisible: true });\r\n this.setState({ listStatus: [] });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ listStatus: [] });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n statusCampaignByid(value) {\r\n const { listStatus } = this.state;\r\n\r\n let res = listStatus.filter((i) => i.ID == value);\r\n\r\n return res.length > 0 ? res[0].TEXT : \"IN PROGRESS\";\r\n }\r\n\r\n ResendFail() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ launch: true, loading: true });\r\n var CAMP_ID = getUrlVars()[\"id\"];\r\n if (CAMP_ID > 0) {\r\n let req = JSON.stringify({\r\n id: CAMP_ID,\r\n });\r\n\r\n apiClient\r\n .post(\"api/Campaign/ResendList\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n\r\n this.analyze_onClose();\r\n\r\n this.AnalyzeFunc();\r\n\r\n this.resendModal(false);\r\n\r\n this.setState({ resendlist: [] });\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n AnalyzeFunc() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ btnsend_loading: true });\r\n\r\n let req = JSON.stringify({\r\n id: getUrlVars()[\"id\"],\r\n });\r\n\r\n apiClient\r\n .post(\"api/Campaign/AnalyzeResend\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n\r\n var total_credit = [\r\n {\r\n key: \"1\",\r\n name: \"Shortest\",\r\n characters: json.SUM_SHORT_MSG,\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Longest\",\r\n characters: json.SUM_LONG_MSG,\r\n },\r\n ];\r\n\r\n var total_recipients_analyze = [\r\n {\r\n key: \"1\",\r\n status: \"Unique\",\r\n recipients: json.SUM_RECIPTENTS,\r\n },\r\n {\r\n key: \"2\",\r\n status: \"Duplicate\",\r\n recipients: json.SUM_DUPICATE,\r\n },\r\n {\r\n key: \"3\",\r\n status: \"Blacklist\",\r\n recipients: json.SUM_BLACKLIST,\r\n },\r\n {\r\n key: \"4\",\r\n status: \"Invalid\",\r\n recipients: json.SUM_INVALID_NUMBER,\r\n },\r\n ];\r\n\r\n var analyzeTable = [\r\n {\r\n key: \"1\",\r\n name: this.state.data.senderName,\r\n schedule: moment().format(\"DD/MM/YYYY HH:mm\"),\r\n },\r\n ];\r\n\r\n this.setState({\r\n total_credit: total_credit,\r\n sum_credit: formatNumber(json.SUM_CREDIT),\r\n SUM_RECIPTENTS: formatNumber(json.SUM_RECIPTENTS),\r\n total_recipients_analyze: total_recipients_analyze,\r\n analyzeTable: analyzeTable,\r\n sum_message: json.SUM_MESSAGE,\r\n\r\n Analyz: false,\r\n show_summary: true,\r\n btnsend_loading: false,\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ btnsend_loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n analyze_onClose() {\r\n this.setState({\r\n analyze_visible: false,\r\n });\r\n }\r\n\r\n analyze_showDrawer() {\r\n this.AnalyzeFunc();\r\n this.setState({ analyze_visible: true });\r\n }\r\n\r\n CancelCampaign() {\r\n if (!CheckTokenExp()) {\r\n var id = getUrlVars()[\"id\"];\r\n apiClient\r\n .get(\"api/Campaign/CancelCampiagn/\" + id, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n this.setState({\r\n dataSource: [],\r\n SMS_TO: \"\",\r\n });\r\n this.getData();\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n errorWarningModal(value) {\r\n this.setState({ errorWarningModalVisible: value });\r\n }\r\n\r\n createreport() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n let date = moment().format(\"YYYYMMDDHHmmss\");\r\n var nameReport = this.state.data.campaignName.trim() + date;\r\n\r\n\r\n let startDate =\r\n this.state.data.scheduledDate == null\r\n ? moment(this.state.campaignDetail.CAMP_CREATE_DATE)\r\n : moment(this.state.data.scheduledDate);\r\n let endDate = moment(startDate).add(8, \"hours\");\r\n\r\n\r\n // start cream\r\n let req = JSON.stringify({\r\n rpt_type: 1, //Detailed Report\r\n rpt_name: nameReport, //report name\r\n onetimereport_type: 8, //Custom\r\n\r\n filter_CAMP_ID: [this.state.campaignDetail.CAMP_ID], //CAMP_ID\r\n filter_SMS_STARTSCHEDULE: startDate.format(\"YYYY-MM-DD HH:mm:00\"),\r\n filter_SMS_ENDSCHEDULE: endDate.format(\"YYYY-MM-DD HH:mm:59\"),\r\n filter_STATUS_CODE: [],\r\n filter_ACCOUNTS_ID: [],\r\n filter_USR_ID: [],\r\n filter_SEND_NAME: [],\r\n filter_SMS_STARTDISPLAYSCHEDULE: startDate.format(\"DD/MM/YYYY HH:mm\"),\r\n filter_SMS_ENDDISPLAYSCHEDULE: endDate.format(\"DD/MM/YYYY HH:mm\"),\r\n filter_OTP: [],\r\n\r\n alert_flag: false,\r\n alert_email: [],\r\n\r\n ftp_flag: false,\r\n ftp_export_type: 0,\r\n ftp_protocal: 1,\r\n ftp_host: \"\",\r\n ftp_port: \"\",\r\n ftp_username: \"\",\r\n ftp_password: \"\",\r\n ftp_path: \"/\",\r\n\r\n recuring_flag: false,\r\n recuring_type: 0,\r\n recuring_reportrange: \"\",\r\n recuring_value: 0,\r\n });\r\n\r\n apiClient\r\n .post(\"api/report/addreportnew\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n this.setState({ loading: false });\r\n if (json.Code !== \"200\") {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: json.Description,\r\n });\r\n } else {\r\n this.setState({ action: \"\" });\r\n this.setState({ successModalVisible: true });\r\n this.modalcountDown();\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n this.setState({ errorModalVisible: true, messageError: error });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n handleDuplicate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n apiClient\r\n .get(\"api/Campaign/DuplicateCapaign/\" + getUrlVars()[\"id\"], {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n\r\n window.location.href =\r\n \"communication/edit?id=\" +\r\n json +\r\n \"&type=\" +\r\n (this.state.data.campType == 2 ? \"broadcast\" : \"broadcasttemplate\");\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n handleCreateTaemplate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n const { data } = this.state;\r\n const formData = new FormData();\r\n\r\n if (!this.state.templateName || !data.campContent || !data.senderName) {\r\n this.setState({ successModalVisible: false });\r\n this.setState({\r\n errorWarningModalVisible: true,\r\n messageError: \"This campaign cannot create a template.\",\r\n });\r\n // this.warningModal(true, \"This campaign cannot create a template.\", \"Done.\")\r\n this.setState({ loading: false });\r\n } else {\r\n let req = JSON.stringify({\r\n key: 0,\r\n templatename: this.state.templateName,\r\n contents: data.campContent,\r\n sender: data.senderName,\r\n shortedurl: data.shortenCamp,\r\n });\r\n\r\n formData.append(\"req\", req);\r\n\r\n apiClient\r\n .post(\"api/template/addupdate\", formData, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n // var json = data.data.data[0];\r\n this.setState({ successModalVisible: true });\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n statusCampaignColor(value) {\r\n const list = [\r\n { ID: 0, COLCOR: \"tag-draft\" },\r\n { ID: 1, COLCOR: \"tag-inProgres\" },\r\n { ID: 4, COLCOR: \"tag-schedu\" },\r\n { ID: 3, COLCOR: \"tag-complete\" },\r\n { ID: 7, COLCOR: \"tag-pending\" },\r\n { ID: 8, COLCOR: \"tag-cancel\" },\r\n { ID: 9, COLCOR: \"tag-error\" },\r\n { ID: 10, COLCOR: \"tag-waiting\" },\r\n ];\r\n\r\n let res = list.filter((i) => i.ID == value);\r\n\r\n return res[0].COLCOR;\r\n }\r\n\r\n confirmDownloadFile(fileoid, name) {\r\n this.setState({\r\n fileoid: fileoid,\r\n filename: name,\r\n });\r\n this.warningModal(true, \"Do you want download this file?\", \"\");\r\n this.setStateByProps(\"action\", \"download\");\r\n }\r\n\r\n render() {\r\n const {\r\n total_recipients,\r\n total_recipients_analyze,\r\n progressBar,\r\n columnsScheduling,\r\n dataScheduling,\r\n variable,\r\n screenwidth,\r\n variablePreview,\r\n loading,\r\n warningModalVisible,\r\n message,\r\n messageSuccess,\r\n successModalVisible,\r\n variableLog,\r\n search,\r\n data,\r\n columnsFile,\r\n dataFile,\r\n inputModalVisible,\r\n templateName,\r\n popUpTitel,\r\n createReportModalVisible,\r\n analyze_visible,\r\n analyzeTable,\r\n btnsend_loading,\r\n SUM_RECIPTENTS,\r\n sum_credit,\r\n total_credit,\r\n loadingAll,\r\n errorModalVisible,\r\n errorWarningModalVisible,\r\n messageError,\r\n modalVisible\r\n } = this.state;\r\n\r\n const routes = [\r\n {\r\n path: \"communication\",\r\n breadcrumbName: \"Communication\",\r\n },\r\n {\r\n breadcrumbName: data.campaignName,\r\n },\r\n ];\r\n\r\n var optionnumber = {\r\n justification: \"L\",\r\n locales: \"en-US\",\r\n percentage: false,\r\n precision: 0,\r\n wholenumber: null,\r\n commafy: true,\r\n shortFormat: true,\r\n shortFormatMinValue: 1000,\r\n shortFormatPrecision: 1,\r\n title: true,\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Communication \r\n \r\n \r\n {data.campaignName}\r\n \r\n \r\n
this.onClickPreview(true)}\r\n >\r\n Message Preview\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Valid Recipients\r\n \r\n \r\n \r\n {\" \"}\r\n {formatNumber(data.validRecipients)}\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n Total Messages Sent\r\n \r\n \r\n \r\n {\" \"}\r\n {formatNumber(data.totalMessagesSent)}\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Cost \r\n \r\n \r\n {\" \"}\r\n {formatNumber(data.costCredits)}\r\n \r\n CREDITS \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Total Return Credits \r\n \r\n \r\n {\" \"}\r\n {formatNumber(data.ANI_CREDIT - data.costCredits)}\r\n \r\n CREDITS \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 Communication Summary\r\n
\r\n \r\n \r\n {data.campStatus\r\n ? this.statusCampaignByid(data.campStatus)\r\n : this.statusCampaignByid(1)}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
(\r\n \r\n \r\n {percent.toFixed(2)}%\r\n \r\n \r\n Delivery Rate\r\n \r\n
\r\n )}\r\n />\r\n \r\n
\r\n Delivery By Status\r\n \r\n
\r\n
\r\n \r\n Delivered \r\n \r\n \r\n \r\n {data.delivered}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#1bbc9b\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n Undelivered \r\n \r\n \r\n \r\n {data.undelivered}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#95a5a5\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n Expired \r\n \r\n \r\n \r\n {data.expired}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#9a57b4\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n Rejected \r\n \r\n \r\n \r\n {data.rejected}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#e44b3b\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Completed \r\n \r\n \r\n \r\n {data.completed}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#1bbc9b\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Pending \r\n \r\n \r\n \r\n {data.pending}\r\n \r\n \r\n \r\n \r\n percent.toFixed(2) + \"%\"\r\n }\r\n strokeColor=\"#edc510\"\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n {textforceStop}\r\n \r\n }\r\n >\r\n
{\r\n this.warningModal(\r\n true,\r\n \"Do you want to Force Stop this campaign? \",\r\n \"Force Stop campaign successfully.\"\r\n ),\r\n this.setStateByProps(\"action\", \"cancel\");\r\n }}\r\n >\r\n \r\n Only specified status message will be resent\r\n according to platform manual (\r\n \r\n Click\r\n \r\n )\r\n \r\n 7 ||\r\n (data.undelivered == 0 && data.expired == 0)\r\n ? true\r\n : false\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.createReportModal(\r\n true,\r\n \"Would you to create a report for \" +\r\n data.campaignName +\r\n \"?\",\r\n \"When successful, the report will be displayed in the report menu.\"\r\n );\r\n this.setState({ popUpTitel: \"Get report\" });\r\n this.setStateByProps(\"action\", \"createreport\");\r\n }}\r\n >\r\n this.onClickSeeLog()}\r\n >\r\n {\r\n this.warningModal(\r\n true,\r\n \"Do you want to duplicate this campaign?\",\r\n \"Duplicated campaign successfully.\"\r\n ),\r\n this.setStateByProps(\"action\", \"copy\");\r\n }}\r\n >\r\n {\r\n this.inputModal(\r\n true,\r\n \"To save your new Template, first give it a name.\",\r\n \"Save Template successfully.\"\r\n ),\r\n this.setStateByProps(\r\n \"action\",\r\n \"createtemplate\"\r\n );\r\n }}\r\n >\r\n \r\n SAVE AS TEMPLATE\r\n \r\n \r\n
\r\n\r\n \r\n {\r\n return {\r\n onClick: (item) => {\r\n record.fileoid\r\n ? this.confirmDownloadFile(\r\n record.fileoid,\r\n record.name\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 \r\n \r\n {\" \"}\r\n Scheduling Options\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.onClickPreview(false)}\r\n >\r\n \r\n \r\n
\r\n
{data.senderName}
\r\n
\r\n Text message\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Cancel\r\n \r\n {SUM_RECIPTENTS ? (\r\n {\r\n this.warningModal(\r\n true,\r\n \"Do you want to send messages?\",\r\n \"Send messages successfully.\"\r\n ),\r\n this.setState({ action: \"resend\" });\r\n }}\r\n >\r\n Confirm\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col } from 'antd';\r\n\r\n\r\nexport default class TagSender extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n\r\n };\r\n\r\n }\r\n\r\n render() {\r\n const { title, RemoveSender } = this.props;\r\n\r\n return (\r\n \r\n {title}\r\n RemoveSender(title)}> \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { Select } from 'antd';\r\nimport { token } from '../../../config';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class SelectPayType extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n list: [],\r\n select: [],\r\n\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n\r\n\r\n render() {\r\n const { loading, list } = this.state;\r\n const { placeholder, select, setStateByProps, style, disabled } = this.props;\r\n return (\r\n { this.getData(value) }}\r\n onChange={(value) => setStateByProps(\"paytype\", value)}\r\n value={select}\r\n suffixIcon={loading ? \"\" : Prepaid \r\n Postpaid \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { Radio } from 'antd';\r\nimport { colorGreen, colorRed } from '../../../config';\r\n\r\n\r\nexport default class ButtonGroupStatusAcc extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n render() {\r\n const { placeholder, radio, setStateByProps, style, statename, disabled } = this.props;\r\n\r\n const colorEn = radio == 1 ? colorGreen : \"\";\r\n const colorDis = radio == 0 ? colorRed : \"\";\r\n return (\r\n setStateByProps(statename ? statename : \"statusacc\", e.target.value)}\r\n buttonStyle=\"solid\" size=\"small\">\r\n Disabled \r\n Enabled \r\n \r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Radio } from 'antd';\r\nimport { colorGreen, colorRed } from '../../../config';\r\n\r\n\r\nexport default class ButtonGroupSubAcc extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n render() {\r\n const { placeholder, radio, setStateByProps, style, tocreate, disabled } = this.props;\r\n\r\n const colorOn = radio == 1 ? colorGreen : \"\";\r\n const colorOff = radio == 0 ? colorRed : \"\";\r\n return (\r\n setStateByProps(tocreate ? tocreate : \"tocreate\", e.target.value)}\r\n buttonStyle=\"solid\" size=\"small\">\r\n OFF \r\n ON \r\n \r\n );\r\n }\r\n}","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Table, Divider, Tag, Icon, Button, Card, Row, Col, Modal, Input, Select, Spin, Checkbox } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root , getGenToken, getTwoFactor} from '../../../config';\r\nimport { token, CheckTokenExp } from '../../../config';\r\nimport TagSender from '../Tag/TagSender';\r\nimport SelectSubAccSender from \"../Select/SelectSubAccSender\";\r\nimport SelectPayType from '../Select/SelectPayType';\r\nimport ButtonGroupStatusAcc from '../../../components/Ants/Button/ButtonGroupStatusAcc';\r\nimport ButtonGroupSubAcc from '../../../components/Ants/Button/ButtonGroupSubAcc';\r\n\r\nconst { TextArea } = Input;\r\nconst { Option } = Select;\r\n\r\nexport default class ModalAddAccount extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n usercheck: false,\r\n errormessage: \"\",\r\n senderlist: [],\r\n senderError: \"\",\r\n };\r\n this.CheckUserDuplicate = this.CheckUserDuplicate.bind(this);\r\n this.AddSenderList = this.AddSenderList.bind(this);\r\n this.RemoveSender = this.RemoveSender.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.passwordFilter = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,}$/\r\n }\r\n\r\n componentDidMount() {\r\n\r\n\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.clearsender !== prevProps.clearsender) {\r\n this.setState({ senderlist: [], senderError: \"\" })\r\n this.props.setStateByProps(\"clearsender\", false);\r\n }\r\n }\r\n\r\n CheckUserDuplicate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n username: this.props.username\r\n });\r\n\r\n apiClient.post('api/usersmanage/CheckUserDuplicate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n if (!json && this.state.password === this.state.repassword) {\r\n this.props.warningModal(true, \"Do you want to add account?\", \"Add account successfully.\");\r\n this.props.setStateByProps('action', 'createacc');\r\n }\r\n\r\n this.setState({ usercheck: json });\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n \r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n this.setState({ [parameters]: value });\r\n this.setState({ senderError: \"\" })\r\n this.props.setStateByProps(\"MadalAddAccountvisible\", false);\r\n }\r\n\r\n AddSenderList(value) {\r\n if (!this.state.senderlist.includes(value) === true) {\r\n this.setState({\r\n senderlist: [...this.state.senderlist, value],\r\n senderError: \"\",\r\n })\r\n this.props.setStateByProps(\"senderlist\", [...this.state.senderlist, value]);\r\n }\r\n else {\r\n this.setState({\r\n senderError: \"Duplicate Sender\"\r\n })\r\n }\r\n \r\n }\r\n\r\n RemoveSender(value) {\r\n var array = [...this.state.senderlist]; // make a separate copy of the array\r\n var index = array.indexOf(value)\r\n if (index !== -1) {\r\n array.splice(index, 1);\r\n this.setState({ senderlist: array });\r\n this.props.setStateByProps(\"senderlist\", array);\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { visible, setStateByProps, loading, accname, email, username, password, repassword,\r\n paytype, statusacc, creactsubeaccount, generateToken, twoFactor, type, emailError, errorMessage, dsender, senderarr } = this.props;\r\n const { usercheck, senderlist, senderError } = this.state;\r\n const styleMarginBottom = { marginBottom: 16 };\r\n const styleMarginTop = { marginBottom: 16, marginTop: 40 };\r\n const styleMarginRow = { marginBottom: 16, marginRight: 31, marginLeft: 38 };\r\n\r\n return (\r\n Create account this.setStateByProps(\"senderlist\", [])}> }\r\n visible={visible}\r\n onOk={this.props.handleOk}\r\n onCancel={() => cancelModal(false)}\r\n loading={loading}\r\n footer={[\r\n \r\n {errorMessage} \r\n {\r\n password ?\r\n this.passwordFilter.test(password) ?\r\n password === repassword ? \"\"\r\n : \"Passwords do not match\"\r\n : <>\r\n \r\n - The password must be at least 6 characters long\r\n
\r\n \r\n - Uppercase and Lowercase is required\r\n
\r\n \r\n - Number is required\r\n
\r\n \r\n - Special character is required\r\n
\r\n \r\n : \"\"\r\n } \r\n \r\n 0 && this.passwordFilter.test(password) && password === repassword ? false : true}\r\n onClick={this.CheckUserDuplicate}>\r\n \r\n \r\n
\r\n ]}\r\n >\r\n \r\n \r\n Account name \r\n * \r\n Username \r\n * \r\n {usercheck ? \"User duplicate\" : \"\"} \r\n\r\n Payment type \r\n * \r\n Email \r\n * {!emailError && email != \"\" ? \"Invalid email format\" : \"\"} \r\n Password \r\n * \r\n setStateByProps(\"password\", e.target.value)} maxLength=\"30\" />\r\n \r\n\r\n Re-type password \r\n *\r\n \r\n\r\n { setStateByProps(\"repassword\", e.target.value) }} maxLength=\"30\" />\r\n \r\n\r\n Create Subaccount \r\n * \r\n Status \r\n * \r\n Generate Token \r\n * \r\n Two-Factor \r\n * \r\n Sender \r\n * {senderError != \"\" ? senderError : \"\"} \r\n { this.AddSenderList(dsender), setStateByProps(\"dsender\", undefined) }}>\r\n \r\n \r\n\r\n \r\n {\r\n senderlist.map((item, index) =>\r\n item ?\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n PageHeader, Button, Descriptions, Select, Row, Col, DatePicker, Icon, Form, Input, Card,\r\n Tooltip, Progress, Table, Divider, Tag, Modal, Checkbox, Spin, Radio\r\n} from 'antd';\r\nimport ButtonGroupStatusAcc from '../../../components/Ants/Button/ButtonGroupStatusAcc';\r\nimport ButtonGroupSubAcc from '../../../components/Ants/Button/ButtonGroupSubAcc';\r\n\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport { token, validateEmail, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { MonthPicker, RangePicker, WeekPicker, } = DatePicker;\r\n\r\nexport default class Account extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n showPassword: false,\r\n screenwidth: 0,\r\n creactsubeaccount: false,\r\n userGenToken: false,\r\n user2Fa: false,\r\n admin: false,\r\n createuser: false,\r\n owner: false,\r\n email: \"\",\r\n password: \"\",\r\n repassword: \"\",\r\n emailError: false,\r\n errorModalVisible : false,\r\n messageError : \"\"\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.getProfile = this.getProfile.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onChangeSubAcc = this.onChangeSubAcc.bind(this);\r\n this.onChangeStatus = this.onChangeStatus.bind(this);\r\n this.passwordFilter = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,}$/\r\n this.errorModal = this.errorModal.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.getProfile();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"accountcreate\") {\r\n this.setState({ action: \"\" });\r\n this.UpdateProfile();\r\n } else {\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\" });\r\n value = false;\r\n this.props.history.push('/dashboard')\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n getProfile() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n\r\n\r\n });\r\n\r\n\r\n apiClient.post('api/profile/GetProfile', req\r\n\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data[0];\r\n this.props.setStateByProps(\"paytype\", json.pay_type)\r\n if (json) {\r\n this.setState(state => {\r\n return {\r\n accname: json.name,\r\n email: json.email,\r\n statusacc: json.status,\r\n username: json.username,\r\n paytype: json.pay_type,\r\n emailError: validateEmail(json.email),\r\n creactsubeaccount: json.creactsubeaccount,\r\n userGenToken: json.userGenToken,\r\n user2Fa: json.user2Fa,\r\n };\r\n });\r\n }\r\n\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n UpdateProfile() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n let req = JSON.stringify({\r\n accName: this.state.accname,\r\n email: this.state.email,\r\n password: this.state.password,\r\n });\r\n\r\n apiClient.post('api/profile/UpdateProfile', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Save Account unsuccessful!\",\r\n });\r\n }\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"addusername\" || parameters == \"username\" || value === \"\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i) || value == \"\") {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n }\r\n\r\n onChangeSubAcc(e) {\r\n this.setState({\r\n subacc: e.target.value,\r\n });\r\n };\r\n\r\n onChangeStatus(e) {\r\n this.setState({\r\n statusactive: e.target.value,\r\n });\r\n };\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, users, search, templateItem,\r\n action, dateRange, screenwidth, screenwidth2, accname, email, statusacc, username, paytype, MadalAddUservisible,\r\n id, addusername, addpassword, repassword, password, addstatusacc, tocreate, creactsubeaccount, userGenToken, user2Fa, createuser,\r\n owner, addrepassword, uemail, emailError, uemailError, errorModalVisible, messageError } = this.state;\r\n\r\n const { admin } = this.props;\r\n\r\n const pay_type = paytype == 1 ? \"Prepaid\" : \"Postpaid\";\r\n\r\n var styleinputlable = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200,\r\n fontWeight: 700\r\n };\r\n var styleinput = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var stylelabel = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n minWidth: 200,\r\n fontWeight: 600\r\n };\r\n var styleradio = {\r\n width: (screenwidth / 3),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput2 = {\r\n width: ((screenwidth / 3) - 216),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_name = {\r\n width: (screenwidth2 / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_date = {\r\n width: (screenwidth2 / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Account name \r\n {accname} \r\n \r\n Username \r\n {username} \r\n \r\n\r\n Payment type \r\n {pay_type} \r\n \r\n\r\n
\r\n \r\n \r\n Email \r\n * {!emailError && email != \"\" ? \"Invalid email format\" : \"\"} \r\n
\r\n \r\n
\r\n \r\n \r\n Password \r\n
\r\n \r\n {\r\n admin ? this.setStateByProps(\"password\", e.currentTarget.value) : null\r\n }} />\r\n
\r\n \r\n\r\n \r\n Re-type password \r\n {/*{*/}\r\n {/* password ?*/}\r\n {/* password.length > 5 ?*/}\r\n {/* password === repassword ? \"\"*/}\r\n {/* : \"Passwords do not match\"*/}\r\n {/* : \"The password must be at least 6 characters long.\"*/}\r\n {/* : \"\"*/}\r\n {/*} */}\r\n
\r\n \r\n { admin ? this.setStateByProps(\"repassword\", e.target.value) : null }} />\r\n
\r\n \r\n\r\n
\r\n\r\n \r\n \r\n Create Subaccount \r\n
\r\n \r\n
\r\n \r\n \r\n Status \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Generate Token \r\n
\r\n \r\n
\r\n \r\n \r\n Two-Factor \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n admin ?\r\n <>\r\n \r\n {this.state.password && !this.passwordFilter.test(this.state.password) ?\r\n \r\n - The password must be at least 6 characters long \r\n : password && password !== repassword &&\r\n {\r\n `- Password do not match`\r\n } \r\n }\r\n
\r\n { this.warningModal(true, \"Do you want to save this account?\", \"Save account successfully.\"), this.setStateByProps('action', 'accountcreate') }}>\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
{text}
)\r\n },\r\n {\r\n title: 'Owner',\r\n dataIndex: 'parent',\r\n key: 'parent',\r\n width: 200,\r\n },\r\n {\r\n title: 'Balance',\r\n dataIndex: 'balance',\r\n key: 'balance',\r\n width: 200,\r\n render: text => (text ? formatNumber(text) : 0) + \" CREDITS\"\r\n },\r\n {\r\n title: 'Payment Type',\r\n dataIndex: 'pay_type',\r\n key: 'pay_type',\r\n width: 100,\r\n render: text => {text == 1 ? \"Prepaid\" : \"Postpaid\"} \r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'createdate',\r\n key: 'createdate',\r\n width: 130,\r\n render: text => (moment(text).format(dateFormatDateTime))\r\n },\r\n {\r\n title: 'Create Account',\r\n dataIndex: 'creactsubeaccount',\r\n key: 'creactsubeaccount',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Yes\" : \"No\"} )\r\n }\r\n },\r\n {\r\n title: 'Status',\r\n dataIndex: 'status',\r\n key: 'status',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Enabled\" : \"Disabled\"} )\r\n }\r\n },\r\n {\r\n dataIndex: 'key',\r\n key: 'key',\r\n width: 50,\r\n align: 'right',\r\n render: (key, item) => (\r\n \r\n
this.handleVisibleChange(value, key)}\r\n content={\r\n \r\n this.setClickId(item)} >\r\n \r\n {\r\n item.pay_type == 1 ?\r\n this.setCreditAccount(item)} >\r\n \r\n :\r\n null\r\n }\r\n \r\n } trigger=\"click\">\r\n \r\n
`${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n onRow={(item, index) => ({\r\n onDoubleClick: () => this.setClickId(item)\r\n })}\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n footer={() => footer}\r\n tableLayout=\"fixed\"\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n PageHeader, Button, Descriptions, Select, Row, Col, DatePicker, Icon, Form, Input, Card,\r\n Tooltip, Progress, Table, Divider, Tag, Modal, Checkbox, Spin, Radio\r\n} from 'antd';\r\nimport ButtonGroupStatusAcc from '../../../components/Ants/Button/ButtonGroupStatusAcc';\r\nimport ButtonGroupSubAcc from '../../../components/Ants/Button/ButtonGroupSubAcc';\r\n\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport { token, validateEmail, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { MonthPicker, RangePicker, WeekPicker, } = DatePicker;\r\n\r\nexport default class SubAccountDetail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n name: \"\",\r\n users: [],\r\n search: {\r\n name: \"\",\r\n users: [],\r\n dateRange: [null, null]\r\n },\r\n page: \"\",\r\n templateItem: [],\r\n action: \"\",\r\n dateRange: [null, null],\r\n screenwidth: 0,\r\n screenwidth2: 0,\r\n MadalAddUservisible: false,\r\n id: null,\r\n addusername: \"\",\r\n addpassword: \"\",\r\n addstatusacc: 1,\r\n tocreate: false,\r\n creactsubeaccount: false,\r\n userGenToken: false,\r\n user2Fa: false,\r\n createChildGenToken: false,\r\n createChild2Fa: false,\r\n level: 0,\r\n admin: false,\r\n createuser: false,\r\n owner: false,\r\n password: \"\",\r\n repassword: \"\",\r\n addrepassword: \"\",\r\n uemail: \"\",\r\n emailError: false,\r\n uemailError: false,\r\n errorModalVisible: false,\r\n messageError: \"\"\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.getAccountDetailData = this.getAccountDetailData.bind(this);\r\n this.accountUpdate = this.accountUpdate.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.passwordFilter = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,}$/\r\n this.errorModal = this.errorModal.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.accdetailId !== prevProps.accdetailId) {\r\n this.getAccountDetailData(this.props.accdetailId);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"accountcreate\") {\r\n this.setState({ action: \"\" });\r\n this.accountUpdate();\r\n }\r\n\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\" });\r\n this.props.discard(\"subaccount\")\r\n }\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n getAccountDetailData(value) {\r\n if (!CheckTokenExp()) {\r\n if (value != \"\") {\r\n this.setState({ loading: true, accountId: value });\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n accountId: value,\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountDetail', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n if (json) {\r\n this.setState(state => {\r\n return {\r\n accname: json.name,\r\n email: json.email,\r\n statusacc: json.status,\r\n username: json.username,\r\n currentpage: state.currentpage,\r\n paytype: json.pay_type,\r\n creactsubeaccount: json.creactsubeaccount,\r\n userGenToken: json.userGenToken,\r\n user2Fa: json.user2Fa,\r\n createChildGenToken: json.createChildGenToken,\r\n createChild2Fa: json.createChild2Fa,\r\n level: json.level,\r\n emailError: validateEmail(json.email)\r\n };\r\n });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"username\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i) || value == \"\") {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n this.setState({ errorMessage: \"\" });\r\n }\r\n\r\n accountUpdate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: this.state.accountId,\r\n name: this.state.accname,\r\n email: this.state.email,\r\n username: this.state.username,\r\n password: this.state.password,\r\n paytype: this.state.paytype,\r\n status: this.state.statusacc,\r\n creactsubeaccount: this.state.creactsubeaccount == 0 ? false : (this.state.creactsubeaccount == 1 ? true : this.state.creactsubeaccount),\r\n generateToken: this.state.userGenToken == 0 ? false : (this.state.userGenToken == 1 ? true : this.state.userGenToken),\r\n twoFactor: this.state.user2Fa == 0 ? false : (this.state.user2Fa == 1 ? true : this.state.user2Fa)\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountUpdate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Update Account unsuccessful!\",\r\n });\r\n }\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, users, search, templateItem,\r\n action, dateRange, screenwidth, screenwidth2, accname, email, statusacc, username, paytype, MadalAddUservisible,\r\n id, addusername, addpassword, repassword, password, addstatusacc, tocreate, creactsubeaccount, userGenToken, user2Fa, createChildGenToken, createChild2Fa, level, admin, createuser,\r\n owner, addrepassword, uemail, emailError, uemailError , errorModalVisible, messageError } = this.state;\r\n const paytypetext = paytype == 1 ? \"Prepaid\" : \"Postpaid\";\r\n\r\n return (\r\n \r\n
\r\n Account name \r\n {accname} \r\n \r\n Username \r\n {username} \r\n \r\n Payment type \r\n {paytypetext} \r\n \r\n
\r\n
\r\n Email \r\n Password \r\n this.setStateByProps(\"password\", e.target.value)} maxLength={30} />\r\n \r\n Re-type password \r\n { this.setStateByProps(\"repassword\", e.target.value) }} maxLength={30} />\r\n \r\n
\r\n
\r\n Create Subaccount \r\n 3 ? true : false} />\r\n \r\n Status \r\n
\r\n
\r\n Generate Token \r\n 3 || !createChildGenToken ? true : false} />\r\n \r\n Two-Factor \r\n 3 || !createChild2Fa ? true : false} />\r\n \r\n
\r\n
\r\n \r\n \r\n
{\r\n password ?\r\n this.passwordFilter.test(password) ?\r\n password === repassword ? \"\"\r\n : \"Passwords do not match\"\r\n : \r\n
\r\n - The password must be at least 6 characters long\r\n
\r\n
\r\n - Uppercase and Lowercase is required\r\n
\r\n
\r\n - Number is required\r\n
\r\n
\r\n - Special character is required\r\n
\r\n
\r\n
{ this.warningModal(true, \"Do you want to discard change?\", \"Discarded change successfully.\"), this.setState({ action: \"discard\" }) }}>\r\n \r\n { this.warningModal(true, \"Do you want to save this account?\", \"Save account successfully.\"), this.setStateByProps('action', 'accountcreate') }}>\r\n \r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
{id ? \"Edit\" : \"Create\"} user \r\n {\r\n password ?\r\n this.passwordFilter.test(password) ?\r\n password === repassword ? \"\"\r\n : \"Passwords do not match\"\r\n : <>\r\n \r\n - The password must be at least 6 characters long\r\n
\r\n \r\n - Uppercase and Lowercase is required\r\n
\r\n \r\n - Number is required\r\n
\r\n \r\n - Special character is required\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 Username \r\n * \r\n {usercheck ? \"User duplicate\" : \"\"} \r\n {\r\n id ?\r\n {username} \r\n :\r\n Email \r\n * {!emailError && email != \"\" ? \"Invalid email format\" : \"\"} \r\n Password \r\n * \r\n setStateByProps(\"addpassword\", e.target.value)} maxLength={30} />\r\n \r\n\r\n Re-type password \r\n * \r\n { setStateByProps(\"addrepassword\", e.target.value) }} maxLength={30} />\r\n \r\n\r\n Status \r\n * \r\n Create Users \r\n Generate Token \r\n Two-Factor \r\n
\r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Popover, Menu } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport { token, colorGreen, colorRed, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst dateFormatDateTime = 'DD/MM/YYYY HH:mm';\r\n\r\nexport default class TableUsers extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n {\r\n title: 'Username',\r\n dataIndex: 'username',\r\n key: 'username',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'createdate',\r\n key: 'createdate',\r\n width: 200,\r\n render: text => (moment(text, \"D/M/YYYY H:m\").format(dateFormatDateTime))\r\n },\r\n {\r\n title: 'Create User',\r\n dataIndex: 'permission',\r\n key: 'permission',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Yes\" : \"No\"} )\r\n }\r\n },\r\n {\r\n title: 'Status',\r\n dataIndex: 'status',\r\n key: 'status',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Enabled\" : \"Disabled\"} )\r\n }\r\n },\r\n {\r\n title: 'Generate Token',\r\n dataIndex: 'genToken',\r\n key: 'genToken',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Yes\" : \"No\"} )\r\n }\r\n },\r\n {\r\n title: 'Two-Factor',\r\n dataIndex: 'twoFactor',\r\n key: 'twoFactor',\r\n width: 130,\r\n render: text => {\r\n let colors = text == true ? colorGreen : colorRed;\r\n return ({text == true ? \"Yes\" : \"No\"} )\r\n }\r\n },\r\n {\r\n dataIndex: 'key',\r\n key: 'key',\r\n width: 50,\r\n align: 'right',\r\n render: (key, item) => (\r\n \r\n
\r\n {\r\n this.props.setStateByProps(\"MadalAddUservisible\", true),\r\n this.props.setStateByProps(\"id\", key),\r\n this.props.GetUserDetail(key)\r\n }}>\r\n \r\n \r\n } trigger=\"click\">\r\n \r\n
`${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n onRow={(item, index) => ({\r\n onDoubleClick: () => this.setClickId(item)\r\n })}\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n footer={() => footer}\r\n tableLayout=\"fixed\"\r\n />\r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport {\r\n PageHeader, Button, Descriptions, Select, Row, Col, DatePicker, Icon, Form, Input, Card,\r\n Tooltip, Progress, Table, Divider, Tag, Modal, Checkbox, Spin, Radio\r\n} from 'antd';\r\nimport ModalAddUser from '../../../components/Ants/Modal/ModalAddUser';\r\nimport TableUsers from '../../../components/Ants/Table/TableUsers';\r\n\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport { token, validateEmail, getUrlVars, CheckTokenExp } from '../../../config';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { MonthPicker, RangePicker, WeekPicker, } = DatePicker;\r\n\r\nexport default class SubAccountUsers extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n name: \"\",\r\n users: [],\r\n search: {\r\n name: \"\",\r\n users: [],\r\n dateRange: [null, null]\r\n },\r\n page: \"\",\r\n templateItem: [],\r\n action: \"\",\r\n dateRange: [null, null],\r\n screenwidth: 0,\r\n screenwidth2: 0,\r\n MadalAddUservisible: false,\r\n id: null,\r\n addusername: \"\",\r\n addpassword: \"\",\r\n addstatusacc: 1,\r\n tocreate: false,\r\n creactsubeaccount: false,\r\n admin: false,\r\n createuser: false,\r\n owner: false,\r\n password: \"\",\r\n repassword: \"\",\r\n addrepassword: \"\",\r\n uemail: \"\",\r\n emailError: false,\r\n uemailError: false,\r\n errorModalVisible: false,\r\n messageError: \"\"\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.GetUserDetail = this.GetUserDetail.bind(this);\r\n this.accountUpdate = this.accountUpdate.bind(this);\r\n this.userCreate = this.userCreate.bind(this);\r\n this.userSave = this.userSave.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.errorModal = this.errorModal.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"usercreate\") {\r\n this.setState({ action: \"\" });\r\n this.userCreate();\r\n }\r\n if (this.state.action == \"saveuser\") {\r\n this.setState({ action: \"\" });\r\n this.userSave();\r\n }\r\n this.setState({ successModalVisible: value });\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n users: state.users,\r\n dateRange: state.dateRange\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"username\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i) || value == \"\") {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n this.setState({ errorMessage: \"\" });\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n dateRange: state.dateRange\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n GetUserDetail(id) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n id: id\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserDetail', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n addstatusacc: json.status,\r\n addusername: json.username,\r\n tocreate: json.permission,\r\n uemail: json.email,\r\n uemailError: validateEmail(json.email)\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n accountUpdate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n name: this.state.accname,\r\n email: this.state.email,\r\n username: this.state.username,\r\n password: this.state.password,\r\n paytype: this.state.paytype,\r\n status: this.state.statusacc,\r\n creactsubeaccount: this.state.creactsubeaccount == 0 ? false : (this.state.creactsubeaccount == 1 ? true : this.state.creactsubeaccount),\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountUpdate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Update Account unsuccessful!\",\r\n });\r\n }\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n userCreate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n username: this.state.addusername,\r\n password: this.state.addpassword,\r\n status: this.state.addstatusacc,\r\n permission: this.state.tocreate == 0 ? false : (this.state.tocreate == 1 ? true : this.state.tocreate),\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserCreate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.onSearch();\r\n this.handleOk();\r\n\r\n this.setState({ addusername: \"\", addpassword: \"\", repassword: \"\", addstatusacc: 1, tocreate: false, usercreate: \"\" });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ addusername: \"\", addpassword: \"\", repassword: \"\", addstatusacc: 1, tocreate: false, usercreate: \"\" });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n userSave() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n userid: this.state.id,\r\n password: this.state.addpassword,\r\n status: this.state.addstatusacc,\r\n permission: this.state.tocreate == 0 ? false : (this.state.tocreate == 1 ? true : this.state.tocreate),\r\n email: this.state.uemail\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserUpdate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Update user unsuccessful!\",\r\n });\r\n }\r\n\r\n this.onSearch();\r\n this.handleOk();\r\n\r\n this.setState({ addusername: \"\", addpassword: \"\", repassword: \"\", addstatusacc: 1, tocreate: false, usercreate: \"\" });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n handleOk() {\r\n this.setState({\r\n MadalAddUservisible: false, usercreate: \"\", addrepassword: \"\", addpassword: \"\", uemail: \"\"\r\n });\r\n };\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, users, search, templateItem,\r\n action, dateRange, screenwidth, screenwidth2, accname, email, statusacc, username, paytype, MadalAddUservisible,\r\n id, addusername, addpassword, repassword, password, addstatusacc, tocreate, creactsubeaccount, admin, createuser,\r\n owner, addrepassword, uemail, emailError, uemailError, errorModalVisible, messageError } = this.state;\r\n const { accdetailId } = this.props;\r\n return (\r\n \r\n
\r\n this.setStateByProps(\"dateRange\", value)}\r\n value={dateRange}\r\n format={dateFormat} />\r\n \r\n \r\n Search\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
{text}
)\r\n },\r\n {\r\n title: 'Create Date',\r\n dataIndex: 'createdate',\r\n key: 'createdate',\r\n width: 200,\r\n render: text => ({text}
)\r\n },\r\n {\r\n title: 'Status',\r\n dataIndex: 'status',\r\n key: 'status',\r\n width: 130,\r\n render: (text, item) => {\r\n const colorEn = item.status == false ? colorGreen : \"\";\r\n const colorDis = item.status == true ? colorRed : \"\";\r\n return (\r\n { this.setStateByProps('sendId', item.key), this.setStateByProps('status', item.status), this.warningModal(true, \"Do you want to update status?\", \"Update status successfully.\"), this.setStateByProps('action', 'updatestatus') }}\r\n buttonStyle=\"solid\" size=\"small\">\r\n Disabled \r\n Enabled \r\n \r\n )\r\n }\r\n },\r\n ],\r\n pagesize: 10,\r\n currentpage: 1,\r\n startrow: 1,\r\n endrow: 10,\r\n totalpage: 0,\r\n clickId: null,\r\n owner: false,\r\n admin: false,\r\n createuser: false,\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.getData = this.getData.bind(this);\r\n this.onChangePage = this.onChangePage.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n\r\n }\r\n\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.search !== prevProps.search) {\r\n this.getData();\r\n }\r\n if (this.props.owner !== prevProps.owner) {\r\n this.setState({ owner: this.props.owner });\r\n }\r\n if (this.props.admin !== prevProps.admin) {\r\n this.setState({ admin: this.props.admin });\r\n }\r\n if (this.props.createuser !== prevProps.createuser) {\r\n this.setState({ createuser: this.props.createuser });\r\n }\r\n if (this.props.addsender !== prevProps.addsender) {\r\n this.props.setStateByProps(\"addsender\", false)\r\n this.getData();\r\n }\r\n if (this.props.accdetailId !== prevProps.accdetailId) {\r\n this.getData();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"updatestatus\") {\r\n this.setState({ action: \"\" });\r\n this.updateStatus();\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n this.setState(state => {\r\n const { search } = this.props;\r\n\r\n let req = JSON.stringify({\r\n \"id\": this.props.accdetailId.toString(),\r\n \"search\": search.name,\r\n \"startdata\": state.startrow,\r\n \"enddata\": state.endrow\r\n });\r\n\r\n apiClient.post('api/template/sendersubacc/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState(state => {\r\n return {\r\n data: json ? json.data : [],\r\n totalpage: json ? json.totalpage : 0,\r\n currentpage: state.minpage == 1 ? 1 : state.currentpage,\r\n minpage: 1\r\n };\r\n }, () => { this.props.updateWindowDimensions() });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n data: [],\r\n totalpage: 0,\r\n currentpage: 1,\r\n minpage: 1\r\n });\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n updateStatus() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n this.setState(state => {\r\n\r\n let req = JSON.stringify({\r\n \"sendId\": this.state.sendId,\r\n \"status\": !this.state.status,\r\n });\r\n\r\n apiClient.post('api/template/updatesender/', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n this.setState({ loading: false });\r\n this.getData();\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"username\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i) || value == \"\") {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n this.setState({ errorMessage: \"\" });\r\n }\r\n\r\n onChangePage(currentPage, pageSize) {\r\n var endrow = currentPage * pageSize;\r\n var startrow = endrow - pageSize + 1;\r\n\r\n this.setState(state => {\r\n return {\r\n loading: true,\r\n currentpage: state.pagesize == pageSize ? currentPage : 1,\r\n pagesize: pageSize,\r\n startrow: startrow,\r\n endrow: endrow,\r\n minpage: startrow,\r\n };\r\n });\r\n this.getData();\r\n\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, columns, data, totalpage } = this.state;\r\n const { setStateByProps, footer, templateItem, addsender, accdetailId } = this.props;\r\n return (\r\n \r\n
`${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n footer={() => footer}\r\n tableLayout=\"fixed\"\r\n />\r\n\r\n \r\n
\r\n \r\n Add\r\n \r\n {sendercheck ? \"Sender duplicate\" : \"\"} \r\n \r\n \r\n Search\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\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n this.setStateByProps(\"name\", e.target.value)}\r\n style={{ marginBottom: 10 }}\r\n />\r\n \r\n this.setStateByProps(\"dateRange\", value)}\r\n style={{ marginBottom: 10 }}\r\n value={dateRange}\r\n format={dateFormat}\r\n />\r\n \r\n \r\n Search\r\n \r\n \r\n {createaccount ? (\r\n \r\n \r\n \r\n
\r\n \r\n ) : null}\r\n
\r\n\r\n
\r\n this.setViewChangePage(e)}\r\n setCreditAccId={setCreditAccId}\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
warningModal(true)}\r\n onCancel={() => warningModal(false)}\r\n width={360}\r\n footer={[\r\n warningModal(false)}\r\n >\r\n Cancel\r\n ,\r\n {\r\n warningModal(false);\r\n onSubmit();\r\n }}\r\n >\r\n OK\r\n ,\r\n ]}\r\n >\r\n \r\n
\r\n \r\n {message} \r\n \r\n
\r\n \r\n \r\n
\r\n this.setStateByProps(\"dateRange\", value)}\r\n style={{ marginBottom: 10 }}\r\n value={dateRange}\r\n format={dateFormat} />\r\n \r\n \r\n Search\r\n \r\n \r\n {\r\n this.setStateByProps(\"MadalAddUservisible\", true),\r\n this.setState({ id: null, addusername: \"\", addpassword: \"\", addstatusacc: 1, tocreate: true, generateToken: getGenToken() === \"True\" ? true : false, twoFactor: getTwoFactor() === \"True\" ? true : false })\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.getData(value) }}\r\n onChange={(value, e) => { this.onChange(value, e) }}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.TEXT} \r\n )\r\n }\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 { Link } from 'react-router-dom';\r\nimport { Table, Divider, Tag, Icon, Button, Row, Col, Popover, Menu, Card, Affix, Empty } from 'antd';\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\nimport { token, formatNumber, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst dateFormatDateTime = 'DD/MM/YYYY HH:mm';\r\n\r\nexport default class TableCreditMovementLog extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n columns: [\r\n {\r\n title: 'Action',\r\n dataIndex: 'toAccount',\r\n key: 'toAccount',\r\n width: 150,\r\n render: (text, item) => (\r\n \r\n
\r\n {\"ADDED TO\"}\r\n :\r\n {\"REMOVED FROM\"}\r\n }\r\n \r\n {text}
\r\n \r\n
\r\n
\r\n
\r\n {text ? formatNumber(text) : 0}{\" CREDITS\"}\r\n \r\n Balance: {formatNumber(item.balanceAccTo)}
\r\n \r\n
\r\n
\r\n\r\n
`${range[0]}-${range[1]} of ${totalpage} items`,\r\n onShowSizeChange: this.onChangePage,\r\n onChange: this.onChangePage,\r\n current: this.state.currentpage\r\n }\r\n }\r\n columns={columns}\r\n dataSource={data}\r\n className=\"table-ants\"\r\n footer={() => footer}\r\n tableLayout=\"fixed\"\r\n />\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Account Name\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n Action\r\n \r\n
\r\n \r\n \r\n this.setStateByProps(\"actionCredit\", e.target.value)\r\n }\r\n value={actionCredit}\r\n buttonStyle=\"solid\"\r\n >\r\n \r\n Remove\r\n \r\n \r\n Add\r\n \r\n \r\n
\r\n \r\n \r\n {mypaytype == 1 ? (\r\n \r\n {\" \"}\r\n Amount of Credits x* {\" \"}\r\n (Credits balance{\" \"}\r\n {maxCredit ? formatNumber(maxCredit) : 0})\r\n \r\n ) : (\r\n \r\n {\" \"}\r\n Amount of Credits k* {\" \"}\r\n \r\n )}\r\n
\r\n \r\n this.setState({ amount: value })}\r\n formatter={(value) =>\r\n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\r\n }\r\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, \"\")}\r\n />\r\n
\r\n \r\n \r\n \r\n Description\r\n \r\n
\r\n \r\n {\r\n this.setStateByProps(\"remark\", e.currentTarget.value);\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.warningModal(\r\n true,\r\n \"Do you want to add credits to this account?\",\r\n \"Add credits successfully.\"\r\n ),\r\n this.setStateByProps(\"action\", \"addcredit\");\r\n }}\r\n >\r\n
\r\n \r\n
\r\n\r\n {paytype ? (\r\n \r\n \r\n \r\n {\" \"}\r\n Data Not Found{\" \"}\r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n {\" \"}\r\n Payment type : Postpaid{\" \"}\r\n \r\n \r\n \r\n )\r\n ) : errormsg !== \"\" ? (\r\n \r\n \r\n {\" \"}\r\n Data Not Found{\" \"}\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n {\" \"}\r\n Balance : {balance ? formatNumber(balance) : 0}{\" \"}\r\n CREDITS\r\n \r\n \r\n \r\n {\" \"}\r\n Payment type :{\" \"}\r\n {paytype == 1 ? \"Prepaid\" : \"Postpaid\"}{\" \"}\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 Transaction List \r\n
\r\n \r\n this.setStateByProps(\"dateRange\", value)}\r\n value={dateRange}\r\n format={dateFormat}\r\n />\r\n \r\n \r\n this.setStateByProps(\"accname\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n Search\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 Credit * \r\n \r\n }\r\n {...formItemLayout}\r\n >\r\n this.setStateByProps(\"amount\", e)}\r\n formatter={(value) =>\r\n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\r\n }\r\n />\r\n \r\n \r\n Email * \r\n \r\n }\r\n {...formItemLayout}\r\n >\r\n this.setStateByProps(\"email\", e)}\r\n >\r\n \r\n {!emailError && email != \"\" ? \"Invalid email format\" : \"\"}\r\n \r\n \r\n \r\n \r\n this.setStateByProps(\"statusconfig\", e.target.value)\r\n }\r\n buttonStyle=\"solid\"\r\n size=\"small\"\r\n >\r\n \r\n OFF\r\n \r\n \r\n ON\r\n \r\n \r\n \r\n \r\n {\r\n this.setState({\r\n warningModalOpen: true,\r\n message: \"Do you want to save this config credit?\",\r\n messageSuccess: \"Save config credit successfully.\",\r\n action: \"configcredit\",\r\n });\r\n // this.warningModal(true, \"Do you want to save this config credit?\", \"Save config credit successfully.\"),\r\n // this.setStateByProps(\"action\", \"configcredit\")\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n Button,\r\n Select,\r\n Row,\r\n Col,\r\n Form,\r\n Tooltip,\r\n Spin,\r\n} from \"antd\";\r\n\r\nimport { apiClient } from \"../../../api\";\r\nimport { root } from \"../../../config\";\r\nimport {\r\n token,\r\n validateEmail,\r\n CheckTokenExp,\r\n} from \"../../../config\";\r\nimport ModalSuccess from \"../../../components/Ants/Modal/ModalSuccess\";\r\nimport ModalWarning from \"../../../components/Ants/Modal/ModalWarning\";\r\nimport ModalWarningCustom from \"../../../components/Ants/Modal/ModalWarningCustom\";\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\nimport { tokenAuth } from \"../../../components/Ants/TooltipText/Text\";\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class TokenAuth extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n screenwidth: 0,\r\n formLayout: \"horizontal\",\r\n configCreditId: 0,\r\n tokenAuth: 'asd551d5aw1d5a16d2aw6d1awwd5a1w5d12397-7fsa=',\r\n copied: false,\r\n amount: undefined,\r\n email: [],\r\n statusconfig: 0,\r\n emailError: true,\r\n warningModalOpen: false,\r\n errorModalVisible: false,\r\n messageError: \"\",\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.reissueToken = this.reissueToken.bind(this);\r\n this.configUpdate = this.configUpdate.bind(this);\r\n this.getData = this.getData.bind(this);\r\n this.warningModalCustom = this.warningModalCustom.bind(this);\r\n this.onSubmitWarning = this.onSubmitWarning.bind(this);\r\n this.errorModal = this.errorModal.bind(this);\r\n this.copyToClipboard = this.copyToClipboard.bind(this);\r\n }\r\n\r\n copyToClipboard = () => {\r\n const text = this.state.tokenAuth;\r\n\r\n if (navigator && navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(text).then(() => {\r\n this.setState({ copied: true });\r\n setTimeout(() => {\r\n this.setState({ copied: false });\r\n }, 2000);\r\n }).catch(err => {\r\n console.error(\"Failed to copy: \", err);\r\n });\r\n } else {\r\n // Fallback to execCommand for older browsers\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n document.body.appendChild(textArea);\r\n textArea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.\r\n textArea.focus();\r\n textArea.select();\r\n\r\n try {\r\n const successful = document.execCommand('copy');\r\n if (successful) {\r\n this.setState({ copied: true });\r\n setTimeout(() => {\r\n this.setState({ copied: false });\r\n }, 2000);\r\n } else {\r\n console.error(\"Fallback: Oops, unable to copy\");\r\n }\r\n } catch (err) {\r\n console.error(\"Fallback: Oops, unable to copy\", err);\r\n }\r\n\r\n document.body.removeChild(textArea);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getData();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\r\n \"resize\",\r\n this.updateWindowDimensions.bind(this)\r\n );\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({\r\n screenwidth: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124,\r\n });\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"configcredit\") {\r\n if (this.state.configCreditId == 0) {\r\n this.setState({ action: \"\" });\r\n this.configCreate();\r\n } else {\r\n this.setState({ action: \"\" });\r\n this.configUpdate();\r\n }\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n\r\n let modalcontent = document.querySelectorAll(\r\n \".ant-modal-contentant-modal-content-hide\"\r\n );\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {}, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"email\") {\r\n this.setState({\r\n emailError: true,\r\n });\r\n if (value.length > 0) {\r\n var i;\r\n var error = true;\r\n for (i = 0; i < value.length; i++) {\r\n if (validateEmail(value[i])) {\r\n this.setState({ [parameters]: value });\r\n } else {\r\n error = false;\r\n }\r\n }\r\n if (!error) {\r\n this.setState({ emailError: false, [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n }\r\n }\r\n\r\n getData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n let req = JSON.stringify({\r\n\r\n });\r\n apiClient\r\n .post(\"api/token/getCurrentToken\", req\r\n , {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n }\r\n })\r\n .then((data) => {\r\n this.setState({\r\n tokenAuth : data.data.token\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n emailError: true,\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n reissueToken() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n\r\n });\r\n\r\n apiClient\r\n .post(\"api/token/generateTokenForApi\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data\r\n if (json.status === 200) {\r\n this.getData();\r\n this.setState({ loading: false });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n this.setState({ errorModalVisible: true, messageError: error });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n configUpdate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n configId: this.state.configCreditId,\r\n credit: this.state.amount,\r\n email: this.state.email,\r\n flag: this.state.statusconfig === 1 ? true : false,\r\n });\r\n\r\n apiClient\r\n .post(\"api/users/update\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n if (json.Status === \"error\") {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Save config credit unsuccessful!\",\r\n });\r\n } else {\r\n this.setState({ successModalVisible: true });\r\n setTimeout(() => {\r\n this.setState({ successModalVisible: false });\r\n }, 3000);\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch((error) => {\r\n this.setState({ loading: false });\r\n this.setState({ errorModalVisible: true, messageError: error });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n warningModalCustom(value) {\r\n this.setState({ warningModalOpen: value });\r\n }\r\n\r\n onSubmitWarning() {\r\n if (this.state.action === \"reissueToken\") {\r\n this.setState({ action: \"\" });\r\n this.reissueToken();\r\n }\r\n }\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n render() {\r\n const {\r\n loading,\r\n message,\r\n messageSuccess,\r\n warningModalVisible,\r\n successModalVisible,\r\n formLayout,\r\n amount,\r\n email,\r\n emailError,\r\n statusconfig,\r\n warningModalOpen,\r\n errorModalVisible,\r\n messageError\r\n } = this.state;\r\n const formItemLayout =\r\n formLayout === \"horizontal\"\r\n ? {\r\n labelCol: { span: 4 },\r\n wrapperCol: { span: 14 },\r\n }\r\n : null;\r\n const buttonItemLayout =\r\n formLayout === \"horizontal\"\r\n ? {\r\n wrapperCol: { span: 14, offset: 4 },\r\n }\r\n : null;\r\n return (\r\n \r\n
\r\n \r\n \r\n Access Token \r\n \r\n \r\n }\r\n {...formItemLayout}\r\n >\r\n \r\n
{this.state.tokenAuth}
\r\n {this.state.tokenAuth ?
\r\n {!this.state.copied && : null}\r\n
{\r\n this.setState({\r\n warningModalOpen: true,\r\n message: \"Do you want to reissue this token?\",\r\n messageSuccess: \"Reissue token successfully.\",\r\n action: \"reissueToken\",\r\n });\r\n }}\r\n >\r\n {this.state.tokenAuth ? \"Regenerate Token\" : \"Generate Token\"}\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 Limit send * \r\n \r\n }\r\n {...formItemLayout}>\r\n\r\n {\r\n this.setState({ statusconfig: e.target.value })\r\n }\r\n }\r\n buttonStyle=\"solid\"\r\n size=\"small\"\r\n >\r\n \r\n OFF\r\n \r\n \r\n ON\r\n \r\n \r\n \r\n\r\n \r\n Type * \r\n \r\n }\r\n {...formItemLayout}\r\n >\r\n { this.setState({ type: value }) }} style={{ width: \"100%\" }} value={type}>\r\n {\r\n list.map((item) =>\r\n {item.label} \r\n )\r\n }\r\n \r\n\r\n\r\n \r\n\r\n \r\n Total Limit * \r\n \r\n }\r\n {...formItemLayout}\r\n >\r\n { this.setState({ total: e }) }}\r\n formatter={(value) =>\r\n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\r\n }\r\n />\r\n \r\n {type == 2 ? \r\n Sender * \r\n \r\n }{...formItemLayout}>\r\n\r\n : null}\r\n\r\n \r\n {\r\n this.setState({\r\n warningModalOpen: true,\r\n message: \"Do you want to save this config credit?\",\r\n messageSuccess: \"Save config credit successfully.\",\r\n action: \"configcredit\",\r\n });\r\n // this.warningModal(true, \"Do you want to save this config credit?\", \"Save config credit successfully.\"),\r\n // this.setStateByProps(\"action\", \"configcredit\")\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n PageHeader, Button, Descriptions, Select, Row, Col, DatePicker,\r\n Icon, Form, Input, Card, Tooltip, Progress, Table, Divider, Tag, Modal, Tabs\r\n} from 'antd';\r\n\r\nimport ModalAddAccount from '../../../components/Ants/Modal/ModalAddAccount';\r\n\r\n\r\nimport { apiClient } from '../../../api';\r\nimport { root, getGenToken } from \"../../../config\";\r\n\r\n\r\nimport { token, validateEmail, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport Account from '../Account';\r\nimport SubAccounts from '../SubAccounts';\r\nimport Users from '../Users';\r\nimport CreditsMovement from '../CreditsMovement';\r\nimport ConfigCreditAlert from '../ConfigCreditAlert';\r\nimport TokenAuth from '../TokenAuth/TokenAuth';\r\nimport LimitSend from '../LimitSend/LimitSend';\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst { TabPane } = Tabs;\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { MonthPicker, RangePicker, WeekPicker, } = DatePicker;\r\n\r\nexport default class AccountList extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n name: \"\",\r\n search: {\r\n name: \"\",\r\n dateRange: [null, null]\r\n },\r\n page: \"\",\r\n templateItem: [],\r\n action: \"\",\r\n dateRange: [null, null],\r\n screenwidth: 0,\r\n MadalAddAccountvisible: false,\r\n accname: \"\",\r\n email: \"\",\r\n username: \"\",\r\n password: \"\",\r\n paytype: 1,\r\n addstatusacc: 1,\r\n creactsubeaccount: true,\r\n createaccount: false,\r\n type: 0,\r\n userGenToken: false,\r\n emailError: false,\r\n errorMessage: \"\",\r\n dsender: \"\",\r\n listview: \"block\",\r\n detailview: \"none\",\r\n subaccount: false,\r\n settabs: \"account\",\r\n creditaccId: undefined,\r\n creditaccName: \"\",\r\n creditmove: false,\r\n limitsend: false\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.accountCreate = this.accountCreate.bind(this);\r\n this.Getpermission = this.Getpermission.bind(this);\r\n this.callbackView = this.callbackView.bind(this);\r\n this.setCreditAccId = this.setCreditAccId.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.Getpermission();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124 })\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n if (this.state.action == \"createacc\") {\r\n this.setState({ action: \"\" });\r\n this.accountCreate();\r\n }\r\n\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n dateRange: state.dateRange\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"username\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i) || value == \"\") {\r\n this.setState({ [parameters]: value });\r\n }\r\n } else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n this.setState({ errorMessage: \"\" });\r\n }\r\n\r\n handleOk() {\r\n this.setState({\r\n MadalAddAccountvisible: false, usercreate: \"\"\r\n });\r\n };\r\n\r\n accountCreate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n name: this.state.accname,\r\n email: this.state.email,\r\n username: this.state.username,\r\n password: this.state.password,\r\n paytype: this.state.paytype,\r\n status: this.state.addstatusacc,\r\n creactsubeaccount: this.state.creactsubeaccount == 0 ? false : (this.state.creactsubeaccount == 1 ? true : this.state.creactsubeaccount),\r\n sender: this.state.dsender,\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountCreate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n if (json.resultCode == \"000\") {\r\n this.onSearch();\r\n this.handleOk();\r\n\r\n this.setState({\r\n accname: \"\", email: \"\", username: \"\", password: \"\", repassword: \"\", paytype: 1,\r\n addstatusacc: 1, creactsubeaccount: false,\r\n });\r\n } else {\r\n this.setState({\r\n errorMessage: json.message\r\n });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n accname: \"\", email: \"\", username: \"\", password: \"\", repassword: \"\", paytype: 1,\r\n addstatusacc: 1, creactsubeaccount: false,\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n Getpermission() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n\r\n });\r\n\r\n apiClient.post('api/usersmanage/Getpermission', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n admin: json.admin,\r\n createaccount: json.createaccount,\r\n owner: json.owner,\r\n createuser: json.createuser,\r\n type: json.type,\r\n userGenToken: json.userGenToken,\r\n limitsend : json.limitsend\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n admin: false,\r\n owner: false,\r\n createuser: false,\r\n createaccount: false,\r\n createuser: false,\r\n type: 0\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n callbackView(key) {\r\n this.setState({\r\n settabs: key,\r\n subaccount: !this.state.subaccount,\r\n listview: \"block\",\r\n detailview: \"none\",\r\n });\r\n }\r\n\r\n setCreditAccId(id, name) {\r\n this.setState({\r\n creditmove: !this.state.creditmove,\r\n settabs: \"creditmovement\",\r\n creditaccId: id,\r\n creditaccName: name,\r\n })\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, users, search, templateItem, action, dateRange, screenwidth,\r\n MadalAddAccountvisible, accname, email, username, password, paytype, addstatusacc, repassword, passwordcheck,\r\n creactsubeaccount, createaccount, type, emailError, errorMessage, dsender, owner, admin, createuser, userGenToken, listview, detailview, limitsend,\r\n subaccount, settabs, creditaccId, creditaccName, creditmove } = this.state;\r\n const { onGetcreditbalance } = this.props;\r\n\r\n const routes = [\r\n {\r\n path: 'accountmanagement',\r\n breadcrumbName: 'Account Management',\r\n },\r\n ];\r\n var styleinput_name = {\r\n width: (screenwidth / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_date = {\r\n width: (screenwidth / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n\r\n {userGenToken && !createaccount && !createuser && !admin ? (\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 {userGenToken && (\r\n \r\n \r\n )}\r\n\r\n {limitsend && (\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.getData(value) }}\r\n onChange={(value) => setStateByProps(statename ? statename : \"statusacc\", value)}\r\n value={select}\r\n suffixIcon={loading ? \"\" : Active \r\n Inactive \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { PageHeader, Button, Descriptions, Select, Row, Col, DatePicker, Icon, Form, Input, Card, Tooltip, Progress, Table, Divider, Tag, Modal, Checkbox, Spin } from 'antd';\r\nimport SelectStatusAccount from '../../../components/Ants/Select/SelectStatusAccount';\r\nimport SelectPayType from '../../../components/Ants/Select/SelectPayType';\r\nimport ModalAddUser from '../../../components/Ants/Modal/ModalAddUser';\r\nimport TableUsers from '../../../components/Ants/Table/TableUsers';\r\nimport { apiClient } from '../../../api';\r\nimport { root } from '../../../config';\r\n\r\nimport { token, getUrlVars, validateEmail, CheckTokenExp } from '../../../config';\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport ModalSuccess from '../../../components/Ants/Modal/ModalSuccess';\r\nimport ModalWarning from '../../../components/Ants/Modal/ModalWarning';\r\nimport ModalError from \"../../../components/Ants/Modal/ModalError\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nconst dateFormat = 'DD/MM/YYYY';\r\nconst { MonthPicker, RangePicker, WeekPicker, } = DatePicker;\r\n\r\nexport default class AccountsDetail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningModalVisible: false,\r\n successModalVisible: false,\r\n loading: false,\r\n message: \"\",\r\n messageSuccess: \"\",\r\n name: \"\",\r\n users: [],\r\n search: {\r\n name: \"\",\r\n users: [],\r\n dateRange: [null, null]\r\n },\r\n page: \"\",\r\n templateItem: [],\r\n action: \"\",\r\n dateRange: [null, null],\r\n screenwidth: 0,\r\n screenwidth2: 0,\r\n MadalAddUservisible: false,\r\n id: null,\r\n addusername: \"\",\r\n addpassword: \"\",\r\n addstatusacc: 1,\r\n tocreate: false,\r\n creactsubeaccount: false,\r\n admin: false,\r\n createuser: false,\r\n owner: false,\r\n password: \"\",\r\n repassword: \"\",\r\n addrepassword: \"\",\r\n uemail: \"\",\r\n emailError: false,\r\n uemailError: false,\r\n errorModalVisible: false,\r\n messageError: \"\"\r\n };\r\n\r\n this.warningModal = this.warningModal.bind(this);\r\n this.successModal = this.successModal.bind(this);\r\n this.modalcountDown = this.modalcountDown.bind(this);\r\n this.setStateByProps = this.setStateByProps.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n this.getAccountDetailData = this.getAccountDetailData.bind(this);\r\n this.handleOk = this.handleOk.bind(this);\r\n this.GetUserDetail = this.GetUserDetail.bind(this);\r\n this.accountUpdate = this.accountUpdate.bind(this);\r\n this.userCreate = this.userCreate.bind(this);\r\n this.userSave = this.userSave.bind(this);\r\n this.Getpermission = this.Getpermission.bind(this);\r\n this.passwordFilter = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{6,}$/\r\n this.errorModal = this.errorModal.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.Getpermission();\r\n this.getAccountDetailData();\r\n this.updateWindowDimensions();\r\n window.addEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions.bind(this));\r\n }\r\n\r\n updateWindowDimensions() {\r\n setTimeout(() => {\r\n var root = document.getElementById(\"root\");\r\n if (root) {\r\n var e = document.getElementById(\"main\");\r\n if (e) {\r\n var scroll = root.offsetHeight > window.innerHeight;\r\n this.setState({ screenwidth: scroll ? e.offsetWidth - 28 : e.offsetWidth - 28 });\r\n this.setState({ screenwidth2: scroll ? e.offsetWidth - 124 : e.offsetWidth - 124 });\r\n\r\n }\r\n }\r\n }, 500);\r\n }\r\n\r\n warningModal(value, message, messageSuccess) {\r\n this.setState({ warningModalVisible: value, message, messageSuccess });\r\n }\r\n\r\n successModal(value) {\r\n\r\n if (this.state.action == \"saveuser\") {\r\n this.setState({ action: \"\" });\r\n this.userSave();\r\n } else if (this.state.action == \"accountcreate\") {\r\n this.setState({ action: \"\" });\r\n this.accountUpdate();\r\n } else {\r\n\r\n if (this.state.action == \"usercreate\") {\r\n this.setState({ action: \"\" });\r\n this.userCreate();\r\n }\r\n\r\n if (this.state.action == \"discard\") {\r\n this.setState({ action: \"\" });\r\n value = false;\r\n this.props.history.push('/accountmanagement')\r\n }\r\n this.setState({ successModalVisible: value });\r\n }\r\n\r\n\r\n\r\n let modalcontent = document.querySelectorAll('.ant-modal-contentant-modal-content-hide');\r\n for (var i = 0; i < modalcontent.length; i++) {\r\n modalcontent[i].className = \"ant-modal-content\";\r\n }\r\n }\r\n\r\n modalcountDown() {\r\n let secondsToGo = 2;\r\n const timer = setInterval(() => {\r\n }, 1000);\r\n setTimeout(() => {\r\n clearInterval(timer);\r\n this.setState({ successModalVisible: false });\r\n }, secondsToGo * 1000);\r\n\r\n\r\n }\r\n\r\n onSearch() {\r\n this.setState(state => {\r\n return {\r\n search: {\r\n name: state.name,\r\n users: state.users,\r\n dateRange: state.dateRange\r\n }\r\n }\r\n });\r\n this.updateWindowDimensions();\r\n }\r\n\r\n setStateByProps(parameters, value) {\r\n value ? value : \"\";\r\n\r\n if (parameters == \"addusername\" && value === \"\") {\r\n if (value.match(/^[A-Za-z0-9 /./+/*/@/\\\\_-]+$/i)) {\r\n this.setState({ [parameters]: value });\r\n }\r\n }\r\n else {\r\n this.setState({ [parameters]: value });\r\n\r\n if (parameters == \"email\") {\r\n this.setState({ emailError: validateEmail(value) });\r\n } else if (parameters == \"uemail\") {\r\n this.setState({ uemailError: validateEmail(value) });\r\n }\r\n }\r\n }\r\n\r\n getAccountDetailData() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n this.setState(state => {\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountDetail', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n if (json) {\r\n this.setState(state => {\r\n return {\r\n accname: json.name,\r\n email: json.email,\r\n statusacc: json.status,\r\n username: json.username,\r\n currentpage: state.currentpage,\r\n paytype: json.pay_type,\r\n creactsubeaccount: json.creactsubeaccount,\r\n emailError: validateEmail(json.email)\r\n };\r\n });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n handleOk() {\r\n this.setState({\r\n MadalAddUservisible: false, usercreate: \"\", addrepassword: \"\", addpassword: \"\", uemail: \"\"\r\n });\r\n };\r\n\r\n GetUserDetail(id) {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n id: id\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserDetail', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n addstatusacc: json.status,\r\n addusername: json.username,\r\n tocreate: json.permission,\r\n uemail: json.email,\r\n uemailError: validateEmail(json.email)\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n accountUpdate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n name: this.state.accname,\r\n email: this.state.email,\r\n username: this.state.username,\r\n password: this.state.password,\r\n paytype: this.state.paytype,\r\n status: this.state.statusacc,\r\n creactsubeaccount: this.state.creactsubeaccount == 0 ? false : (this.state.creactsubeaccount == 1 ? true : this.state.creactsubeaccount),\r\n });\r\n\r\n apiClient.post('api/usersmanage/AccountUpdate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n \r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Update Account unsuccessful!\",\r\n });\r\n }\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n userCreate() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"],\r\n username: this.state.addusername,\r\n password: this.state.addpassword,\r\n status: this.state.addstatusacc,\r\n permission: this.state.tocreate == 0 ? false : (this.state.tocreate == 1 ? true : this.state.tocreate),\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserCreate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.onSearch();\r\n this.handleOk();\r\n\r\n this.setState({ addusername: \"\", addpassword: \"\", repassword: \"\", addstatusacc: 1, tocreate: false, usercreate: \"\" });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n userSave() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n userid: this.state.id,\r\n password: this.state.addpassword,\r\n status: this.state.addstatusacc,\r\n permission: this.state.tocreate == 0 ? false : (this.state.tocreate == 1 ? true : this.state.tocreate),\r\n email: this.state.uemail\r\n });\r\n\r\n apiClient.post('api/usersmanage/UserUpdate', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n\r\n if (data.data) {\r\n this.setState({ successModalVisible: value });\r\n } else {\r\n this.setState({\r\n errorModalVisible: true,\r\n messageError: \"Update user unsuccessful!\",\r\n });\r\n }\r\n\r\n this.onSearch();\r\n this.handleOk();\r\n\r\n this.setState({ addusername: \"\", addpassword: \"\", repassword: \"\", addstatusacc: 1, tocreate: false, usercreate: \"\" });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n Getpermission() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n\r\n let req = JSON.stringify({\r\n accountId: getUrlVars()[\"id\"]\r\n });\r\n\r\n apiClient.post('api/usersmanage/Getpermission', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n\r\n this.setState({\r\n admin: json.admin,\r\n createuser: json.createuser,\r\n owner: json.owner,\r\n });\r\n\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n admin: false,\r\n createuser: false,\r\n owner: false,\r\n });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n errorModal(value) {\r\n this.setState({ errorModalVisible: value });\r\n }\r\n\r\n render() {\r\n const { loading, message, messageSuccess, warningModalVisible, successModalVisible, users, search, templateItem,\r\n action, dateRange, screenwidth, screenwidth2, accname, email, statusacc, username, paytype, MadalAddUservisible,\r\n id, addusername, addpassword, repassword, password, addstatusacc, tocreate, creactsubeaccount, admin, createuser,\r\n owner, addrepassword, uemail, emailError, uemailError, errorModalVisible, messageError } = this.state;\r\n const routes = [\r\n {\r\n path: 'accountmanagement',\r\n breadcrumbName: 'Account Management',\r\n },\r\n {\r\n path: 'accountmanagement/userList',\r\n breadcrumbName: 'Account Detail',\r\n },\r\n ];\r\n var styleinput = {\r\n width: (screenwidth / 4),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var stylelabel = {\r\n width: (screenwidth / 4),\r\n marginRight: 8,\r\n minWidth: 200,\r\n fontWeight: 700\r\n };\r\n var styleinput2 = {\r\n width: ((screenwidth / 3) - 216),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_name = {\r\n width: (screenwidth2 / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n var styleinput_date = {\r\n width: (screenwidth2 / 2),\r\n marginRight: 8,\r\n marginBottom: 8,\r\n minWidth: 200\r\n };\r\n return (\r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n \r\n \r\n Account name \r\n Email* {!emailError && email != \"\" ? \"Invalid email format\" : \"\"} \r\n Payment type \r\n Status \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n\r\n \r\n Username \r\n Password \r\n Re-type password \r\n 5 && password === repassword) ? 'none' : 'initial' }}>{\r\n password ?\r\n password.length > 5 ?\r\n password === repassword ? \"\"\r\n : \"Passwords do not match\"\r\n : \"The password must be at least 6 characters long.\"\r\n : \"\"\r\n } \r\n \r\n
\r\n\r\n \r\n {\r\n admin ? this.setStateByProps(\"password\", e.currentTarget.value) : null\r\n }} />\r\n\r\n { admin ? this.setStateByProps(\"repassword\", e.target.value) : null }} />\r\n\r\n { admin ? owner ? null : this.setStateByProps(\"creactsubeaccount\", e.target.checked) : null }}>Create sub account \r\n\r\n \r\n {\r\n admin ?\r\n 5 ? password === repassword ? true : false : false : true) ? false : true}\r\n onClick={() => { this.warningModal(true, \"Do you want to save this account?\", \"Save account successfully.\"), this.setStateByProps('action', 'accountcreate') }}>\r\n \r\n : null\r\n }\r\n {\r\n admin ?\r\n\r\n { this.warningModal(true, \"Do you want to discard change?\", \"Discarded change successfully.\"), this.setState({ action: \"discard\" }) }}>\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 owner && (admin || createuser) ?\r\n \r\n \r\n {\r\n this.setStateByProps(\"MadalAddUservisible\", true),\r\n this.setState({ id: null, addusername: \"\", addpassword: \"\", addstatusacc: 1, tocreate: false })\r\n }}>\r\n \r\n
\r\n \r\n
\r\n : null\r\n\r\n }\r\n\r\n \r\n this.setStateByProps(\"dateRange\", value)}\r\n value={dateRange}\r\n format={dateFormat} />\r\n\r\n \r\n Search\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 \r\n \r\n \r\n Account Name \r\n\r\n Action \r\n\r\n {\r\n mypaytype == 1 ?\r\n Amount of Credits d* (Credits balance {maxCredit ? formatNumber(maxCredit) : 0}) \r\n :\r\n Amount of Credits s* \r\n }\r\n\r\n Description \r\n
\r\n \r\n
\r\n\r\n \r\n this.setStateByProps(\"actionCredit\", e.target.value)}\r\n value={actionCredit} style={styleinput3} buttonStyle=\"solid\">\r\n Remove \r\n Add \r\n \r\n\r\n this.setStateByProps(\"amount\", e)}\r\n formatter={value => `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\r\n />\r\n\r\n\r\n { this.warningModal(true, \"Do you want to add credits to this account?\", \"Add credits successfully.\"), this.setStateByProps('action', 'addcredit') }}>\r\n \r\n\r\n \r\n
\r\n\r\n\r\n {\r\n paytype ?\r\n \r\n \r\n Data Not Found \r\n \r\n
\r\n :\r\n \r\n Payment type : Postpaid \r\n \r\n
\r\n :\r\n errormsg !== \"\" ?\r\n \r\n Data Not Found \r\n \r\n
\r\n :\r\n \r\n Balance : {balance ? formatNumber(balance) : 0} CREDITS \r\n \r\n Payment type : {paytype == 1 ? \"Prepaid\" : \"Postpaid\"} \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 Transaction List \r\n
\r\n \r\n this.setStateByProps(\"dateRange\", value)}\r\n value={dateRange}\r\n format={dateFormat} />\r\n\r\n \r\n Search\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
click \r\n
{this.setState({Message:e.target.value})}} />\r\n {num}\r\n {this.state.Message}\r\n
\r\n Demo Trial \r\n Free
\r\n \r\n
\r\n
\r\n
\r\n {formatCurrency(obj.Package_Creditstart)} Messages\r\n \r\n
\r\n
\r\n
\r\n
\r\n {obj.PackagePrice_per_credit} THB/Message\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {obj.Package_Sender} Sender Name\r\n \r\n
\r\n
\r\n
\r\n
\r\n {formatCurrency(obj.Package_People)} Maximum people\r\n \r\n
\r\n
\r\n {\r\n ClearCookie();\r\n let pid =\r\n obj.PackageId + \"|\" + obj.Package_Creditstart;\r\n onClickToPage(pid, obj.PackageType);\r\n }}\r\n >\r\n \r\n Start Free Trial\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {\r\n Card, Col, Row,\r\n} from \"reactstrap\";\r\nimport ClockGray from \"../../../../img/clock(gray).svg\"\r\nimport LetterGray from \"../../../../img/letter(gray).svg\"\r\nimport WriteGray from \"../../../../img/write(gray).svg\"\r\n\r\nexport default function CardNormal({ obj, onClickToPage, calculateCredit, profile }) {\r\n return (\r\n \r\n {obj.PackageName} \r\n \r\n
\r\n \r\n {profile.isNewCustomer == 0 ? calculateCredit(obj.Packagetotal_price) : obj.PackagePrice_per_credit}\r\n \r\n {profile.isNewCustomer == 0 ? \"Credit\" : \"THB/SMS\"} \r\n
\r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
\r\n {(obj.Packagetotal_price)\r\n .toFixed(2)\r\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
฿ \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Credit period\r\n \r\n
\r\n
\r\n
\r\n Report period\r\n \r\n
\r\n
\r\n
\r\n SMS Qty\r\n \r\n
\r\n
\r\n
\r\n Sender name\r\n \r\n
\r\n \r\n {obj.Package_Packageexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Package_Reportexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Packagetotal_message.toFixed(0).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
\r\n \r\n \r\n {obj.Package_Sender === 0 ? \"Unlimited\" : obj.Package_Sender}\r\n \r\n
\r\n \r\n
\r\n
\r\n {\r\n let pid = obj.PackageId + \"|\" + obj.Packagetotal_price;\r\n onClickToPage(pid, obj.PackageType);\r\n }}\r\n >\r\n Buy now \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {\r\n Card, Col, Row,\r\n} from \"reactstrap\";\r\nimport ClockWhite from \"../../../../img/clock(white).svg\"\r\nimport LetterWhite from \"../../../../img/letter(white).svg\"\r\n\r\nexport default function CardRecommend({ obj, onClickToPage, calculateCredit, profile }) {\r\n return (\r\n \r\n
\r\n
\r\n Recommend\r\n \r\n \r\n
\r\n {obj.PackageName} \r\n \r\n
\r\n \r\n {profile.isNewCustomer == 0 ? calculateCredit(obj.Packagetotal_price) : obj.PackagePrice_per_credit}\r\n \r\n {profile.isNewCustomer == 0 ? \"Credit\" : \"THB/SMS\"} \r\n
\r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
\r\n {(obj.Packagetotal_price)\r\n .toFixed(2)\r\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n ฿\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Credit period\r\n \r\n
\r\n
\r\n
\r\n Report period\r\n \r\n
\r\n
\r\n
\r\n SMS Qty\r\n \r\n
\r\n
\r\n
\r\n Sender name\r\n \r\n
\r\n \r\n {obj.Package_Packageexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Package_Reportexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Packagetotal_message.toFixed(0).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
\r\n \r\n \r\n {obj.Package_Sender === 0 ? \"Unlimited\" : obj.Package_Sender}\r\n \r\n
\r\n \r\n
\r\n
\r\n {\r\n let pid =\r\n obj.PackageId + \"|\" + obj.Packagetotal_price;\r\n onClickToPage(pid, obj.PackageType);\r\n }}\r\n >\r\n Buy now \r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n Custom Package \r\n \r\n
\r\n
\r\n
\r\n or \r\n
\r\n
\r\n Enter the number of credit you want. \r\n
\r\n
\r\n \r\n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\r\n }\r\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, \"\")}\r\n value={model.inputValue}\r\n onChange={onChangeInputCredit}\r\n />\r\n
\r\n
\r\n Price \r\n \r\n `${value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}`\r\n }\r\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, \"\")}\r\n value={model.price}\r\n onChange={onChangeInputPrice}\r\n />\r\n ฿ \r\n
\r\n
\r\n \r\n Cancle \r\n \r\n \r\n Buy now \r\n \r\n
\r\n
\r\n
\r\n
\r\n Custom \r\n \r\n
\r\n \r\n Custom Your Package\r\n \r\n
\r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
\r\n By credit amount\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Credit period\r\n \r\n
\r\n
\r\n
\r\n Report period\r\n \r\n
\r\n
\r\n
\r\n SMS Qty\r\n \r\n
\r\n
\r\n
\r\n Sender name\r\n \r\n
\r\n \r\n 12 Month\r\n \r\n
\r\n \r\n \r\n 6 Month\r\n \r\n
\r\n \r\n \r\n 10,000\r\n \r\n
\r\n \r\n \r\n 10\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n Custom\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n How many SMS do you plan to send?\r\n \r\n \r\n
\r\n \r\n {data && data.length > 0 &&\r\n data.map((obj, index) => {\r\n if (obj.PackageType === 2) {\r\n return \r\n
\r\n // {row.province_name}\r\n // \r\n // )),\r\n // });\r\n // !!------------------ เปลี่ยนเป็น free text ------------------!!\r\n this.getTaxinfos();\r\n this.getClientInfo();\r\n this.getOrderDetail();\r\n }\r\n\r\n getClientInfo() {\r\n urlClientInfo\r\n .get(\"\", {\r\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" },\r\n })\r\n .then((response) => {\r\n this.setState({\r\n clientInfo: {\r\n ipString: response.data.ipString,\r\n userAgent: response.data.userAgent,\r\n },\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ clientInfo: \"\" });\r\n });\r\n }\r\n\r\n getTaxinfos() {\r\n this.setState({\r\n loadingAll: true,\r\n });\r\n\r\n if (CheckTokenExp()) {\r\n window.location.href = \"/logout\";\r\n }\r\n\r\n let req = null;\r\n\r\n apiClient\r\n .post(\"api/Ecom/getTaxinfos\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((response) => {\r\n if (response.data.status == 999) {\r\n return;\r\n }\r\n\r\n if (response.data.status == 200 && response.data.taxinfos.length != 0) {\r\n this.setState({\r\n taxInfoList: response.data.taxinfos,\r\n showDefault: true,\r\n showtaxinvoice: false,\r\n new_taxvoice: false,\r\n taxvoice_id: response.data.taxinfos[0].id,\r\n typetax: response.data.taxinfos[0].type,\r\n name: response.data.taxinfos[0].name,\r\n mobile: response.data.taxinfos[0].mobile,\r\n branch: response.data.taxinfos[0].branch,\r\n idcard: response.data.taxinfos[0].id_card,\r\n address: response.data.taxinfos[0].address,\r\n province: response.data.taxinfos[0].province,\r\n district: response.data.taxinfos[0].district,\r\n subdistrict: response.data.taxinfos[0].subdistrict,\r\n post: response.data.taxinfos[0].post,\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n notification.open({\r\n message: \"There is an error while trying to get Tax info data. \",\r\n description: \"Please try again later\",\r\n top: 60,\r\n className: \"rti_form\",\r\n });\r\n })\r\n .finally((data) => {\r\n this.setState({\r\n loadingAll: false,\r\n });\r\n });\r\n }\r\n\r\n async saveNewTaxinfo() {\r\n let req = JSON.stringify({\r\n OrderId: this.state.order_id,\r\n Taxinvoice: {\r\n taxvoice_id: this.state.taxvoice_id,\r\n type: this.state.typetax,\r\n name: this.state.name,\r\n mobile: this.state.mobile,\r\n idcard: this.state.idcard,\r\n address: this.state.address,\r\n branch: this.state.branch,\r\n province: this.state.province,\r\n district: this.state.district,\r\n subdistrict: this.state.subdistrict,\r\n post: this.state.post,\r\n new_taxvoice: this.state.new_taxvoice,\r\n savedefault: this.state.savedefault,\r\n }\r\n });\r\n let result = false\r\n await apiClient\r\n .post(\"api/Ecom/SaveTaxInvoiceByOderId\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((response) => {\r\n notification.open({\r\n message: \"Tax info saved\",\r\n description: \"Your tax info will appeared on top in 3 second\",\r\n top: 60,\r\n className: \"rti_form g\",\r\n duration: 3,\r\n });\r\n result = true\r\n })\r\n .catch((error) => {\r\n notification.open({\r\n message: \"Error\",\r\n description: error,\r\n top: 60,\r\n className: \"rti_form r\",\r\n });\r\n })\r\n return result\r\n }\r\n\r\n async getOrderDetail() {\r\n const pid = queryString.parse(this.props.location.search).pid\r\n\r\n const response = await TranserctionService.createOrFindOrder(pid)\r\n\r\n if (response.data.status == TransectionErrorType.ERROR) {\r\n this.redirecttopackagelist();\r\n } else if (response.message !== null) {\r\n this.setState({\r\n statusmessage: response.message.message,\r\n statusdescription: response.message.description,\r\n statusred: true,\r\n });\r\n } else {\r\n this.setState({\r\n order_id: response.data.order.id,\r\n order_invoice_id: response.data.order.invoice_no,\r\n packagename: response.data.order.package.PKG_NAME,\r\n packagecost: response.data.order.package.PKG_COST_INFO.PKGC_PRICE,\r\n packagedetail: response.data.order.package.PKG_DETAIL,\r\n packageid: response.data.order.package.PKG_ID,\r\n packagevat: response.data.order.package.PKG_VAT,\r\n packagecostwithvat: response.data.order.package.PKG_COST_INFO.PKGC_NET_PRICE,\r\n loading: false,\r\n });\r\n }\r\n }\r\n\r\n async CreateCharge(source, type) {\r\n const self = this\r\n const payload = {\r\n oid: self.state.order_id,\r\n source: source,\r\n types: type,\r\n urlRedirect: window.location.origin, // get only domain\r\n OrderId: this.state.order_id,\r\n Taxinvoice: {\r\n taxvoice_id: this.state.taxvoice_id,\r\n type: this.state.typetax,\r\n name: this.state.name,\r\n mobile: this.state.mobile,\r\n idcard: this.state.idcard,\r\n address: this.state.address,\r\n branch: this.state.branch,\r\n province: this.state.province,\r\n district: this.state.district,\r\n subdistrict: this.state.subdistrict,\r\n post: this.state.post,\r\n new_taxvoice: this.state.new_taxvoice,\r\n savedefault: this.state.savedefault,\r\n },\r\n client: this.state.clientInfo,\r\n };\r\n\r\n const saveTax = await self.saveNewTaxinfo()\r\n if (!saveTax) {\r\n return\r\n }\r\n\r\n if (self.state.keydiscount) {\r\n self.setDiscountSession()\r\n\r\n self.setState({\r\n discountlist: {\r\n netprice: self.state.packagecostwithvat,\r\n discountname: self.state.namediscount,\r\n discountamounttype: self.state.amounttypediscount,\r\n discountvalue: self.state.valuediscount,\r\n discounttype: self.state.typediscount,\r\n discountprice: self.state.packagediscount,\r\n discountcode: self.state.codediscount,\r\n discountkey: self.state.keydiscount,\r\n },\r\n });\r\n payload.discount = self.state.discountlist\r\n }\r\n\r\n const req = JSON.stringify(payload)\r\n\r\n const response = await TranserctionService.createCharge(req)\r\n\r\n if (response.data.status === TransectionErrorType.SUCCESS) {\r\n window.location = response.data.redirect;\r\n } else if (response.data.status !== TransectionErrorType.SUCCESS) {\r\n notification.open({\r\n message: String(response.data.message).replace(\"_\", \" \"),\r\n description: response.data.description,\r\n top: 60,\r\n className: \"rti_form r\",\r\n duration: 10,\r\n onClose: () => { },\r\n });\r\n self.getOrderDetail();\r\n } else if (response.message !== null) {\r\n self.setState({\r\n statusmessage: response.message.message,\r\n statusdescription: response.message.description,\r\n });\r\n }\r\n }\r\n\r\n ProcessCreditcardPayment(chargetoken) {\r\n this.setState({\r\n taxinfo: {\r\n taxvoice_id: this.state.taxvoice_id,\r\n type: this.state.typetax,\r\n name: this.state.name,\r\n mobile: this.state.mobile,\r\n idcard: this.state.idcard,\r\n address: this.state.address,\r\n branch: this.state.branch,\r\n province: this.state.province,\r\n district: this.state.district,\r\n subdistrict: this.state.subdistrict,\r\n post: this.state.post,\r\n new_taxvoice: this.state.new_taxvoice,\r\n savedefault: this.state.savedefault,\r\n },\r\n });\r\n\r\n let req = \"\";\r\n if (this.state.keydiscount) {\r\n this.setState({\r\n discountlist: {\r\n netprice: this.state.packagecostwithvat,\r\n discountname: this.state.namediscount,\r\n discountamounttype: this.state.amounttypediscount,\r\n discountvalue: this.state.valuediscount,\r\n discounttype: this.state.typediscount,\r\n discountprice: this.state.packagediscount,\r\n discountcode: this.state.codediscount,\r\n discountkey: this.state.keydiscount,\r\n },\r\n });\r\n\r\n req = JSON.stringify({\r\n oid: this.state.order_id,\r\n token: chargetoken,\r\n client: this.state.clientInfo,\r\n TaxInfo: this.state.taxinfo,\r\n discount: this.state.discountlist,\r\n });\r\n } else {\r\n req = JSON.stringify({\r\n oid: this.state.order_id,\r\n token: chargetoken,\r\n client: this.state.clientInfo,\r\n TaxInfo: this.state.taxinfo,\r\n });\r\n }\r\n\r\n apiClient\r\n .post(\"api/ecom/processcreditcardpayment\", req, {\r\n headers: {\r\n Authorization: `Bearer ${token} `,\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((response) => {\r\n if (response.data.status != 300) {\r\n if (\r\n response.data.status == 802 ||\r\n response.data.status == 803 ||\r\n response.data.status == 804 ||\r\n response.data.status == 805\r\n ) {\r\n this.setState({\r\n statusmessage: response.data.message,\r\n statusdescription: response.data.description,\r\n });\r\n this.setLoading(false);\r\n } else {\r\n notification.open({\r\n message: String(response.data.message).replace(\"_\", \" \"),\r\n description: response.data.description,\r\n top: 60,\r\n className: \"rti_form r\",\r\n duration: 10,\r\n onClose: () => { },\r\n });\r\n this.getOrderDetail();\r\n }\r\n } else if (response.data.status == 300) {\r\n this.props.history.push(\"/OrderSummary?rid=\" + response.data.rid);\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n statusmessage:\r\n error.message +\r\n \". \" +\r\n \"If your card have been charged please contact support with order invoice id : \" +\r\n this.state.order_invoice_id,\r\n statusdescription: error.description,\r\n statusred: true,\r\n });\r\n });\r\n }\r\n\r\n Discount() {\r\n this.setState({ checkSubmit: true });\r\n if (!CheckTokenExp()) {\r\n var code = this.state.codediscount;\r\n if (code) {\r\n this.setState({ loadingDiscount: true });\r\n\r\n apiClient\r\n .get(\"api/Ecom/Discount/\" + code, {\r\n headers: {\r\n \"Content-type\": \"application/json; charset=UTF-8\",\r\n },\r\n })\r\n .then((data) => {\r\n var json = data.data;\r\n\r\n if (json.canUsed != 1 && json.isExpire != 0) {\r\n this.setState({ canUsed: false });\r\n this.setState({ messagediscount: \"Discount code can't used\" });\r\n } else {\r\n this.setState({ keydiscount: json.key });\r\n this.setState({ canUsed: true });\r\n this.setState({ statusdiscount: true });\r\n this.setState({ namediscount: json.name });\r\n this.setState({ amounttypediscount: json.discountAmountType });\r\n this.setState({ valuediscount: json.dicount });\r\n this.setState({ typediscount: json.discountType });\r\n this.setState({ messagediscount: \"\" });\r\n if (json.discountAmountType == \"PERCENT\") {\r\n this.setState({\r\n discountpercent_text:\r\n \"Discount\" + \" (\" + json.dicount + \"%\" + \")\",\r\n });\r\n this.setState({\r\n packagediscount:\r\n (this.state.packagecost * json.dicount) / 100,\r\n });\r\n var packagecostwithvat_val =\r\n this.state.packagecost -\r\n this.state.packagediscount +\r\n this.state.packagevat;\r\n this.setState({\r\n packagecostwithvat: packagecostwithvat_val,\r\n });\r\n } else {\r\n this.setState({ discountpercent_text: \"Discount\" });\r\n this.setState({ packagediscount: json.dicount });\r\n this.setState({\r\n packagecostwithvat:\r\n this.state.packagecost -\r\n this.state.packagediscount +\r\n this.state.packagevat,\r\n });\r\n }\r\n }\r\n\r\n this.setState({\r\n discount: json.dicount,\r\n discountamounttype: json.discountAmountType,\r\n });\r\n\r\n this.setState({ loadingDiscount: false });\r\n })\r\n .catch((error) => { });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n // ------------------- Session Tools ------------------- //\r\n\r\n setDiscountSession() {\r\n sessionStorage.setItem(\r\n \"discount\",\r\n JSON.stringify({\r\n netprice: this.state.packagecostwithvat,\r\n discountname: this.state.namediscount,\r\n discountamounttype: this.state.amounttypediscount,\r\n discountvalue: this.state.valuediscount,\r\n discounttype: this.state.typediscount,\r\n discountprice: this.state.packagediscount,\r\n discountcode: this.state.codediscount,\r\n discountkey: this.state.keydiscount,\r\n })\r\n );\r\n }\r\n\r\n setTaxinfoSession() {\r\n sessionStorage.setItem(\r\n \"taxinfo\",\r\n JSON.stringify({\r\n taxvoice_id: this.state.taxvoice_id,\r\n type: this.state.typetax,\r\n name: this.state.name,\r\n mobile: this.state.mobile,\r\n idcard: this.state.idcard,\r\n address: this.state.address,\r\n branch: this.state.branch,\r\n province: this.state.province,\r\n district: this.state.district,\r\n subdistrict: this.state.subdistrict,\r\n post: this.state.post,\r\n new_taxvoice: this.state.new_taxvoice,\r\n savedefault: this.state.savedefault,\r\n })\r\n );\r\n }\r\n\r\n // ------------------- Hadnle Tools ------------------- //\r\n handleChange(e) {\r\n if (e.target.name === \"codediscount\") {\r\n this.setState({ checkSubmit: false });\r\n }\r\n this.setState({ [e.target.name]: e.target.value.trim() });\r\n }\r\n\r\n handleChangeInput(name, value) {\r\n this.setState({ [name]: value, messageCheckPayment: \"\", errormessage: \"\" })\r\n }\r\n\r\n handleErrorMessage(message) {\r\n this.setState({ errormessage: message });\r\n }\r\n\r\n redirecttopackagelist() {\r\n window.location.href = packagelistPage;\r\n }\r\n\r\n setLoading(loading) {\r\n this.setState({ loading: loading });\r\n }\r\n\r\n setMessage(message, description = null, isred = false) {\r\n this.setState({\r\n statusmessage: message,\r\n statusdescription: description,\r\n statusred: isred,\r\n });\r\n }\r\n\r\n setUrl(url) {\r\n this.props.history.push(url);\r\n }\r\n\r\n setType(e) {\r\n document.getElementById(\"typeitext\").style.color = \"rgba(0, 0, 0, 0.65)\";\r\n document.getElementById(\"typectext\").style.color = \"rgba(0, 0, 0, 0.65)\";\r\n this.setState({\r\n type: e.target.value,\r\n branch: null,\r\n });\r\n }\r\n\r\n setShowCreateInput() {\r\n this.setState({ showCreateInput: !this.state.showCreateInput });\r\n }\r\n\r\n CheckBtnPayment(message) {\r\n this.setState({ loading: true });\r\n this.setState({ messageCheckPayment: message });\r\n }\r\n\r\n CorporateRequired() {\r\n if (this.state.typetax === 2) {\r\n return * ;\r\n } else {\r\n return <>;\r\n }\r\n }\r\n\r\n onChangeCheckbox(e) {\r\n const value = e.target.checked\r\n this.setState({ savedefault: value });\r\n }\r\n\r\n render() {\r\n let {\r\n packagename,\r\n packagecost,\r\n packagedetail,\r\n packagevat,\r\n packagecostwithvat,\r\n loading,\r\n taxInfoList,\r\n showDefault,\r\n showtaxinvoice,\r\n packagediscount,\r\n codediscount,\r\n statusdiscount,\r\n messagediscount,\r\n order_invoice_id,\r\n statusmessage,\r\n statusdescription,\r\n statusred,\r\n typetax,\r\n type,\r\n name,\r\n branch,\r\n idcard,\r\n address,\r\n province,\r\n district,\r\n subdistrict,\r\n post,\r\n mobile,\r\n list_districts,\r\n list_subdistricts,\r\n discountpercent_text,\r\n discountamounttype,\r\n paymenttype,\r\n district_placeholder,\r\n subdistrict_placeholder,\r\n savedefault,\r\n new_taxvoice,\r\n canUsed,\r\n checkSubmit,\r\n loadingDiscount,\r\n messageCheckPayment,\r\n } = this.state;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {loadingDiscount ? (\r\n \r\n \r\n \r\n \r\n
\r\n {statusdescription != \"\" && statusdescription != null ? (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
Your Selected Package \r\n
\r\n \r\n \r\n {packagename + \"-\" + packagedetail}\r\n
\r\n \r\n this.props.history.push(\"PackageList\")}\r\n >\r\n Change{\">\"}\r\n
\r\n \r\n {canUsed ? (\r\n this.Discount()}>Submit \r\n
\r\n \r\n \r\n Subtotal \r\n {discountpercent_text} \r\n VAT 7% \r\n \r\n NET AMOUNT\r\n \r\n
\r\n \r\n \r\n {formatCurrency(parseFloat(packagecost).toFixed(2)) +\r\n \" Baht\"}\r\n \r\n \r\n {statusdiscount == true ? (\r\n \r\n -{\" \"}\r\n {discountamounttype != \"PERCENT\"\r\n ? formatCurrency(\r\n parseFloat(packagediscount).toFixed(2)\r\n )\r\n : formatCurrency(\r\n parseFloat(packagediscount).toFixed(2)\r\n )}\r\n \r\n ) : (\r\n \r\n {discountamounttype != \"PERCENT\"\r\n ? formatCurrency(\r\n parseFloat(packagediscount).toFixed(2)\r\n )\r\n : formatCurrency(\r\n parseFloat(packagediscount).toFixed(2)\r\n )}\r\n \r\n )}\r\n Baht\r\n \r\n \r\n {formatCurrency(parseFloat(packagevat).toFixed(2)) +\r\n \" Baht\"}\r\n \r\n \r\n {formatCurrency(\r\n parseFloat(packagecostwithvat).toFixed(2)\r\n ) + \" Baht\"}\r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Payment Method\r\n \r\n\r\n this.setState({ paymenttype: e.target.value })} value={paymenttype}>\r\n \r\n {/* ------------ Credit/ Debit Card ------------ */}\r\n {/* \r\n \r\n \r\n
Credit/ Debit Card
\r\n
\r\n
\r\n \r\n */}\r\n {/* ------------ Internet Banking ------------ */}\r\n {/* \r\n \r\n \r\n
Internet Banking
\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 {showDefault && (\r\n \r\n \r\n \r\n {taxInfoList.map((row) => (\r\n \r\n \r\n Default Tax Invoice \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Type\r\n {\" \"}\r\n :{\" \"}\r\n {row.type == 1\r\n ? \"Individual\"\r\n : \"Corporate\"}\r\n \r\n \r\n ID card/ Tax id number\r\n {\" \"}\r\n : {row.id_card}\r\n \r\n \r\n \r\n
\r\n Contact Name\r\n {\" \"}\r\n : {row.name}\r\n \r\n \r\n \r\n
\r\n Branch\r\n {\" \"}\r\n : {row.branch != \"\" ? row.branch : \"-\"}\r\n \r\n \r\n Mobile\r\n {\" \"}\r\n : {row.mobile}\r\n \r\n \r\n \r\n
\r\n Address\r\n {\" \"}\r\n : {row.address} {row.subdistrict}{\" \"}\r\n {row.district} {row.province} {row.post}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n or \r\n \r\n this.setState({\r\n showtaxinvoice: true,\r\n new_taxvoice: false,\r\n })\r\n }\r\n style={{\r\n color: \"#097FF5\",\r\n fontWeight: 700,\r\n cursor: \"pointer\",\r\n }}\r\n >\r\n Edit Tax invoice\r\n \r\n \r\n
\r\n \r\n ))}\r\n
\r\n \r\n \r\n )}\r\n {showtaxinvoice && (\r\n \r\n \r\n Tax Invoice \r\n \r\n *{messageCheckPayment}\r\n
\r\n )}\r\n \r\n this.handleChangeInput(\"typetax\", e.target.value)\r\n }\r\n value={typetax}\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 Contact Name* \r\n \r\n \r\n this.handleChangeInput(\"name\", e.target.value)\r\n }\r\n />\r\n \r\n {typetax === 2 && (\r\n \r\n Branch* \r\n \r\n \r\n this.handleChangeInput(\"branch\", e.target.value)\r\n }\r\n />\r\n \r\n )}\r\n \r\n Mobile* \r\n \r\n \r\n this.handleChangeInput(\"mobile\", e.target.value.replace(/[^\\d]/g, \"\"))\r\n }\r\n />\r\n \r\n \r\n ID Card/Tax ID Number\r\n * \r\n \r\n \r\n this.handleChangeInput(\"idcard\", e.target.value.replace(/[^\\d]/g, \"\"))\r\n }\r\n />\r\n \r\n \r\n Address\r\n {typetax === 2 && (\r\n * \r\n )}\r\n \r\n \r\n this.handleChangeInput(\"address\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n Province{this.CorporateRequired()}\r\n \r\n \r\n this.handleChangeInput(\"province\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n District{this.CorporateRequired()}\r\n \r\n \r\n this.handleChangeInput(\"district\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n Subdistrict{this.CorporateRequired()}\r\n \r\n \r\n this.handleChangeInput(\"subdistrict\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n Postal code{this.CorporateRequired()}\r\n \r\n \r\n this.handleChangeInput(\"post\", e.target.value)\r\n }\r\n />\r\n \r\n \r\n Save as Default\r\n \r\n \r\n {(showtaxinvoice && !new_taxvoice) && (\r\n \r\n this.setState({\r\n showtaxinvoice: false,\r\n showDefault: true,\r\n })\r\n }\r\n >\r\n Cancel\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 RequestTaxInfo;\r\n","import React from \"react\";\r\nimport { Modal, Radio, Upload, Icon } from \"antd\";\r\n\r\nconst { Dragger } = Upload;\r\n\r\nexport default function Signature(props) {\r\n const handleOk = () => {\r\n props.setVisible(false);\r\n };\r\n\r\n const handleCancel = () => {\r\n props.setVisible(false);\r\n };\r\n\r\n const beforeUploadFile = (file) => {\r\n console.log(file);\r\n props.changeFile([file], props.fileName);\r\n return false;\r\n };\r\n\r\n const onRemove = (file, fileList) => {\r\n props.changeFile(null, props.fileName);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n Draw\r\n \r\n \r\n Type\r\n \r\n Upload \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
Drag and drop here (.jpg .png)
\r\n
or
\r\n
Browse
\r\n
\r\n \r\n \r\n );\r\n}\r\n","import React, { useState } from \"react\";\r\nimport {\r\n Row,\r\n Col,\r\n Input,\r\n Tooltip,\r\n Icon,\r\n Divider,\r\n Checkbox,\r\n Button,\r\n Upload,\r\n // message,\r\n} from \"antd\";\r\nimport Signature from \"./Signature\";\r\n// import { getFileExtension } from \"../../../config\";\r\n\r\nconst { Dragger } = Upload;\r\nconst { TextArea } = Input;\r\n\r\nexport default function Individual(props) {\r\n const [visible, setVisible] = useState(false);\r\n\r\n const beforeUploadFile = (file) => {\r\n console.log(file);\r\n // const isLt2M = file.size / 1024 / 1024 < 2;\r\n // if (!isLt2M) {\r\n // message.error(\"Image must smaller than 2MB!\");\r\n // }\r\n // if (\r\n // getFileExtension(file.name) !== \"jpg\" ||\r\n // getFileExtension(file.name) !== \"png\"\r\n // ) {\r\n // console.log(\"test check file name\");\r\n // Modal.error({\r\n // title: \"The file format is incorrect.\",\r\n // className: \"popup-error\",\r\n // content: (\r\n // \r\n //
Check and upload the file again.
\r\n //
\r\n \r\n Request Information\r\n \r\n \r\n \r\n First Name * \r\n props.handleChangeInput(e, \"RSD_FIRST_NAME\")}\r\n />\r\n \r\n Last Name * \r\n props.handleChangeInput(e, \"RSD_LAST_NAME\")}\r\n />\r\n \r\n E-mail * \r\n props.handleChangeInput(e, \"RSD_EMAIL\")}\r\n />\r\n \r\n Contact Number * \r\n \r\n props.handleChangeInput(e, \"RSD_CONTACT_NUMBER\")\r\n }\r\n />\r\n \r\n Store Name * \r\n props.handleChangeInput(e, \"RSD_CONTACT_NAME\")}\r\n />\r\n \r\n Website (Optional) * \r\n props.handleChangeInput(e, \"RSD_WEBSITE\")}\r\n />\r\n \r\n Identification Documents * \r\n \r\n \r\n \r\n Identifation Documents\r\n
\r\n \r\n A copy of the person's Thai national I.D. card or other\r\n official identity document, certified true with an\r\n original signature\r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n
\r\n \r\n
Drag and drop here (.jpg .png)
\r\n
or
\r\n
Browse
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n Sender Name Registration\r\n \r\n \r\n \r\n \r\n \r\n Sender Name * \r\n \r\n \r\n Instruction\r\n
\r\n \r\n 1. Sender Name must be English character or numbers{\" \"}\r\n
\r\n \r\n Sender names policy\r\n
\r\n \r\n Examples of such content that is not allowed include:\r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Characters: {props.data.senderNamelength}/\r\n {props.data.senderNameCount}\r\n \r\n \r\n \r\n props.handleChangeInput(e, \"RSD_LIST_SENDER_NAME\")\r\n }\r\n />\r\n \r\n Reason of Use * \r\n \r\n props.handelChangeCheckboxGroup(e, \"RSD_LIST_REASON_USE\")\r\n }\r\n >\r\n \r\n Memberships’ Notification \r\n \r\n Privileges \r\n \r\n \r\n Important Activities and Details\r\n \r\n \r\n Order Confirmation \r\n \r\n Other \r\n \r\n {props.data.RSD_LIST_REASON_USE?.indexOf(\"5\") > -1 && (\r\n \r\n props.handleChangeInput(\r\n e,\r\n \"RSD_LIST_REASON_USE_COMMENT\"\r\n )\r\n }\r\n placeholder={\"Please specify\"}\r\n />\r\n {props.errorText && (\r\n \r\n Please, input text in “English” only.\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n Message Example * \r\n \r\n Characters: {props.data.messageLength}/\r\n {props.data.messageCount}\r\n \r\n \r\n props.handleChangeInput(e, \"RSD_LIST_EX_TEXT\")}\r\n />\r\n \r\n props.onChangeCheckBox(e, \"RSD_LIST_IS_WHITELIST\")\r\n }\r\n >\r\n Request Whitelist \r\n \r\n \r\n Whitelist Conditions\r\n
\r\n \r\n 1. Messages from government and government agencies such\r\n as disaster warning messages.
\r\n \r\n }\r\n >\r\n Signature * \r\n \r\n setVisible(true)}>Add Signature \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Request Information\r\n \r\n \r\n \r\n First Name * \r\n props.handleChangeInput(e, \"RSD_FIRST_NAME\")}\r\n />\r\n \r\n Last Name * \r\n props.handleChangeInput(e, \"RSD_LAST_NAME\")}\r\n />\r\n \r\n Position * \r\n props.handleChangeInput(e, \"RSD_POSITION\")}\r\n />\r\n \r\n Business Name * \r\n props.handleChangeInput(e, \"RSD_CONTACT_NAME\")}\r\n />\r\n \r\n Company Website * \r\n props.handleChangeInput(e, \"RSD_WEBSITE\")}\r\n />\r\n \r\n Identification Documents * \r\n \r\n \r\n \r\n Identifation Documents\r\n
\r\n \r\n A copy of the person's Thai national I.D. card or other\r\n official identity document, certified true with an\r\n original signature\r\n
\r\n \r\n }\r\n >\r\n beforeUploadFile(file, \"RSD_IDEN_DOC\")}\r\n onRemove={(file, fileList) =>\r\n onRemove(file, fileList, \"RSD_IDEN_DOC\")\r\n }\r\n fileList={props.data.RSD_IDEN_DOC}\r\n {...props}\r\n >\r\n \r\n
\r\n \r\n
Drag and drop here (.jpg .png)
\r\n
or
\r\n
Browse
\r\n
Company Seal Image * \r\n \r\n \r\n \r\n Company Seal\r\n
\r\n \r\n A way of confirming that a document is certified and\r\n agreed upon by all parties involved in the decision\r\n making. It is considered the official signature or mark of\r\n the corporation. A company seal will include:\r\n
\r\n \r\n }\r\n >\r\n beforeUploadFile(file, \"RSD_CO_SEAL\")}\r\n onRemove={(file, fileList) =>\r\n onRemove(file, fileList, \"RSD_CO_SEAL\")\r\n }\r\n fileList={props.data.RSD_CO_SEAL}\r\n {...props}\r\n >\r\n \r\n
\r\n \r\n
Drag and drop here (.jpg .png)
\r\n
or
\r\n
Browse
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n Sender Name Registration\r\n \r\n \r\n \r\n \r\n \r\n Sender Name * \r\n \r\n \r\n Instruction\r\n
\r\n \r\n 1. Sender Name must be English character or numbers{\" \"}\r\n
\r\n \r\n Sender names policy\r\n
\r\n \r\n Examples of such content that is not allowed include:\r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Characters: {props.data.senderNamelength}/\r\n {props.data.senderNameCount}\r\n \r\n \r\n \r\n props.handleChangeInput(\r\n e,\r\n \"RSD_LIST_SENDER_NAME\",\r\n \"senderNameCount\"\r\n )\r\n }\r\n />\r\n \r\n Reason of Use * \r\n \r\n props.handelChangeCheckboxGroup(e, \"RSD_LIST_REASON_USE\")\r\n }\r\n >\r\n \r\n Memberships’ Notification \r\n \r\n Privileges \r\n \r\n \r\n Important Activities and Details\r\n \r\n \r\n Order Confirmation \r\n \r\n Other \r\n \r\n {props.data.RSD_LIST_REASON_USE?.indexOf(\"5\") > -1 && (\r\n \r\n props.handleChangeInput(\r\n e,\r\n \"RSD_LIST_REASON_USE_COMMENT\"\r\n )\r\n }\r\n placeholder={\"Please specify\"}\r\n />\r\n {props.errorText && (\r\n \r\n Please, input text in “English” only.\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n Message Example * \r\n \r\n Characters: {props.data.messageLength}/\r\n {props.data.messageCount}\r\n \r\n \r\n props.handleChangeInput(e, \"RSD_LIST_EX_TEXT\")}\r\n />\r\n \r\n User Flow (Optional) \r\n \r\n \r\n \r\n User Flow Example\r\n
\r\n \r\n
\r\n
\r\n beforeUploadFile(file, \"RSD_LIST_USER_FLOW\")\r\n }\r\n onRemove={(file, fileList) =>\r\n onRemove(file, fileList, \"RSD_LIST_USER_FLOW\")\r\n }\r\n fileList={props.data.RSD_LIST_USER_FLOW}\r\n {...props}\r\n >\r\n \r\n
\r\n \r\n
Drag and drop here (.jpg .png)
\r\n
or
\r\n
Browse
\r\n
\r\n props.onChangeCheckBox(e, \"RSD_LIST_IS_WHITELIST\")\r\n }\r\n >\r\n Request Whitelist \r\n \r\n \r\n Whitelist Conditions\r\n
\r\n \r\n 1. Messages from government and government agencies such\r\n as disaster warning messages.
\r\n \r\n }\r\n >\r\n Signature * \r\n \r\n setVisible(true)}>Add Signature \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Individual Form \r\n Enterprise Form \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {type === 1 ? (\r\n \r\n \r\n Clear Data\r\n \r\n Next \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {loading ?\r\n \r\n \r\n |
\r\n {(statusdescription != \"\" && statusdescription != null) ?\r\n |
\r\n : null\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n :\r\n \r\n ORDER DETAIL : {order_invoice_id} \r\n \r\n \r\n \r\n # \r\n Item \r\n Unit \r\n Cost(Bath) \r\n \r\n \r\n \r\n \r\n 1 \r\n {packagename} - {packagedetail} \r\n 1 unit \r\n {packagecost} \r\n \r\n \r\n Total \r\n {packagecost} \r\n \r\n \r\n Tax(7%) \r\n {packagevat} \r\n \r\n \r\n Net \r\n {packagecostwithvat} \r\n \r\n \r\n
\r\n \r\n }\r\n\r\n \r\n \r\n
\r\n {props.children}\r\n \r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport {\r\n Card,\r\n CardBody,\r\n // Table\r\n} from \"reactstrap\";\r\nimport moment from 'moment';\r\nimport 'moment-timezone';\r\nimport { Button, Icon, Radio, Row, Col, Spin, notification, Table } from \"antd\";\r\nimport { CheckUserLogedin, getAccId, smsLoginUrl } from \"../../../../config\";\r\nimport {\r\n formatCurrency\r\n} from \"../../../../config\";\r\nimport queryString from \"query-string\";\r\nimport ButtonBase from \"../../../../components/Button/ButtonBase\";\r\nimport TranserctionService from \"../../Service/transection\";\r\nimport { TransectionStatus } from \"../../../../models/transection\";\r\n\r\nmoment.tz.setDefault(\"Asia/Bangkok\");\r\n\r\nclass OrderSummary extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n errormessage: \"\",\r\n loading: true,\r\n message: \"Loading your receipt\",\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const rid = queryString.parse(this.props.location.search).rid\r\n const oid = queryString.parse(this.props.location.search).oid\r\n if (!CheckUserLogedin()) {\r\n this.props.history.push(\"/PackageList\");\r\n } else if (rid !== undefined) {\r\n this.getTransectionDetail(rid, \"receipt\");\r\n } else if (oid !== undefined) {\r\n this.getTransectionDetail(oid, \"order\");\r\n }\r\n\r\n //clear session\r\n sessionStorage.clear();\r\n }\r\n\r\n async getTransectionDetail(id, type) {\r\n let response = null;\r\n if (type == \"receipt\") {\r\n response = await TranserctionService.getReceiptDetail(id)\r\n } else {\r\n response = await TranserctionService.getOrderDetail(id)\r\n }\r\n this.setState({\r\n loading: response.loading,\r\n message: response.message,\r\n });\r\n\r\n this.initTransectionAndOrderData(response.data);\r\n\r\n if (type == \"receipt\") {\r\n this.initReceiptData(response.data);\r\n }\r\n }\r\n\r\n initTransectionAndOrderData(transection) {\r\n this.setState({\r\n orderId: transection.order.id.toUpperCase(),\r\n invoice_no: transection.order.invoice_no,\r\n packagename: transection.order.package.PKG_NAME,\r\n packagedetail: transection.order.package.PKG_DETAIL,\r\n paymentmethod: transection.order.payment_method_display,\r\n paymentstatus: transection.order.payment_status_display,\r\n orderStatus: TranserctionService.mapTransectionStatus(transection.order.payment_status),\r\n orderdate: transection.order.create_date !== null ? moment(transection.order.create_date).format('DD/MM/YYYY HH:mm') : \"-\",\r\n packagecost: transection.order.package.PKG_COST_INFO.PKGC_PRICE,\r\n vat: transection.order.package.PKG_COST_INFO.PKGC_VAT,\r\n net: transection.order.package.PKG_COST_INFO.PKGC_NET_PRICE,\r\n fullname: transection.order.user_fullname,\r\n mobileno: transection.order.user_phone_no !== \"\" ? transection.order.user_phone_no : \"-\",\r\n email: transection.order.user_email,\r\n });\r\n }\r\n\r\n initReceiptData(receipt) {\r\n this.setState({\r\n taxinfoid: receipt.tax_invoice_id,\r\n contact_name: receipt.contact_name,\r\n contact_mobile: receipt.contact_mobile,\r\n receiptid: receipt.receipt.RE_NO.toUpperCase(),\r\n receiptdate: receipt.receipt_datetime_display !== null ? moment(receipt.receipt_datetime_display).format('DD/MM/YYYY HH:mm') : '-',\r\n discountprice: receipt.receipt.RE_DISCOUNT,\r\n rid: receipt.receipt.RE_NO,\r\n });\r\n }\r\n\r\n\r\n async downloadTaxInvoice() {\r\n const rid = this.state.rid;\r\n const taxinfoid = this.state.taxinfoid;\r\n const { loading, url } = await TranserctionService.downloadTaxInvoice(rid, taxinfoid);\r\n this.setState({\r\n loadingAll: loading,\r\n });\r\n\r\n var link = document.createElement(\"a\");\r\n link.href = url;\r\n link.download = `${rid}.pdf`\r\n link.click();\r\n }\r\n\r\n render() {\r\n let {\r\n orderId,\r\n orderdate,\r\n invoice_no,\r\n packagename,\r\n packagedetail,\r\n receiptid = \"-\",\r\n receiptdate = \"-\",\r\n paymentmethod,\r\n paymentstatus,\r\n packagecost,\r\n vat,\r\n net,\r\n fullname,\r\n mobileno,\r\n email,\r\n loading,\r\n message,\r\n discountprice = 0,\r\n orderStatus,\r\n contact_name = \"-\",\r\n contact_mobile = \"-\",\r\n } = this.state;\r\n\r\n const columns = [\r\n {\r\n title: \"No\",\r\n dataIndex: \"key\",\r\n key: \"key\",\r\n align: \"center\",\r\n width: \"40px\",\r\n render: (text) => 1 ,\r\n },\r\n {\r\n title: \"Package\",\r\n dataIndex: \"\",\r\n key: \"\",\r\n width: \"300px\",\r\n render: (text, record, index) => {\r\n return (\r\n \r\n {`${packagename} - ${packagedetail}`}\r\n \r\n );\r\n },\r\n },\r\n {\r\n title: \"Unit\",\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n width: \"130px\",\r\n render: (text, record, index) => {\r\n return (\r\n <>\r\n 1 Unit
\r\n Subtotal
\r\n Discount
\r\n Vat(7%)
\r\n NET AMOUNT
\r\n \r\n );\r\n },\r\n },\r\n {\r\n title: \"Amount (Baht)\",\r\n key: \"tags\",\r\n dataIndex: \"tags\",\r\n align: \"right\",\r\n width: \"130px\",\r\n render: (text, record, index) => {\r\n return (\r\n <>\r\n {formatCurrency(parseFloat(packagecost).toFixed(2))} Baht
\r\n {formatCurrency(parseFloat(packagecost).toFixed(2))} Baht
\r\n {discountprice ? (\r\n - {formatCurrency(parseFloat(discountprice).toFixed(2))} Baht
\r\n ) : (\r\n {formatCurrency(parseFloat(discountprice).toFixed(2))} Baht
\r\n )}\r\n {formatCurrency(parseFloat(vat).toFixed(2))} Baht
\r\n {formatCurrency(parseFloat(net).toFixed(2))} Baht
\r\n \r\n );\r\n },\r\n },\r\n ];\r\n\r\n const data = [this.state];\r\n\r\n return (\r\n \r\n \r\n
\r\n Purchase successful, Thank you for your payment\r\n \r\n \r\n \r\n
\r\n Purchase Failed, Please try again\r\n \r\n \r\n \r\n
\r\n
\r\n Order \r\n {loading ? (\r\n \r\n \r\n \r\n {message}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n Buyer \r\n \r\n \r\n Account Name : \r\n \r\n {fullname} \r\n
\r\n \r\n \r\n Mobile : \r\n \r\n {mobileno} \r\n
\r\n \r\n \r\n Email : \r\n \r\n {email} \r\n
\r\n \r\n \r\n \r\n Order Detail \r\n \r\n \r\n {orderStatus === TransectionStatus.SUCCESS.name ? `Receipt NO.` : `Invoice No.`} : \r\n \r\n {orderStatus === TransectionStatus.SUCCESS.name ? receiptid : invoice_no} \r\n
\r\n \r\n \r\n {orderStatus === TransectionStatus.SUCCESS.name ? `Receipt Date` : `Order Date`} : \r\n \r\n {orderStatus === TransectionStatus.SUCCESS.name ? receiptdate : orderdate} \r\n
\r\n \r\n \r\n Payment Method : \r\n \r\n {paymentmethod} \r\n
\r\n \r\n \r\n Status : \r\n \r\n {orderStatus} \r\n
\r\n \r\n \r\n \r\n Package Detail \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n
\r\n
\r\n this.downloadTaxInvoice()}\r\n style={{ marginRight: \"8px\" }}\r\n >\r\n Dowload Tax invoice \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 {(statusdescription != \"\" && statusdescription != null)\r\n ? |
\r\n : null\r\n }\r\n {(showCreateOrderButton) ?\r\n \r\n this.setUrl(redirectUrl, 0)}>Create new order \r\n \r\n
\r\n : null\r\n }\r\n {(showRefreshButton) ?\r\n \r\n window.location.reload()}>Check your order again \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n {loading ?\r\n \r\n
\r\n : null\r\n }\r\n \r\n \r\n \r\n
\r\n {moment(row.order.create_date).format('DD/MM/YYYY HH:mm')}\r\n
\r\n );\r\n }\r\n },\r\n {\r\n title: 'Package',\r\n dataIndex: 'package_detail_display',\r\n key: 'package_detail_display',\r\n render: (text, row) => {\r\n return (\r\n \r\n {row.receipt.RE_PACKAGE}\r\n
\r\n );\r\n }\r\n },\r\n {\r\n title: 'Payment Detail',\r\n dataIndex: 'payment_detail_display',\r\n key: 'payment_detail_display',\r\n render: (text, row) => {\r\n return (\r\n \r\n {row.receipt_payment_status_display} \r\n
\r\n );\r\n }\r\n },\r\n {\r\n title: 'Net amount',\r\n dataIndex: 'order.net_payment',\r\n key: 'order.net_payment',\r\n render: (text, row) => {\r\n return (\r\n ฿ {formatCurrency(parseFloat(row.order.net_payment).toFixed(2))}
\r\n );\r\n }\r\n },\r\n {\r\n title: 'Action',\r\n dataIndex: 'receipt.RE_ID',\r\n key: 'receipt.RE_ID',\r\n render: (text, row) => {\r\n return (\r\n );\r\n }\r\n },\r\n ];\r\n\r\n return (\r\n \r\n \r\n
\r\n
Transaction history \r\n \r\n
\r\n
{\r\n console.table(page);\r\n this.getTransactionData(page);\r\n },\r\n pageSize: itemperpage,\r\n total: totalitem\r\n }}\r\n />\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Switch, Route, Redirect } from 'react-router-dom';\r\nimport { Container } from 'reactstrap';\r\nimport Header from '../../components/Header/';\r\nimport Sidebar from '../../components/Sidebar/';\r\nimport { Home } from '../../components/Home';\r\n\r\nimport Dashboard from '../../views/Dashboard/';\r\nimport Broadcast from '../../views/Broadcast/';\r\nimport BroadcastNewAndEdit from '../../views/Broadcast/NewAndEdit/';\r\nimport TemplateList from '../../views/Template/List/';\r\nimport TemplateNew from '../../views/Template/New/';\r\nimport SenderList from '../../views/Sender/List/';\r\nimport PeoplePerson from '../../views/People/Person/';\r\nimport PeopleDetail from '../../views/People/Person/Detail/';\r\nimport PeopleTag from '../../views/People/Tag/';\r\nimport PeopleTagDetail from '../../views/People/Tag/Detail/';\r\nimport PeopleBlacklist from '../../views/People/Blacklist/';\r\nimport ReportCommunication from '../../views/Report/Communication/';\r\nimport Report from '../../views/Report/ReportNew';\r\nimport ReportNew from '../../views/Report/ReportNew';\r\nimport ReportCreate from '../../views/Report/Create/Createnew';\r\nimport ReportCreateDetailreportnew from '../../views/Report/Create/Detailreportnew';\r\nimport ReportCreateSummeryReportnew from '../../views/Report/Create/SummeryReportnew';\r\nimport Log from '../../views/LogV2/';\r\nimport OtpConfiguration from '../../views/Otp/Configuration/';\r\nimport OtpConfigurationAdd from '../../views/Otp/Configuration/OtpAdd';\r\nimport OtpOtpLog from '../../views/Otp/OtpLog/';\r\nimport OtpOtpLogDetial from '../../views/Otp/OtpLog/Detail/';\r\nimport IssueReport from '../../views/IssueReport/';\r\nimport Detail from '../../views/Broadcast/Communication/Detail';\r\n\r\nimport AccountList from '../../views/UsersManagement/AccountList';\r\nimport AccountsDetail from '../../views/UsersManagement/AccountsDetail';\r\nimport CreditMovement from '../../views/CreditMovement';\r\nimport { Hello } from '../../views/Pages/Hello/Hello';\r\nimport { token, capitalizeFLetter, CheckTokenExp } from '../../config';\r\nimport { apiClient } from '../../api';\r\nimport { Spin, Icon } from 'antd';\r\nimport ModalServerError from '../../components/Ants/Modal/ModalServerError';\r\n\r\n// ------------------ Ecommerce ------------------ //\r\nimport PackageList from '../../views/Ecommerce/PackageList/PackageList'\r\nimport RequestTaxInfo from '../../views/Ecommerce/RequestTaxInfo'\r\nimport RequestSender from '../../views/Sender/RequestSender/RequestSender';\r\nimport OrderDetail from '../../views/Ecommerce/Order/OrderDetail'\r\nimport OrderSummary from '../../views/Ecommerce/Order/OrderSummary'\r\nimport OrderValidate from '../../views/Ecommerce/Order/OrderValidate'\r\nimport TransactionHistory from '../../views/Ecommerce/TransactionHistory';\r\n\r\nexport class Full extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n token: document.cookie.replace(/(?:(?:^|.*;\\s*)__AntiXsrfUerkey\\s*\\=\\s*([^;]*).*$)|^.*$/, \"$1\"),\r\n username: \"\",\r\n admin: false,\r\n createuser: false,\r\n createaccount: false,\r\n userGenToken: false,\r\n startPage: false,\r\n balance: 0,\r\n type: 0,\r\n get: 0,\r\n ecom: 0,\r\n loading: false,\r\n modalVisible: false,\r\n };\r\n\r\n this.getToken = this.getToken.bind(this);\r\n this.validateToken = this.validateToken.bind(this);\r\n this.Getpermission = this.Getpermission.bind(this);\r\n this.getcredit = this.getcredit.bind(this);\r\n\r\n }\r\n\r\n componentWillMount() {\r\n this.getToken(\"__AntiXsrfUerkey\");\r\n if (token) {\r\n this.Getpermission()\r\n setTimeout(() => { this.getcredit() }, 3000)\r\n }\r\n }\r\n\r\n getcredit() {\r\n if (!CheckTokenExp()) {\r\n if (!this.state.loading) {\r\n this.setState({ loading: true });\r\n let req = JSON.stringify({\r\n });\r\n\r\n // cream comment\r\n apiClient.post('api/credit/get_credit_byuser', req\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({ balance: json.balance, type: json.paytype, loading: false, get: 1 });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ balance: 0, type: 1, loading: false, get: 1 }, () => { });\r\n });\r\n }\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n getToken(cname) {\r\n var token = document.cookie.replace(/(?:(?:^|.*;\\s*)__AntiXsrfUerkey\\s*\\=\\s*([^;]*).*$)|^.*$/, \"$1\")\r\n if (token == \"\") {\r\n //window.location.reload();\r\n window.location.href = \"logout\";\r\n } else {\r\n this.validateToken(token);\r\n }\r\n return \"\";\r\n }\r\n\r\n validateToken(token) {\r\n if (!CheckTokenExp()) {\r\n apiClient.post('api/ValidateToken', JSON.stringify(token)\r\n , { headers: { 'Content-type': 'application/json; charset=UTF-8' } })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({ username: json.username, company: json.company });\r\n })\r\n .catch(error => {\r\n window.location.href = \"logout\";\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n\r\n }\r\n\r\n Getpermission() {\r\n if (!CheckTokenExp()) {\r\n this.setState({ loading: true });\r\n apiClient.post('api/usersmanage/Getpermission', {}\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n var json = data.data;\r\n this.setState({\r\n admin: json.admin,\r\n createuser: json.createuser,\r\n createaccount: json.createaccount,\r\n userGenToken: json.userGenToken,\r\n ecom: json.ecom,\r\n loading: false,\r\n startPage: true\r\n });\r\n })\r\n .catch(error => {\r\n this.setState({\r\n admin: false,\r\n createuser: false,\r\n createaccount: false,\r\n ecom: 0,\r\n loading: false,\r\n startPage: true\r\n });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { username, company, admin, createuser, createaccount, balance, type, errormsg, loading, get, userGenToken, ecom, modalVisible } = this.state;\r\n const antIcon = \r\n
{ this.setState({ get: 0 }); this.getcredit() }} createaccount={createaccount} balance={balance} type={type} loading={get == 1 ? false : loading} onLoadCredit={(e) => { this.getcredit() }} ecom={ecom} />\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 history.push(\"/login\" + window.location.search);\r\n }}\r\n >\r\n Log in{\" \"}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Contact Name\r\n
\r\n \r\n setModel({\r\n ...model,\r\n contactName: e.target.value.trim(),\r\n })\r\n }\r\n />\r\n \r\n Mobile No.
\r\n \r\n setModel({\r\n ...model,\r\n mobileNo: e.target.value.trim(),\r\n })\r\n }\r\n />\r\n \r\n Email
\r\n \r\n setModel({\r\n ...model,\r\n email: e.target.value.trim(),\r\n })\r\n }\r\n />\r\n \r\n Password
\r\n \r\n \r\n setModel({\r\n ...model,\r\n password: e.target.value.trim(),\r\n })\r\n }\r\n placeholder=\"Please, set up your “Password”\"\r\n />\r\n
\r\n \r\n \r\n Confirm Password\r\n
\r\n \r\n \r\n setModel({\r\n ...model,\r\n confirmPassword: e.target.value.trim(),\r\n })\r\n }\r\n placeholder=\"Please, confirm your “Password”\"\r\n />\r\n \r\n setState({\r\n ...state,\r\n showConfirmPassword: !state.showConfirmPassword,\r\n })\r\n }\r\n type={\r\n state.showConfirmPassword\r\n ? \"eye\"\r\n : \"eye-invisible\"\r\n }\r\n className=\"showpassword\"\r\n />\r\n
\r\n \r\n \r\n 1. The password must be at least 6 characters\r\n long.\r\n
\r\n \r\n {errorMessage}
\r\n )}\r\n \r\n
\r\n
onSubmit()}\r\n loading={loading}\r\n >\r\n Sign up\r\n \r\n \r\n \r\n By continuing, you agree to Platform’s{\" \"}\r\n \r\n Terms of Service \r\n \r\n \r\n Privacy Policy\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Input, Col, Row, Icon, Button } from \"antd\";\r\nimport { apiClient, urlClientInfo } from \"../../../../api\";\r\n\r\nexport default function Otp({ callRegisterApi, state, setState, model, setModel, callGetOTP }) {\r\n\r\n useEffect(() => {\r\n\r\n }, []);\r\n\r\n const callVerifyOtp = () => {\r\n let req = {\r\n otpid: model.OTPid,\r\n otpcode: model.OTPcode,\r\n };\r\n\r\n apiClient\r\n .post(\"api/accountregister/verifyotp\", req, {\r\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" },\r\n })\r\n .then((response) => {\r\n if (response.data.verifyResult) {\r\n callRegisterApi();\r\n } else {\r\n setState({\r\n ...state,\r\n otpErrorMessage: response.data.message,\r\n showOtpErrorMessage: true,\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n setState({\r\n ...state,\r\n otpErrorMessage: error.message,\r\n showOtpErrorMessage: true,\r\n });\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n Otp\r\n \r\n {state.showOtpErrorMessage && (\r\n
\r\n \r\n {state.otpErrorMessage}\r\n \r\n
\r\n )}\r\n
REF CODE : {state.OTPref}
\r\n
\r\n setModel({\r\n ...model,\r\n OTPcode: e.target.value.trim(),\r\n })\r\n }\r\n />\r\n \r\n Verify OTP\r\n \r\n Resend OTP \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Input, Col, Row, Icon, Button } from \"antd\";\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\nimport {\r\n recaptchakey,\r\n CheckUserLogedin,\r\n set_cookie,\r\n getExpiredDate,\r\n smsLoginUrl,\r\n} from \"../../../config\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { apiClient, urlClientInfo } from \"../../../api\";\r\nimport queryString from \"query-string\";\r\nimport Form from \"./components/Form\";\r\nimport Otp from \"./components/Otp\";\r\n\r\nexport default function Register(props) {\r\n let history = useHistory();\r\n const recaptchaRef = React.createRef();\r\n const [state, setState] = useState({\r\n showPassword: false,\r\n showConfirmPassword: false,\r\n showOtpForm: false,\r\n showOtpErrorMessage: false,\r\n otpErrorMessage: \"\",\r\n OTPref: \"\",\r\n });\r\n const [errorMessage, setErrorMessage] = useState(\"\");\r\n const [model, setModel] = useState({\r\n contactName: \"\",\r\n mobileNo: \"\",\r\n email: \"\",\r\n password: \"\",\r\n confirmPassword: \"\",\r\n recaptchaToken: null,\r\n OTPcode: \"\",\r\n OTPref: \"\",\r\n OTPid: \"\",\r\n typeUser: 1,\r\n });\r\n const [packageId, setPackageId] = useState(\"\");\r\n const [clientInfo, setclientInfo] = useState({});\r\n\r\n const [settingJson, setSettingJson] = useState({\r\n env: {\r\n title: \"Loading...\",\r\n name: \"ants\",\r\n imgFolder: \"ANTS\",\r\n },\r\n imgpath: null,\r\n classBackground: null\r\n });\r\n\r\n useEffect(() => {\r\n getClientInfo();\r\n if (CheckUserLogedin()) {\r\n history.push(\"/PackageList\");\r\n }\r\n if (window.location.search) {\r\n setPackageId(queryString.parse(window.location.search).pid);\r\n }\r\n\r\n getSettingJson();\r\n }, []);\r\n\r\n const getSettingJson = () => {\r\n apiClient.get('api/function/getappsettings')\r\n .then((response) => {\r\n const json = response.data;\r\n\r\n setSettingJson({ ...settingJson, imgpath: `../../../../src/img/${json.env.imgFolder}/Logo_Web.png` })\r\n\r\n switch (json.env.name) {\r\n case \"ANTS\":\r\n setSettingJson({ ...settingJson, classBackground: \"login-ants-background\" })\r\n break;\r\n case \"YING\":\r\n setSettingJson({ ...settingJson, classBackground: \"login-ants3-background\" })\r\n break;\r\n case \"SMS Up\":\r\n setSettingJson({ ...settingJson, classBackground: \"login-ants4-background\" })\r\n break;\r\n case \"Promotech\":\r\n setSettingJson({ ...settingJson, classBackground: \"login-promotech-background\" })\r\n break;\r\n case \"True\":\r\n this.setState({ settingJson: { ...this.state.settingJson, classBackground: \"login-true-background\" } })\r\n break;\r\n }\r\n\r\n })\r\n .catch(error => console.error('Error fetching JSON:', error));\r\n }\r\n\r\n const getClientInfo = () => {\r\n urlClientInfo\r\n .get(\"\", {\r\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" },\r\n })\r\n .then((response) => {\r\n let req = {\r\n ipString: response.data.ipString,\r\n userAgent: response.data.userAgent,\r\n }\r\n setclientInfo(req);\r\n })\r\n .catch((error) => {\r\n setclientInfo({\r\n ipString: \"\",\r\n userAgent: \"\",\r\n });\r\n });\r\n }\r\n\r\n const callGetOTP = () => {\r\n if (model.mobileNo != \"\") {\r\n apiClient\r\n .post(\r\n \"api/accountregister/getotp\",\r\n { mobileno: model.mobileNo },\r\n {\r\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" },\r\n }\r\n )\r\n .then((response) => {\r\n if (response.data.success.message == \"Success\") {\r\n setState({ ...state, showOtpForm: true });\r\n setModel({\r\n ...model,\r\n OTPref: response.data.referenceCode,\r\n OTPid: response.data.otpId,\r\n });\r\n } else {\r\n setErrorMessage(response.data.success.description);\r\n }\r\n })\r\n .catch((error) => {\r\n setErrorMessage(error.message);\r\n });\r\n } else {\r\n setState({ ...state, showOtpForm: false });\r\n }\r\n };\r\n\r\n const callRegisterApi = () => {\r\n let req = {\r\n name: model.contactName,\r\n mobileno: model.mobileNo,\r\n email: model.email,\r\n username: model.email,\r\n password: model.password,\r\n repeatpassword: model.confirmPassword,\r\n typeUser: model.typeUser,\r\n pid: packageId,\r\n client: clientInfo\r\n };\r\n\r\n apiClient\r\n .post(\"api/accountregister/register\", req, {\r\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" },\r\n })\r\n .then(async (response) => {\r\n if (response.data.resultCode == \"201\") {\r\n AutoLogin();\r\n } else {\r\n setState({ ...state, showOtpForm: false });\r\n setErrorMessage(response.data.message);\r\n }\r\n })\r\n .catch((error) => {\r\n setState({\r\n ...state,\r\n showOtpErrorMessage: true,\r\n otpErrorMessage: error.message,\r\n });\r\n });\r\n };\r\n\r\n const AutoLogin = async () => {\r\n let req = JSON.stringify({\r\n \"username\": model.email,\r\n \"password\": model.password,\r\n \"expireMinutes\": \"60\",\r\n \"ip\": clientInfo.ipString,\r\n \"device\": clientInfo.userAgent,\r\n });\r\n\r\n apiClient.post('api/Token', req\r\n , { headers: { 'Content-type': 'application/json; charset=UTF-8' } })\r\n .then(data => {\r\n var json = data;\r\n let Token = \"__AntiXsrfUerkey=\" + encodeURIComponent(json.data);\r\n let ExpiredDate = getExpiredDate(Token).toGMTString();\r\n let SendToken = Token + \";expires=\" + ExpiredDate + \";path=/\";\r\n set_cookie(SendToken);\r\n\r\n const pid = queryString.parse(window.location.search).pid;\r\n if (pid) {\r\n history.push(\"/RequestTaxInfo\" + window.location.search);\r\n } else {\r\n history.push(\"/dashboard\");\r\n }\r\n })\r\n .catch(error => {\r\n setErrorMessage(`Auto login failed: ${error.message}`);\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
\r\n {obj.PackageName} \r\n \r\n
\r\n \r\n {obj.PackagePrice_per_credit}\r\n \r\n THB/SMS \r\n
\r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
\r\n {(obj.Packagetotal_price)\r\n .toFixed(2)\r\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
฿ \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Credit period\r\n \r\n
\r\n
\r\n
\r\n Report period\r\n \r\n
\r\n
\r\n
\r\n SMS Qty\r\n \r\n
\r\n
\r\n
\r\n Sender name\r\n \r\n
\r\n \r\n {obj.Package_Packageexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Package_Reportexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Packagetotal_message.toFixed(0).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
\r\n \r\n \r\n {obj.Package_Sender === 0 ? \"Unlimited\" : obj.Package_Sender}\r\n \r\n
\r\n \r\n
\r\n
\r\n {\r\n let pid = obj.PackageId + \"|\" + obj.Packagetotal_price;\r\n onClickToPage(pid, obj.PackageType);\r\n }}\r\n >\r\n Buy now \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {\r\n Card, Col, Row,\r\n} from \"reactstrap\";\r\nimport ClockWhite from \"../../../../img/clock(white).svg\"\r\nimport LetterWhite from \"../../../../img/letter(white).svg\"\r\n\r\nexport default function CardRecommend({ obj, onClickToPage, calculateCredit }) {\r\n return (\r\n \r\n
\r\n
\r\n Recommend\r\n \r\n \r\n
\r\n {obj.PackageName} \r\n \r\n
\r\n \r\n {obj.PackagePrice_per_credit}\r\n \r\n THB/SMS \r\n
\r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
\r\n {(obj.Packagetotal_price)\r\n .toFixed(2)\r\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n ฿\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Credit period\r\n \r\n
\r\n
\r\n
\r\n Report period\r\n \r\n
\r\n
\r\n
\r\n SMS Qty\r\n \r\n
\r\n
\r\n
\r\n Sender name\r\n \r\n
\r\n \r\n {obj.Package_Packageexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Package_Reportexpire} Month\r\n \r\n
\r\n \r\n \r\n {obj.Packagetotal_message.toFixed(0).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\r\n \r\n
\r\n \r\n \r\n {obj.Package_Sender === 0 ? \"Unlimited\" : obj.Package_Sender}\r\n \r\n
\r\n \r\n
\r\n
\r\n {\r\n let pid =\r\n obj.PackageId + \"|\" + obj.Packagetotal_price;\r\n onClickToPage(pid, obj.PackageType);\r\n }}\r\n >\r\n Buy now \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n How many SMS do you plan to send?\r\n \r\n \r\n
\r\n \r\n {data && data.length > 0 &&\r\n data.map((obj, index) => {\r\n if (obj.PackageType === 1 && obj.Package_Recommend) {\r\n return \r\n
\r\n {title} \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'bootstrap/dist/css/bootstrap.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n \r\n ,\r\n rootElement);\r\n\r\nregisterServiceWorker();\r\n\r\n","/* eslint-disable */\r\nimport React, { Component } from 'react';\r\nimport { Select } from 'antd';\r\nimport { token, CheckTokenExp } from '../../../config';\r\nimport { apiClient } from '../../../api';\r\nimport{root} from '../../../config';\r\nimport ModalServerError from '../Modal/ModalServerError';\r\n\r\nconst { Option } = Select;\r\n\r\nexport default class SelectAccount extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n list: [],\r\n select: [],\r\n modalVisible: false,\r\n };\r\n\r\n this.getData = this.getData.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.getData(\"\");\r\n }\r\n\r\n getData(value) {\r\n if (!CheckTokenExp()) {\r\n var search = value == \"\" || value == undefined ? \"null\" : value;\r\n this.state.list.length > 0 ? \"\" : this.setState({ loading: true });\r\n const encodedString = new Buffer(search).toString('base64');\r\n apiClient.get('api/accounts/parent/' + encodedString\r\n , {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-type': 'application/json; charset=UTF-8'\r\n }\r\n })\r\n .then(data => {\r\n if (data.status === 200 && data.data) {\r\n this.setState({ list: data.data });\r\n } else {\r\n this.setState({ modalVisible: true });\r\n this.setState({ list: [] });\r\n }\r\n this.setState({ loading: false });\r\n })\r\n .catch(error => {\r\n this.setState({ modalVisible: true });\r\n this.setState({ list: [] });\r\n this.setState({ loading: false });\r\n });\r\n } else {\r\n window.location.href = \"logout\";\r\n }\r\n }\r\n\r\n render() {\r\n const { loading, list, modalVisible } = this.state;\r\n const { placeholder, select, setStateByProps, style, mode, showSearch ,account} = this.props;\r\n return (\r\n <>\r\n { this.getData(value) }}\r\n onChange={(value) => setStateByProps(\"account\", value)}\r\n value={select}\r\n suffixIcon={loading ? \"\" : {item.TEXT} \r\n )\r\n\r\n }\r\n \r\n \r\n
this.handleChange(value, this.props.useonchange)}\r\n onMouseUp={this.props.onmouseup}\r\n onKeyUp={this.props.onmouseup}\r\n onKeyPress={this.props.onmouseup}\r\n style={defaultStyle}\r\n placeholder={this.props.placeholder ? this.props.placeholder : placeholder}\r\n >\r\n (\r\n \r\n {highlightedDisplay} \r\n
\r\n )}\r\n style={defaultMentionStyle}\r\n />\r\n\r\n \r\n ![\"icon\"]({require(\"../../../img/logo-symbol.png\")}){kind=logo}
\r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=tracking}
\r\n \r\n }){kind=tracking}
\r\n \r\n }){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/popup-Confirm.png\")}){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/question.png\")}){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n }){kind=icon}
\r\n \r\n ![]({require(\"../../../img/vendors/icon/times-circle-o.png\")}){kind=icon}
\r\n \r\n ![](\"../img/vendors/icon/question.png\"){kind=icon}
\r\n \r\n