\r\n \r\n {this.props.offerId === 0 && \r\n \r\n \r\n }\r\n {this.props.affiliateId === 0 && \r\n \r\n \r\n }\r\n {this.props.creativeId === 0 && this.props.offerId !== 0 &&\r\n \r\n \r\n }\r\n {this.props.landingPageId === 0 && this.props.offerId !== 0 &&\r\n \r\n \r\n } \r\n \r\n \r\n );\r\n }\r\n}\r\n \r\nexport default ReportDropdown;","import React from 'react';\r\nimport { ChevronDown, ChevronUp } from 'react-feather';\r\n\r\nconst ReportHeader = (props) => {\r\n\r\n const { sortBy, title, alignment, handleSort, sort } = props;\r\n let classes = \"sortable\";\r\n classes = (alignment === \"right\") ? classes + \" text-right\" : classes;\r\n\r\n function sortChevron(currentSort){\r\n let chevron;\r\n if (sort.column === currentSort){\r\n chevron = (sort.order === 'asc') ? handleSort(sortBy)} className={classes}>{title} {sortChevron(sortBy)} \r\n );\r\n}\r\n \r\nexport default ReportHeader;","import React, { Component } from 'react';\r\nimport ReportDropdown from '../ReportDropdown/ReportDropdown';\r\nimport ReportHeader from '../ReportHeader/ReportHeader';\r\nimport { Link } from 'react-router-dom';\r\nimport { X } from 'react-feather';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { clearLocalStorageAndReload, verifyToken } from '../../../assets/JS/functions';\r\n\r\nimport moment from 'moment';\r\nimport _ from 'lodash';\r\n\r\nclass ReportEarnings extends Component {\r\n\r\n _isMounted = false;\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n campaign: [],\r\n totals: {},\r\n sort: {\r\n column: 'earnings',\r\n order: 'desc'\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this._isMounted = true;\r\n\r\n this.setState({\r\n dataLoaded: false\r\n });\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token');\r\n \r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/earnings?startDate=${this.props.startDate}&endDate=${this.props.endDate}`;\r\n\r\n if (this.props.offerId > 0){\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`;\r\n }\r\n\r\n if (this.props.affiliateId > 0){\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n\r\n /* Get the affiliate object from the DB and populate the state information */\r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n }).then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n this.props.handleDownloadData(result);\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n totals: result.totals,\r\n campaign: result.campaign\r\n });\r\n }\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportEarnings: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n }\r\n\r\n handleSort = (sortBy) => {\r\n const sort = { ...this.state.sort };\r\n\r\n if (sort.column === sortBy) {\r\n sort.order = (sort.order === 'asc') ? 'desc' : 'asc';\r\n } else {\r\n sort.column = sortBy;\r\n switch (sort.column) {\r\n case 'name':\r\n sort.order = 'asc'\r\n break;\r\n case 'clicks':\r\n sort.order = 'desc'\r\n break;\r\n case 'leads':\r\n sort.order = 'desc'\r\n break;\r\n case 'conversion':\r\n sort.order = 'desc'\r\n break;\r\n case 'sales':\r\n sort.order = 'desc'\r\n break;\r\n case 'cost':\r\n sort.order = 'desc'\r\n break;\r\n case 'epc':\r\n sort.order = 'desc'\r\n break;\r\n default:\r\n throw new Error(\"Invalid sorting method\");\r\n }\r\n\r\n }\r\n\r\n const sorted = _.orderBy(this.state.report, sortBy, sort.order)\r\n if (this._isMounted) {\r\n this.setState({\r\n report: sorted,\r\n sort: sort\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n render() {\r\n\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n\r\n let campaignId = this.state.campaign ? this.state.campaign.campaign_id : 0;\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Campaign Summary Report for:
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.affiliateId > 0 &&\r\n \r\n Affiliate ID: {this.props.affiliateId} \r\n
\r\n }\r\n \r\n \r\n \r\n \r\n #ID \r\n \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n\r\n {this.state.report.map(item => (\r\n \r\n {item.campaign_id} \r\n {parseFloat(item.conversion*100).toFixed(2)}% \r\n ${parseFloat(item.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.cost)} \r\n \r\n ))}\r\n\r\n \r\n Totals \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.clicks)} \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.leads)} \r\n {parseFloat(this.state.totals.conversion*100).toFixed(2)}% \r\n ${parseFloat(this.state.totals.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.cost)} \r\n \r\n \r\n\r\n \r\n }\r\n \r\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 ReportEarnings;","import React, { Component } from 'react';\r\nimport ReportHeader from '../ReportHeader/ReportHeader';\r\nimport { Link } from 'react-router-dom';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { verifyToken, clearLocalStorageAndReload } from '../../../assets/JS/functions';\r\nimport { X } from 'react-feather';\r\nimport moment from 'moment';\r\nimport _ from 'lodash';\r\n\r\nclass ReportClicks extends Component {\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n totals: [],\r\n campaign: [],\r\n sort: {\r\n column: 'date',\r\n order: 'asc'\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n dataLoaded: false\r\n });\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token');\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/clicks?startDate=${this.props.startDate}&endDate=${this.props.endDate}`;\r\n\r\n if (this.props.offerId) {\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`\r\n }\r\n\r\n if (this.props.affiliateId) {\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n\r\n if (this.props.creativeId) {\r\n fetchUrl = fetchUrl + `&cid=${this.props.creativeId}`;\r\n }\r\n\r\n if (this.props.landingPageId) {\r\n fetchUrl = fetchUrl + `&lpid=${this.props.landingPageId}`;\r\n }\r\n\r\n /* Get the affiliate object from the DB and populate the state information */\r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n this.props.handleDownloadData(result);\r\n \r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n totals: result.totals,\r\n campaign: result.campaign,\r\n landingPage: result.landingPage,\r\n creative: result.creative\r\n })\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportClicks: ', error);\r\n });\r\n }\r\n\r\n handleSort = (sortBy) => {\r\n const sort = { ...this.state.sort };\r\n\r\n if (sort.column === sortBy) {\r\n sort.order = (sort.order === 'asc') ? 'desc' : 'asc';\r\n } else {\r\n sort.column = sortBy;\r\n switch (sort.column) {\r\n case 'date':\r\n sort.order = 'asc'\r\n break;\r\n case 'clicks':\r\n sort.order = 'desc'\r\n break;\r\n case 'leads':\r\n sort.order = 'desc'\r\n break;\r\n case 'conversion':\r\n sort.order = 'desc'\r\n break;\r\n case 'sales':\r\n sort.order = 'desc'\r\n break;\r\n case 'cost':\r\n sort.order = 'desc'\r\n break;\r\n case 'epc':\r\n sort.order = 'desc'\r\n break;\r\n default:\r\n throw new Error('Invalid sorting');\r\n }\r\n\r\n }\r\n\r\n const sorted = _.orderBy(this.state.report, sortBy, sort.order)\r\n\r\n this.setState({\r\n report: sorted,\r\n sort: sort\r\n })\r\n }\r\n\r\n render() {\r\n\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Click Report for:
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.affiliateId > 0 &&\r\n \r\n Affiliate ID: {this.props.affiliateId} \r\n
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.creativeId > 0 &&\r\n \r\n Creative: {this.state.creative} \r\n
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.landingPageId > 0 &&\r\n \r\n Landing Page: {this.state.landingPage} \r\n
\r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n\r\n {this.state.report.map(item =>\r\n \r\n {moment.utc(item.date).format(\"YYYY-MM-DD\")} \r\n {Intl.NumberFormat('en-GB').format(item.clicks)} \r\n {Intl.NumberFormat('en-GB').format(item.leads)} \r\n {parseFloat(item.conversion).toFixed(2)} \r\n ${parseFloat(item.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.cost)} \r\n \r\n )}\r\n\r\n \r\n Totals \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.clicks)} \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.leads)} \r\n ${parseFloat(this.state.totals.conversion).toFixed(2)} \r\n ${parseFloat(this.state.totals.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.cost)} \r\n \r\n\r\n \r\n }\r\n \r\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 ReportClicks;","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { verifyToken, clearLocalStorageAndReload } from '../../../assets/JS/functions';\r\nimport { X } from 'react-feather';\r\nimport moment from 'moment';\r\nimport _ from 'lodash';\r\n\r\nclass ReportConversions extends Component {\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n campaign: {}\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n dataLoaded: false\r\n })\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token');\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/conversions?startDate=${this.props.startDate}&endDate=${this.props.endDate}&page=all`;\r\n\r\n if (this.props.offerId) {\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`\r\n }\r\n\r\n if (this.props.affiliateId) {\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n\r\n if (this.props.creativeId) {\r\n fetchUrl = fetchUrl + `&cid=${this.props.creativeId}`;\r\n }\r\n\r\n if (this.props.landingPageId) {\r\n fetchUrl = fetchUrl + `&lpid=${this.props.landingPageId}`;\r\n }\r\n\r\n /* Get the affiliate object from the DB and populate the state information */\r\n\r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n // Set the parent Reports.js state with the total pages for Pagination.\r\n this.props.handleTotalPages(result.total_pages);\r\n\r\n // Get the campaigns returned by this report\r\n this.props.setOffers(_.map(_.uniqBy(result.report, function (e) { return e.campaign_id }), function (campaign) { return _.pick(campaign, ['campaign_id', 'campaign_name']) }))\r\n\r\n // Update the current report with the data.\r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n campaign: result.campaign,\r\n creative: result.creative,\r\n landingPage: result.landing_page\r\n });\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportConversions: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n }\r\n\r\n getReportOutput = () => {\r\n\r\n let result = this.state.report;\r\n let affFilter = this.props.affiliateFilter;\r\n let offerFilter = this.props.offerFilter;\r\n let affMatch = new RegExp(affFilter, \"g\");\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n\r\n if (affFilter !== undefined && affFilter !== null) {\r\n result = _.filter(result, function (item) {\r\n return item.publisher_id.toString().match(affMatch);\r\n });\r\n }\r\n\r\n if (offerFilter !== undefined && offerFilter !== null) {\r\n result = _.filter(result, function (item) {\r\n return parseInt(item.campaign_id) === parseInt(offerFilter)\r\n });\r\n }\r\n\r\n return result.slice(this.props.startRow, this.props.endRow).map(item => {\r\n return (\r\n \r\n {item.click_id} \r\n {moment.utc(item.date).format(\"YYYY-MM-DD HH:mm:ss\")} \r\n {item.data} \r\n {item.status} {item.status === 'Reversed' ? on {moment.utc(item.reversal_date).format(\"YYYY-MM-DD HH:mm:ss\")} : ''} \r\n {item.status === 'Payable' ? moment.utc(item.payout_date).format(\"YYYY-MM-DD HH:mm:ss\") : ''} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.rate)} \r\n \r\n )\r\n });\r\n }\r\n\r\n render() {\r\n\r\n let campaignId = this.state.campaign ? this.state.campaign.campaign_id : 0;\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Conversions Report for:
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.affiliateId > 0 &&\r\n \r\n Affiliate ID: {this.props.affiliateId} \r\n
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.creativeId > 0 &&\r\n \r\n Creative: {this.state.creative} \r\n
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.landingPageId > 0 &&\r\n \r\n Landing Page: {this.state.landingPage} \r\n
\r\n }\r\n\r\n \r\n \r\n \r\n Click ID \r\n Date/Time (EST) \r\n Campaign \r\n Affiliate ID \r\n Data \r\n Status \r\n SubId 1 \r\n SubId 2 \r\n Payment Date (EST) \r\n Sales \r\n CPA \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n {this.getReportOutput()}\r\n \r\n }\r\n \r\n :\r\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 ReportConversions;","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport ReportDropdown from '../ReportDropdown/ReportDropdown';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { verifyToken, clearLocalStorageAndReload } from '../../../assets/JS/functions';\r\nimport { X } from 'react-feather';\r\nimport moment from 'moment';\r\nimport _ from 'lodash';\r\n\r\nclass ReportAffiliates extends Component {\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n campaign: {}\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n dataLoaded: false\r\n })\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token');\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/affiliates?startDate=${this.props.startDate}&endDate=${this.props.endDate}&page=all`;\r\n\r\n if (this.props.offerId) {\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`\r\n }\r\n\r\n if (this.props.affiliateId){\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n\r\n /* Get the affiliate object from the DB and populate the state information */\r\n\r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n // Set the parent Reports.js state with the total pages for Pagination.\r\n this.props.handleTotalPages(result.total_pages);\r\n // Update the current report with the data.\r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n campaign: result.campaign,\r\n totals: result.totals\r\n });\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportAffiliates: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n }\r\n\r\n getReportOutput = () => {\r\n \r\n let result;\r\n let filter = this.props.affiliateFilter;\r\n let match = new RegExp(filter, \"g\");\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n let campaignId = this.state.campaign ? this.state.campaign.campaign_id : 0;\r\n\r\n if (!this.props.affiliateFilter){\r\n result = this.state.report;\r\n } else {\r\n result = _.filter(this.state.report, function(item){\r\n return item.publisher_id.toString().match(match);\r\n });\r\n }\r\n\r\n return result.slice(this.props.startRow, this.props.endRow).map(item => (\r\n \r\n \r\n {this.state.campaign ? \r\n {Intl.NumberFormat('en-GB').format(item.clicks)} \r\n }\r\n \r\n {parseFloat(item.conversion*100).toFixed(2)}% \r\n ${parseFloat(item.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.cost)} \r\n \r\n ))\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Affiliate Report for:
\r\n }\r\n\r\n \r\n \r\n \r\n Affiliate ID \r\n Clicks \r\n Leads \r\n CR \r\n EPC \r\n Sales \r\n Cost \r\n \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n\r\n {this.getReportOutput()}\r\n\r\n \r\n Totals \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.clicks)} \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.leads)} \r\n {parseFloat(this.state.totals.conversion*100).toFixed(2)}% \r\n ${parseFloat(this.state.totals.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.cost)} \r\n \r\n \r\n\r\n \r\n }\r\n \r\n :\r\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 ReportAffiliates;","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { verifyToken, clearLocalStorageAndReload } from '../../../assets/JS/functions';\r\nimport { X } from 'react-feather';\r\nimport moment from 'moment';\r\n\r\nclass ReportCreatives extends Component {\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n campaign: []\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n dataLoaded: false\r\n })\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token'); \r\n\r\n let page = this.props.page - 1;\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/creatives?startDate=${this.props.startDate}&endDate=${this.props.endDate}&page=${page}`;\r\n\r\n if (this.props.offerId) {\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`\r\n }\r\n\r\n if (this.props.affiliateId){\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n \r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n this.props.handleDownloadData(result);\r\n\r\n // Update the current report with the data.\r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n campaign: result.campaign,\r\n totals: result.totals\r\n });\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportCreatives: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n } \r\n\r\n render() {\r\n\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Creative Report for:
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.affiliateId > 0 &&\r\n \r\n Affiliate ID: {this.props.affiliateId} \r\n
\r\n }\r\n\r\n \r\n \r\n \r\n Creative \r\n Clicks \r\n Leads \r\n CR \r\n EPC \r\n Sales \r\n Cost \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n\r\n {this.state.report.map(item => (\r\n \r\n {item.creative_name} \r\n {parseFloat(item.conversion*100).toFixed(2)}% \r\n ${parseFloat(item.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.cost)} \r\n \r\n ))}\r\n\r\n \r\n Totals \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.clicks)} \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.leads)} \r\n {parseFloat(this.state.totals.conversion*100).toFixed(2)}% \r\n ${parseFloat(this.state.totals.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.cost)} \r\n \r\n\r\n \r\n }\r\n \r\n :\r\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 ReportCreatives;","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Loading from '../../../component/UI/Loading/Loading';\r\nimport { verifyToken, clearLocalStorageAndReload } from '../../../assets/JS/functions';\r\nimport { X } from 'react-feather';\r\nimport moment from 'moment';\r\n\r\nclass ReportLandingPages extends Component {\r\n\r\n state = {\r\n dataLoaded: false,\r\n report: [],\r\n campaign: []\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n dataLoaded: false\r\n })\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token'); \r\n\r\n let page = this.props.page - 1;\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/landingPages?startDate=${this.props.startDate}&endDate=${this.props.endDate}&page=${page}`;\r\n\r\n if (this.props.offerId) {\r\n fetchUrl = fetchUrl + `&oid=${this.props.offerId}`\r\n }\r\n\r\n if (this.props.affiliateId){\r\n fetchUrl = fetchUrl + `&aid=${this.props.affiliateId}`;\r\n }\r\n \r\n verifyToken().then(result => {\r\n if (result === true) {\r\n return fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n this.props.handleDownloadData(result);\r\n\r\n // Update the current report with the data.\r\n this.setState({\r\n dataLoaded: true,\r\n report: result.report,\r\n campaign: result.campaign,\r\n totals: result.totals\r\n });\r\n } else if (result[\"success\"] === false) {\r\n if (result.code !== 401) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n }\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n });\r\n } else {\r\n clearLocalStorageAndReload();\r\n }\r\n }).catch(error => {\r\n console.log('Error in ReportLandingPages: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n } \r\n\r\n render() {\r\n\r\n let formattedStartDate = moment(this.props.startDate).format(\"YYYY-MM-DD\");\r\n let formattedEndDate = moment(this.props.endDate).format(\"YYYY-MM-DD\");\r\n\r\n return (\r\n \r\n\r\n {this.state.dataLoaded && this.state.campaign &&\r\n \r\n Landing Page Report for:
\r\n }\r\n\r\n {this.state.dataLoaded && this.props.affiliateId > 0 &&\r\n \r\n Affiliate ID: {this.props.affiliateId} \r\n
\r\n }\r\n\r\n \r\n \r\n \r\n Landing Page \r\n Clicks \r\n Leads \r\n CR \r\n EPC \r\n Sales \r\n Cost \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n \r\n {this.state.report.length === 0 ?\r\n \r\n No stats for this date range. \r\n \r\n :\r\n \r\n\r\n {this.state.report.map(item => (\r\n \r\n {item.landing_page_name} ({item.landing_page_id}) \r\n {parseFloat(item.conversion*100).toFixed(2)}% \r\n ${parseFloat(item.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(item.cost)} \r\n \r\n ))}\r\n\r\n \r\n Totals \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.clicks)} \r\n {Intl.NumberFormat('en-GB').format(this.state.totals.leads)} \r\n {parseFloat(this.state.totals.conversion*100).toFixed(2)}% \r\n ${parseFloat(this.state.totals.epc).toFixed(2)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.sales)} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.totals.cost)} \r\n \r\n\r\n \r\n }\r\n \r\n :\r\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 ReportLandingPages;","import React from 'react';\r\nimport _ from 'lodash';\r\n\r\nconst Pagination = (props) => {\r\n\r\n const pages = _.range(1, props.totalPages + 1);\r\n\r\n function getClasses(page) {\r\n if (page === props.currentPage){\r\n return \"page-item my-1 active\"\r\n } else {\r\n return \"page-item my-1\"\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n {pages.map((page, index) => (\r\n props.handlePageChange(page)}>{page} \r\n \r\n );\r\n}\r\n \r\nexport default Pagination;","import React, { Component } from 'react';\r\nimport { Download, Layers, Filter } from 'react-feather';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport DatePicker from 'react-datepicker';\r\nimport queryString from 'query-string';\r\nimport moment from 'moment';\r\nimport ReportEarnings from './ReportEarnings/ReportEarnings';\r\nimport ReportClicks from './ReportClicks/ReportClicks';\r\nimport ReportConversions from './ReportConversions/ReportConversions';\r\nimport ReportAffiliates from './ReportAffiliates/ReportAffiliates';\r\nimport ReportCreatives from './ReportCreatives/ReportCreatives';\r\nimport ReportLandingPages from './ReportLandingPages/ReportLandingPages';\r\nimport Pagination from '../../component/UI/Pagination/Pagination';\r\nimport { CSVLink } from 'react-csv';\r\n\r\nimport './Report.css';\r\nimport '../../../node_modules/react-datepicker/dist/react-datepicker.css';\r\n\r\nclass Reports extends Component {\r\n\r\n _isMounted = false;\r\n\r\n // When selecting the report type, we need to be able to grab the value. We use the Ref for this.\r\n constructor(props) {\r\n super(props);\r\n this.reportSelect = React.createRef();\r\n this.offerSelect = React.createRef();\r\n }\r\n\r\n state = {\r\n dataLoaded: false,\r\n type: 'earnings',\r\n offerId: '',\r\n affiliateId: '',\r\n creativeId: '',\r\n landingPageId: '',\r\n startDate: '',\r\n endDate: '',\r\n quickDate: 'month',\r\n selectedType: 'earnings',\r\n selectedStartDate: '',\r\n selectedEndDate: '',\r\n preparingCSV: false,\r\n CSVData: '',\r\n page: 1,\r\n totalPages: 1,\r\n resultsPerPage: 50\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this._isMounted = true;\r\n let urlParams = queryString.parse(this.props.location.search);\r\n let affiliateId;\r\n let creativeId;\r\n let landingPageId;\r\n let offerId;\r\n let startDate;\r\n let endDate;\r\n let quickDate;\r\n let type;\r\n let page;\r\n\r\n // Get the report type if specified. Get the offer ID if specified.\r\n this.props.type ? type = this.props.type : type = 'earnings';\r\n\r\n // Get the date from URL. If there's nothing, then use today.\r\n if (urlParams.startDate && urlParams.endDate) {\r\n startDate = urlParams.startDate;\r\n endDate = urlParams.endDate;\r\n } else {\r\n startDate = moment().startOf(\"month\").format(\"YYYY-MM-DD\");\r\n endDate = moment().endOf(\"month\").format(\"YYYY-MM-DD\");\r\n }\r\n\r\n // Get the offer ID from the URL.\r\n offerId = urlParams.oid ? urlParams.oid : 0;\r\n\r\n // Get the affiliate ID from the URL.\r\n affiliateId = urlParams.aid ? urlParams.aid : 0;\r\n\r\n // Get the creative ID from the URL.\r\n creativeId = urlParams.cid ? urlParams.cid : 0;\r\n\r\n // Get the landing page ID from the URL.\r\n landingPageId = urlParams.lpid ? urlParams.lpid : 0;\r\n\r\n /* Get the page number from the URL. If none, then use 1. NOTE: The API starts at page 0, so we'll need to subtract 1 before\r\n fetching from the API */\r\n if (urlParams.page) {\r\n page = parseInt(urlParams.page);\r\n } else {\r\n page = 1;\r\n }\r\n\r\n let startRow = (page - 1) * this.state.resultsPerPage;\r\n let endRow = (page * this.state.resultsPerPage) - 1;\r\n\r\n // See if the dates are one of the quick dates\r\n if (startDate === moment().startOf(\"month\").format(\"YYYY-MM-DD\") && endDate === moment().endOf(\"month\").format(\"YYYY-MM-DD\")) {\r\n quickDate = \"month\";\r\n } else if (startDate === moment().subtract(1, \"month\").startOf(\"month\").format(\"YYYY-MM-DD\") && endDate === moment().subtract(1, \"month\").endOf(\"month\").format(\"YYYY-MM-DD\")) {\r\n quickDate = \"lastMonth\";\r\n } else if (startDate === moment().startOf(\"day\").format(\"YYYY-MM-DD\") && endDate === moment().startOf(\"day\").format(\"YYYY-MM-DD\")) {\r\n quickDate = \"today\";\r\n } else if (startDate === moment().subtract(1, \"d\").startOf(\"day\").format(\"YYYY-MM-DD\") && endDate === moment().subtract(1, \"d\").startOf(\"day\").format(\"YYYY-MM-DD\")) {\r\n quickDate = \"yesterday\";\r\n } else {\r\n quickDate = \"custom\";\r\n }\r\n\r\n // Update the state with the chosen dates\r\n this.setState({\r\n dataLoaded: true,\r\n type: type,\r\n offerId: offerId,\r\n affiliateId: affiliateId,\r\n creativeId: creativeId,\r\n landingPageId: landingPageId,\r\n startDate: moment(startDate).startOf(\"day\").format('YYYY-MM-DD HH:mm:ss'),\r\n endDate: moment(endDate).startOf(\"day\").format('YYYY-MM-DD HH:mm:ss'),\r\n quickDate: quickDate,\r\n selectedType: type,\r\n selectedStartDate: moment(startDate).startOf(\"day\").format('YYYY-MM-DD HH:mm:ss'),\r\n selectedEndDate: moment(endDate).startOf(\"day\").format('YYYY-MM-DD HH:mm:ss'),\r\n page: page,\r\n startRow: startRow,\r\n endRow: endRow\r\n });\r\n }\r\n\r\n handleChangeStart = date => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n selectedStartDate: date\r\n });\r\n }\r\n }\r\n\r\n handleChangeEnd = date => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n selectedEndDate: date\r\n });\r\n }\r\n }\r\n\r\n handleQuickDate = event => {\r\n let selectedStartDate = this.state.selectedStartDate;\r\n let selectedEndDate = this.state.selectedEndDate;\r\n\r\n switch (event.target.value) {\r\n case 'month':\r\n selectedStartDate = moment().startOf(\"month\").format('YYYY-MM-DD')\r\n selectedEndDate = moment().endOf(\"month\").format('YYYY-MM-DD')\r\n break;\r\n case 'lastMonth':\r\n selectedStartDate = moment().subtract(1, 'month').startOf(\"month\").format('YYYY-MM-DD')\r\n selectedEndDate = moment().subtract(1, 'month').endOf(\"month\").format('YYYY-MM-DD')\r\n break;\r\n case 'today':\r\n selectedStartDate = moment().startOf(\"day\").format('YYYY-MM-DD')\r\n selectedEndDate = moment().endOf(\"day\").format('YYYY-MM-DD')\r\n break;\r\n case 'yesterday':\r\n selectedStartDate = moment().subtract(1, 'day').startOf(\"day\").format('YYYY-MM-DD')\r\n selectedEndDate = moment().subtract(1, 'day').endOf(\"day\").format('YYYY-MM-DD')\r\n break;\r\n default:\r\n }\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n quickDate: event.target.value,\r\n selectedStartDate: selectedStartDate,\r\n selectedEndDate: selectedEndDate\r\n });\r\n }\r\n }\r\n\r\n handleChangeType = () => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n selectedType: this.reportSelect.current.value\r\n });\r\n }\r\n }\r\n\r\n handleTotalPages = (totalPages) => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n totalPages: totalPages\r\n });\r\n }\r\n }\r\n\r\n /* This will apply the settings based on the selected options */\r\n handleReport = (requestedPage = this.state.page) => {\r\n let startDate = moment(this.state.selectedStartDate).startOf(\"day\").format('YYYY-MM-DD');\r\n let endDate = moment(this.state.selectedEndDate).startOf(\"day\").format('YYYY-MM-DD');\r\n let type = this.state.selectedType;\r\n let offerId = this.state.offerId;\r\n let affiliateId = this.state.affiliateId;\r\n let creativeId = this.state.creativeId;\r\n let landingPageId = this.state.landingPageId;\r\n let page = requestedPage;\r\n let startRow = (page - 1) * this.state.resultsPerPage;\r\n let endRow = (page * this.state.resultsPerPage) - 1;\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n type: type,\r\n page: page,\r\n startRow: startRow,\r\n endRow: endRow\r\n });\r\n }\r\n\r\n let url = `/reports/${type}?startDate=${startDate}&endDate=${endDate}`;\r\n\r\n if (offerId > 0) {\r\n url = url + `&oid=${offerId}`;\r\n }\r\n\r\n if (affiliateId > 0) {\r\n url = url + `&aid=${affiliateId}`\r\n }\r\n\r\n if (creativeId > 0) {\r\n url = url + `&cid=${creativeId}`\r\n }\r\n\r\n if (landingPageId > 0) {\r\n url = url + `&lpid=${landingPageId}`\r\n }\r\n\r\n if (type === \"conversions\" || type === \"affiliates\") {\r\n url = url + `&page=${page}`\r\n }\r\n\r\n this.props.history.push(url);\r\n }\r\n\r\n handlePageChange = (requestedPage = this.state.page) => {\r\n let page = requestedPage;\r\n let startRow = (page - 1) * this.state.resultsPerPage;\r\n let endRow = (page * this.state.resultsPerPage) - 1;\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n page: page,\r\n startRow: startRow,\r\n endRow: endRow\r\n })\r\n }\r\n }\r\n\r\n prepareCSV = () => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n preparingCSV: true\r\n });\r\n }\r\n\r\n const mbToken = localStorage.getItem('mb-auth-token');\r\n let report;\r\n\r\n if (this.state.type === 'conversions') {\r\n report = 'conversions'\r\n } else if (this.state.type === 'affiliates') {\r\n report = 'affiliates'\r\n }\r\n\r\n let fetchUrl = `${process.env.REACT_APP_API_URL}/reports/${report}?startDate=${this.state.startDate}&endDate=${this.state.endDate}`;\r\n\r\n if (this.state.offerId > 0) {\r\n fetchUrl = fetchUrl + `&oid=${this.state.offerId}`;\r\n }\r\n\r\n if (this.state.affiliateId > 0) {\r\n fetchUrl = fetchUrl + `&aid=${this.state.affiliateId}`\r\n }\r\n\r\n if (this.state.type === \"conversions\" || this.state.type === \"affiliates\") {\r\n fetchUrl = fetchUrl + `&page=all`\r\n }\r\n\r\n /* Get the affiliate object from the DB and populate the state information */\r\n fetch(fetchUrl, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': mbToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(\r\n (result) => {\r\n if (result[\"success\"] === true) {\r\n // Set the data for CSV download\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n preparingCSV: false,\r\n csvData: result\r\n });\r\n }\r\n } else if (result[\"success\"] === false) {\r\n this.props.showSystemMessage(\"error\", \"There was an error fetching the data. Please try again.\");\r\n } else {\r\n this.props.showSystemMessage(\"error\", result.errors.message);\r\n }\r\n })\r\n .catch(error => {\r\n console.log('Error in Reports: ', error);\r\n this.props.showSystemMessage(\"error\", \"Connection error.\");\r\n });\r\n }\r\n\r\n handleDownloadData = (data) => {\r\n\r\n if (this._isMounted) {\r\n this.setState({\r\n csvData: data\r\n });\r\n }\r\n }\r\n\r\n getCSVLink = () => {\r\n if (this.state.csvData) {\r\n\r\n // Grab the required data\r\n let { report, totals } = this.state.csvData;\r\n\r\n // Create the array that will hold the CSV data\r\n let formattedData = [];\r\n\r\n // Create the headers for the CSV, add the data, add the totals\r\n switch (this.state.type) {\r\n case 'earnings':\r\n // Headers\r\n formattedData.push(['ID', 'Campaign', 'Clicks', 'Leads', 'CR', 'EPC', 'Sales', 'Cost']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.campaign_id, row.name, Intl.NumberFormat('en-GB').format(row.clicks), Intl.NumberFormat('en-GB').format(row.leads), parseFloat(row.conversion).toFixed(2), parseFloat(row.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.cost)])\r\n );\r\n // Totals\r\n formattedData.push(['', '', Intl.NumberFormat('en-GB').format(totals.clicks), Intl.NumberFormat('en-GB').format(totals.leads), parseFloat(totals.conversion).toFixed(2), parseFloat(totals.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.cost)]);\r\n\r\n break;\r\n\r\n case 'clicks':\r\n // Headers\r\n formattedData.push(['Date', 'Clicks', 'Leads', 'CR', 'EPC', 'Sales', 'Cost']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.date, Intl.NumberFormat('en-GB').format(row.clicks), Intl.NumberFormat('en-GB').format(row.leads), parseFloat(row.conversion).toFixed(2), parseFloat(row.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.cost)])\r\n );\r\n // Totals\r\n formattedData.push(['', Intl.NumberFormat('en-GB').format(totals.clicks), Intl.NumberFormat('en-GB').format(totals.leads), parseFloat(totals.conversion).toFixed(2), parseFloat(totals.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.cost)]);\r\n\r\n break;\r\n\r\n case 'conversions':\r\n // Headers\r\n formattedData.push(['Click ID', 'Date/Time (EST)', 'Campaign ID', 'Campaign Name', 'Affiliate ID', 'Data', 'Status', 'SubId 1', 'SubId 2', 'Payment Date (EST)', 'Sales', 'CPA']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.click_id, row.date, row.campaign_id, row.campaign_name, row.publisher_id, row.data, row.status, row.subid1, row.subid2, row.payout_date, Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.rate)])\r\n );\r\n\r\n break;\r\n\r\n case 'affiliates':\r\n // Headers\r\n formattedData.push(['Affiliate ID', 'Clicks', 'Leads', 'CR', 'EPC', 'Sales', 'Cost']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.publisher_id, Intl.NumberFormat('en-GB').format(row.clicks), Intl.NumberFormat('en-GB').format(row.leads), parseFloat(row.conversion).toFixed(2), parseFloat(row.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.cost)])\r\n );\r\n // Totals\r\n formattedData.push(['', Intl.NumberFormat('en-GB').format(totals.clicks), Intl.NumberFormat('en-GB').format(totals.leads), parseFloat(totals.conversion).toFixed(2), parseFloat(totals.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.cost)]);\r\n\r\n break;\r\n\r\n case 'creatives':\r\n // Headers\r\n formattedData.push(['Creative', 'Clicks', 'Leads', 'CR', 'EPC', 'Sales', 'Cost']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.creative_name, Intl.NumberFormat('en-GB').format(row.clicks), Intl.NumberFormat('en-GB').format(row.leads), parseFloat(row.conversion).toFixed(2), parseFloat(row.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.cost)])\r\n );\r\n // Totals\r\n formattedData.push(['', Intl.NumberFormat('en-GB').format(totals.clicks), Intl.NumberFormat('en-GB').format(totals.leads), parseFloat(totals.conversion).toFixed(2), parseFloat(totals.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.cost)]);\r\n\r\n break;\r\n\r\n case 'landingPages':\r\n // Headers\r\n formattedData.push(['Landing Page ID', 'Landing Page Name', 'Clicks', 'Leads', 'CR', 'EPC', 'Sales', 'Cost']);\r\n // Data\r\n report.map(row =>\r\n formattedData.push([row.landing_page_id, row.landing_page_name, Intl.NumberFormat('en-GB').format(row.clicks), Intl.NumberFormat('en-GB').format(row.leads), parseFloat(row.conversion).toFixed(2), parseFloat(row.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(row.cost)])\r\n );\r\n // Totals\r\n formattedData.push(['', '', Intl.NumberFormat('en-GB').format(totals.clicks), Intl.NumberFormat('en-GB').format(totals.leads), parseFloat(totals.conversion).toFixed(2), parseFloat(totals.epc).toFixed(2), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.sales), Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(totals.cost)]);\r\n\r\n break;\r\n\r\n default:\r\n throw new Error(\"Invalid report type\");\r\n }\r\n\r\n return \r\n
\r\n
\r\n
Reports
\r\n
\r\n {this.getCSVLink()}\r\n {/*
\r\n
\r\n
\r\n
\r\n
\r\n \r\n Campaign Summary \r\n {this.state.offerId &&\r\n /* Only available if there is an offer selected. */\r\n Clicks \r\n }\r\n Conversions \r\n Affiliates \r\n {this.state.offerId &&\r\n /* These options are only available if there is an offer selected. */\r\n \r\n Creatives \r\n Landing Pages \r\n \r\n }\r\n \r\n
\r\n
\r\n {this.state.selectedType !== 'referrals' &&\r\n
\r\n \r\n \r\n This Month \r\n Last Month \r\n Today \r\n Yesterday \r\n Custom \r\n \r\n
\r\n {this.state.quickDate === 'custom' &&\r\n \r\n \r\n { this.handleChangeStart(date) }}\r\n className=\"form-control form-control-sm display-inline-block mr-2 my-1\"\r\n todayButton={\"Today\"} />\r\n
\r\n to
\r\n \r\n { this.handleChangeEnd(date) }}\r\n className=\"form-control form-control-sm display-inline-block mr-2 my-1\"\r\n todayButton={\"Today\"} />\r\n
\r\n \r\n }\r\n \r\n }\r\n
\r\n this.handleReport()}\r\n className=\"btn btn-primary btn-sm\">Run Report\r\n
\r\n
\r\n
\r\n\r\n {(this.state.type === 'conversions' || this.state.type === 'affiliates') &&\r\n\r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n By Offer \r\n {this.state.offerList && this.state.offerList.map(campaign => {\r\n return {campaign.campaign_name} \r\n })}\r\n \r\n }\r\n
\r\n
\r\n
\r\n }\r\n
\r\n {this.state.dataLoaded &&\r\n /* Display the selected report */\r\n reportToDisplay\r\n }\r\n
\r\n {(this.state.type === 'conversions' || this.state.type === 'affiliates') &&\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {this.state.dataLoaded ?\r\n \r\n
\r\n
\r\n
Campaigns
\r\n
\r\n \r\n \r\n \r\n \r\n {this.toggleFilter(\"All\")}}>All \r\n {this.toggleFilter(\"Active\")}}>Active \r\n {this.toggleFilter(\"Hidden\")}}>Hidden \r\n {this.toggleFilter(\"Testing\")}}>Testing \r\n {this.toggleFilter(\"Cancelled\")}}>Cancelled \r\n {this.toggleFilter(\"By Request\")}}>By Request \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Offer ID \r\n Name \r\n Status \r\n \r\n \r\n \r\n { this.state.filteredCampaigns.length > 0 ?\r\n this.state.filteredCampaigns.map(campaign => {\r\n return (\r\n \r\n {campaign.campaign_id} \r\n {campaign.status} \r\n \r\n )\r\n })\r\n :\r\n \r\n No campaigns. \r\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 Campaigns;","import React from 'react';\r\nimport './Footer.css';\r\n\r\nconst footer = () => (\r\n \r\n
\r\n 2023 - MaxBounty Inc.\r\n
\r\n
{displayedOS} {os} )\r\n });\r\n } else {\r\n if (details.desktop_traffic !== 'Y') {\r\n rows = 'All mobile operating system allowed';\r\n } else {\r\n rows = 'All device operating system allowed';\r\n }\r\n }\r\n return rows;\r\n }\r\n\r\n toggleDescriptionModal = () => {\r\n this.setState({ openDescriptionModal: !this.state.openDescriptionModal });\r\n }\r\n\r\n render() {\r\n\r\n const { allowed_countries, details } = this.props.data;\r\n\r\n // The classes for the country section will change depending on whether it's expanded or not.\r\n let countryClasses = 'position-relative country-container';\r\n let countryOverlayClasses = 'position-absolute text-center country-overlay';\r\n let countryCountIsBig = 5;\r\n\r\n if (this.state.expandCountries) {\r\n countryClasses = 'position-relative country-container open';\r\n countryOverlayClasses = 'position-absolute text-center country-overlay open';\r\n } else {\r\n if (allowed_countries.length > countryCountIsBig) {\r\n countryClasses = 'position-relative country-container closed';\r\n } else {\r\n countryClasses = 'position-relative country-container closed short';\r\n }\r\n countryOverlayClasses = 'position-absolute text-center country-overlay closed';\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
{this.props.data.details.name} \r\n
\r\n
\r\n \r\n
\r\n Campaign Information\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{details.name}
\r\n
\r\n Description \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n \r\n Status \r\n \r\n {details.status === 'Cancelled' ?\r\n {details.status} \r\n :\r\n {details.status} \r\n } \r\n \r\n \r\n \r\n Countries Allowed \r\n \r\n \r\n {allowed_countries.length > countryCountIsBig && (\r\n
\r\n \r\n {this.state.expandCountries ? See Less : See More }\r\n \r\n
\r\n )}\r\n {details.geo_filtering === 'Y' ?\r\n this.getCountryList()\r\n :\r\n
Traffic allowed from all countries \r\n }\r\n
{/* props.allowedCountries*/}\r\n \r\n \r\n Devices \r\n {this.getOSlist()} \r\n \r\n \r\n Expiry Date \r\n {details.expiry_date} \r\n \r\n \r\n Tracking Type \r\n \r\n {(details.tracking_type === 'S' || details.tracking_type === 'G') ?\r\n Server-to-server tracking \r\n : details.tracking_type === 'L' ?\r\n Pixel tracking \r\n : details.tracking_type === 'M' ?\r\n MaxBounty Tag \r\n : details.tracking_type === 'I'?\r\n iFrame tracking \r\n : details.tracking_type === 'A' ?\r\n API tracking \r\n :\r\n Unknown \r\n }\r\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 CampaignInfo;","import React from 'react';\r\n\r\nimport integration2 from '../../../../assets/images/integration-2.png';\r\nimport integration3 from '../../../../assets/images/integration-3.png';\r\n\r\nimport './IntegrationModal.css';\r\n\r\nconst integrationModal = (props) => {\r\n\r\n return (\r\n \r\n
\r\n
Using your MaxBounty Postback \r\n \r\n
\r\n
\r\n
Step 1 \r\n
When a potential customer clicks on one of our affiliate links,\r\n they are sent to your landing page along with some additional information int the URL. The key\r\n piece of the information is the clickID .
\r\n
\r\n
{\"http://www.your-landing-page.com?\"}{\"clickid={clickID}\"} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Step 2 \r\n
As the customer travels trhough your sales funnel, you must keep track of this clickID . Ask your developer to extract this information from the URL parameter and pass is along to subsequent pages. This can be done via URL parameters, cookies, or HTML5 local storage
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Step 3 \r\n
When your customer arrives on your \"Thank You\" page, they've reached the end of the conversion process. It is at this point that you need to grab the clickID , place it in the postback URL, and inform us of the conversion.
\r\n
\r\n
\r\n
\r\n
Here is the anatomy of your postback URL:
\r\n \r\n
\r\n
\r\n \r\n \r\n Parameter \r\n What to pass to MaxBounty \r\n \r\n \r\n \r\n \r\n mbr \r\n The rate name for the payout (optional, but should be used if you have multiple rates) \r\n \r\n \r\n mbd \r\n An identifier from your system, such as a lead_id, order_id, etc. (optional) \r\n \r\n \r\n mbi \r\n The clickID we originally sent you (required) \r\n \r\n \r\n mbs \r\n The sale amount (required for revshare rates) \r\n \r\n \r\n
\r\n
\r\n \r\n\r\n
The \"mbd\" and \"mbs\" parameters should be filled with data from your system, while the \"mbi\" parameter must be the same clickID we originally sent you. Your final postback URL may look similar to this:
\r\n
\r\n
https:/www.{props.trackingDomain}.com/trk/lead?mbr=over_thirty&mbd=16hh8462h13&mbi=1902191751&mbs=25.00
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
Step 4 \r\n
The final part of the process is actually making a request to the postback URL. Currently, there are 3 ways of doing so. Your advertiser manager can help you choose the best method for your needs.
\r\n
**The following are just examples. Use the \"Get Code\" link to get your customized code.**
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Image Pixel
\r\n
\r\n
<img src={`https://www.${props.trackingDomain}.com/trk/lead?mbr=18&mbd=137&mbi=1902191751&mbs=25.00`} width=0 height=0>
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n iFrame
\r\n
\r\n
<iframe src={`\"https://www.${props.trackingDomain}.com/trk/lead?mbr=18&mbd=137&mbi=1902191751&mbs=25.00\"`} width=0 height=0 frameborder=0></iframe>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Server
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Using your MaxBounty Postback \r\n \r\n
\r\n
\r\n
Step 1 \r\n
When a potential customer clicks on one of our affiliate links, we drop a cookie on their browser and then they are sent to your landing page.
\r\n
\r\n
\r\n
\r\n
Step 2 \r\n
When your customer arrives on your \"Thank You\" page, you must simply place the postback code on that thank you page to inform us of the conversion.
\r\n
You can find your customized postback code by clicking the \"Get Code\" link for each rate.
\r\n
The following is just an example of how your code may look.
\r\n
\r\n
\r\n <html> \r\n
\r\n
\r\n
\r\n
Submit \r\n`\r\n\r\n return ( \r\n \r\n
\r\n
Your MaxBounty Tag \r\n \r\n
\r\n
Add the following code to the <head> section of your website's HTML. This is your MB Tag. Please note that it must be on every page of your site.
\r\n
\r\n
\r\n \r\n \r\n Copy \r\n \r\n \r\n
\r\n
{pixel} \r\n
\r\n
\r\n To track a lead, you can simply call our track event by placing your postback code in the <head> section of your page where the conversion should occur. The postback code must be below your MB Tag.\r\n
\r\n
This will trigger a lead upon page load. \r\n
\r\n
<script>mbc('track')</script> \r\n
\r\n
\r\n You can also track a lead dynamically, for example with the click of a button.\r\n
\r\n
This will trigger a lead upon a button click. \r\n
\r\n
\r\n Your conversions will now begin tracking. Please reach out to your advertiser manager to test your integration.
\r\n\r\n
\r\n\r\n \r\n
updateRateNameInfo(!rateNameInfo)}>\r\n {rateNameInfo ? \r\n { rateNameInfo &&\r\n
\r\n
\r\n The track event has an optional second argument that can receive various pieces of information. The argument must be a javascript object, and it can receive several parameters. If you are sending multiple parameters, they should be separated with a comma.mbr parameter, and setting it to one of your rate names.\r\n
\r\n
\r\n {props.rates.length < 1 ? \r\n
<script>mbc('track', {mbr:'example_rate'})</script> \r\n :\r\n props.rates.map((rate, i) => (rate.status === 'Active' &&\r\n
\r\n
{rate.description}
\r\n
<script>mbc('track', {mbr:'{rate.name ? rate.name : 'example_rate'}'})</script> \r\n
\r\n ))\r\n } \r\n
\r\n
\r\n To ensure conversions pay the appropriate payout, please use the \"Get Code\" buttons beside your rates to copy your postback code.\r\n
\r\n
\r\n }\r\n
\r\n
updateSaleAmountInfo(!saleAmountInfo)}>\r\n {saleAmountInfo ? \r\n { saleAmountInfo &&\r\n
\r\n
\r\n The track event has an optional second argument that can receive various pieces of information. The argument must be a javascript object, and it can receive several parameters. If you are sending multiple parameters, they should be separated with a comma.mbs parameter. In the example below, a sale amount of $100 is being passed. Make sure to only include numeric values.\r\n
\r\n
\r\n {\r\n props.rates.findIndex(rate => rate.rate_type === 'Revshare') >= 0 ?\r\n
<script>mbc('track', {mbr:'{props.rates.find(rate => rate.rate_type === 'Revshare').name}', mbs:'100'})</script> \r\n :\r\n
<script>mbc('track', {mbs:100})</script> \r\n }\r\n
\r\n
\r\n }\r\n
\r\n
updateMerchantDataInfo(!merchantDataInfo)}>\r\n {merchantDataInfo ? \r\n { merchantDataInfo &&\r\n
\r\n
\r\n The track event has an optional second argument that can receive various pieces of information. The argument must be a javascript object, and it can receive several parameters. If you are sending multiple parameters, they should be separated with a comma.mbd parameter.\r\n
\r\n
\r\n You can pass MaxBounty an ID from your system along with each conversion. This will attribute a conversion to a particular order ID from your system, which can help identify the source of conversions.\r\n
\r\n
\r\n
<script>mbc('track', {mbd:'123456'})</script> \r\n
\r\n
\r\n This will allow us to pinpoint exactly which conversion relates to a particular order from your system.\r\n
\r\n
\r\n }\r\n
\r\n
updateExampleInfo(!exampleInfo)}>\r\n {exampleInfo ? \r\n { exampleInfo &&\r\n
\r\n
\r\n The following is an example of the track event being called with three parameters in the second argument: a rate called \"payout\", an order ID of \"123456\", and a sale amount of $100.\r\n
\r\n
\r\n
<script>mbc('track', {mbr:'payout', mbd:'123456', mbs:100})</script> \r\n
\r\n
\r\n }\r\n
\r\n
updatePrepopInfo(!prepopInfo)}>\r\n {prepopInfo ? \r\n { prepopInfo &&\r\n
\r\n
\r\n The MB Tag has built-in functionality to enable prepop on your landing page forms. You can simply add the mb-prepop attribute to your form fields, and set it to an appropriate name. Usually, the value of the \"name\" field would be a good choice.
\r\n
\r\n
<input type=\"text\" name=\"first_name\" mb-prepop=\"first_name\"/> \r\n
\r\n
\r\n Once you have set up mb-prepop attributes on your fields, please let your advertiser manager know their values, and they will update your campaign so that our affiliates will know what data to forward to your landing page. \r\n
\r\n
\r\n }\r\n
\r\n
updateTestingInfo(!testingInfo)}>\r\n {testingInfo ? \r\n { testingInfo &&\r\n
\r\n
\r\n Your advertiser manager will be in contact with you once your campaign is ready to start testing. Here are your testing links:\r\n
\r\n
\r\n {props.landingPages.length < 1 ? \r\n
No landing pages have been created. Please ask your advertiser manager to help you create one. \r\n :\r\n props.landingPages.map((lp, i) => (\r\n
\r\n
{lp.name} {lp.default_lp === 'Y' && '(Default)'}
\r\n
{lp.test_link} \r\n
\r\n ))\r\n } \r\n
\r\n
\r\n }\r\n
\r\n \r\n
\r\n
;\r\n } else if (this.props.trackingType === 'L' || this.props.trackingType === 'I') {\r\n return \r\n }\r\n }\r\n\r\n getCodeModalType = () => {\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n \r\n \r\n
Postback
\r\n {this.props.trackingType === 'M' &&\r\n
Add the following code to your website's HTML anywhere after your MaxBounty tag.
\r\n } \r\n
\r\n
{this.state.rateInModal.postback} \r\n
\r\n
\r\n Copy \r\n
\r\n \r\n {this.getModalType()}\r\n \r\n \r\n
\r\n
Rates
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Description \r\n Name \r\n Type \r\n Rate \r\n Postback \r\n \r\n \r\n \r\n {this.props.rates.length < 1 ?\r\n \r\n No rates found. \r\n :\r\n this.props.rates.map((rate, i) => (rate.status === 'Active' &&\r\n \r\n {rate.description} \r\n {rate.name} \r\n {rate.rate_type} \r\n {rate.rate_type === 'Fixed' ? `$${parseFloat(rate.rate).toFixed(2)}`: `${rate.rate}%` } \r\n this.togglePostbackModal(rate)}>Get Code \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 CampaignRates;\r\n","import React from 'react';\r\n\r\nimport { CheckCircle } from 'react-feather';\r\n\r\nconst landingPages = (props) => (\r\n \r\n
Landing Pages
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
Creatives
\r\n
\r\n
\r\n
\r\n \r\n {this.props.creatives.length === 0 ? No creatives. :\r\n this.props.creatives.map(creative =>\r\n \r\n {creative.type}_{creative.creative_id} ({creative.width}x{creative.height})\r\n \r\n \r\n this.toggleCreativeModal(creative.thumbnail)}>Banner \r\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 Creatives;","import React, { Component } from 'react';\r\n\r\nimport { Link } from 'react-router-dom';\r\nimport moment from 'moment';\r\n\r\nclass TodayStats extends Component {\r\n\r\n state = {\r\n stats: {},\r\n dataLoaded: false\r\n }\r\n\r\n componentDidMount() {\r\n\r\n const authToken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/advertiserStats/todayStats/${this.props.campaignId}`, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authToken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n \r\n if (result[\"success\"] === true) {\r\n this.setState({ stats: result.stats, dataLoaded: true });\r\n } else if (result[\"success\"] === false) {\r\n this.setState({ dataLoaded: true });\r\n } else {\r\n this.setState({ dataLoaded: true });\r\n this.props.showSystemMessage('error', 'An internal error occurred while fetching stats.');\r\n }\r\n })\r\n .catch(error => this.props.showSystemMessage('error', error.message));\r\n }\r\n\r\n render() {\r\n const today = moment().format('YYYY-MM-DD');\r\n return (\r\n \r\n
\r\n
Today's Stats
\r\n\r\n
\r\n\r\n
\r\n {this.state.dataLoaded &&\r\n
\r\n
\r\n
\r\n \r\n Clicks\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
}\r\n
\r\n
\r\n
Most Recent Leads
\r\n
\r\n
\r\n
\r\n {this.state.dataLoaded &&\r\n
\r\n
\r\n
\r\n \r\n \r\n Date/Time \r\n Sales \r\n CPA \r\n Status \r\n \r\n \r\n \r\n {this.state.recentLeads.length <= 0\r\n ?\r\n \r\n No recent leads. \r\n \r\n \r\n \r\n \r\n :\r\n this.state.recentLeads.map(lead =>\r\n \r\n {moment(lead.lead_date).format(\"YYYY/MM/DD HH:mm:ss\")} \r\n ${lead.amount} \r\n ${lead.rate} \r\n {this.getStatus(lead.status, lead.reversal_date)} \r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
}\r\n
\r\n {this.state.dataLoaded && this.state.campaignData ?\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Error\r\n
\r\n
\r\n This campaign doesn't exist.\r\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 CampaignPage;","import React from 'react';\r\n\r\nimport './UserDetails.css';\r\n\r\nconst userDetails = (props) => (\r\n \r\n
{props.advertiser.name}
\r\n
@{props.advertiser.company} | Advertiser ID# {props.advertiser.advertiser_id}
\r\n
\r\n\r\n \r\n\r\n {/* Background Video */}\r\n
\r\n \r\n \r\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 LoadingPage;","import React, { Component } from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport { X } from 'react-feather';\r\n\r\nimport './SystemMessage.css';\r\n\r\nclass SystemMessage extends Component {\r\n\r\n state = {\r\n in: false\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n in: true\r\n }) \r\n }\r\n\r\n componentWillUnmount(){\r\n this.setState({\r\n in: false \r\n })\r\n }\r\n\r\n render() { \r\n\r\n let classes = \"system-message d-flex align-items-center\";\r\n\r\n if(this.props.type === 'success'){\r\n classes = classes + ' success';\r\n }else if (this.props.type === 'error'){\r\n classes = classes + ' error';\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
{this.props.children}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Invoices\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Invoice Number \r\n Status \r\n Amount \r\n Date \r\n \r\n \r\n \r\n \r\n {this.state.dataLoaded && this.state.invoices.length === 0 ?\r\n \r\n You do not have any invoices. \r\n \r\n \r\n \r\n \r\n :\r\n this.state.invoices.slice(this.state.startRow, this.state.endRow).map(invoice => (\r\n \r\n {invoice.invoice_id} \r\n {invoice.status} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(invoice.amount)} \r\n {moment(invoice.date).format(\"d MMM YYYY\")} \r\n {invoice.qb_link && \r\n \r\n ))\r\n }\r\n \r\n Total: \r\n \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.invoicesTotal)} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Account Balance\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Transactions \r\n Amount \r\n Date \r\n \r\n \r\n \r\n {this.state.dataLoaded && this.state.transactions.length === 0 && this.state.currentBalance === 0 ?\r\n \r\n You do not have any transactions. \r\n \r\n \r\n \r\n :\r\n \r\n \r\n This Period \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.currentBalance)} \r\n {moment().format(\"d MMM YYYY\")} \r\n \r\n { this.state.transactions.slice(this.state.startRow, this.state.endRow).map(transaction => (\r\n \r\n {transaction.type} \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(transaction.amount)} \r\n {moment(transaction.date).format(\"d MMM YYYY\")} \r\n \r\n )) }\r\n \r\n }\r\n \r\n Total: \r\n ${Intl.NumberFormat('en-GB', { minimumFractionDigits: 2 }).format(this.state.total)} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.state.countries.map(country => {country.name} )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Countries;","export default {\r\n states: [\r\n {\r\n name: \"Alabama\",\r\n value: \"AL\"\r\n },\r\n {\r\n name: \"Alaska\",\r\n value: \"AK\"\r\n },\r\n {\r\n name: \"American Samoa\",\r\n value: \"AS\"\r\n },\r\n {\r\n name: \"Arizona\",\r\n value: \"AZ\"\r\n },\r\n {\r\n name: \"Arkansas\",\r\n value: \"AR\"\r\n },\r\n {\r\n name: \"California\",\r\n value: \"CA\"\r\n },\r\n {\r\n name: \"Colorado\",\r\n value: \"CO\"\r\n },\r\n {\r\n name: \"Connecticut\",\r\n value: \"CT\"\r\n },\r\n {\r\n name: \"Delaware\",\r\n value: \"DE\"\r\n },\r\n {\r\n name: \"District Of Columbia\",\r\n value: \"DC\"\r\n },\r\n {\r\n name: \"Federated States Of Micronesia\",\r\n value: \"FM\"\r\n },\r\n {\r\n name: \"Florida\",\r\n value: \"FL\"\r\n },\r\n {\r\n name: \"Georgia\",\r\n value: \"GA\"\r\n },\r\n {\r\n name: \"Guam\",\r\n value: \"GU\"\r\n },\r\n {\r\n name: \"Hawaii\",\r\n value: \"HI\"\r\n },\r\n {\r\n name: \"Idaho\",\r\n value: \"ID\"\r\n },\r\n {\r\n name: \"Illinois\",\r\n value: \"IL\"\r\n },\r\n {\r\n name: \"Indiana\",\r\n value: \"IN\"\r\n },\r\n {\r\n name: \"Iowa\",\r\n value: \"IA\"\r\n },\r\n {\r\n name: \"Kansas\",\r\n value: \"KS\"\r\n },\r\n {\r\n name: \"Kentucky\",\r\n value: \"KY\"\r\n },\r\n {\r\n name: \"Louisiana\",\r\n value: \"LA\"\r\n },\r\n {\r\n name: \"Maine\",\r\n value: \"ME\"\r\n },\r\n {\r\n name: \"Marshall Islands\",\r\n value: \"MH\"\r\n },\r\n {\r\n name: \"Maryland\",\r\n value: \"MD\"\r\n },\r\n {\r\n name: \"Massachusetts\",\r\n value: \"MA\"\r\n },\r\n {\r\n name: \"Michigan\",\r\n value: \"MI\"\r\n },\r\n {\r\n name: \"Minnesota\",\r\n value: \"MN\"\r\n },\r\n {\r\n name: \"Mississippi\",\r\n value: \"MS\"\r\n },\r\n {\r\n name: \"Missouri\",\r\n value: \"MO\"\r\n },\r\n {\r\n name: \"Montana\",\r\n value: \"MT\"\r\n },\r\n {\r\n name: \"Nebraska\",\r\n value: \"NE\"\r\n },\r\n {\r\n name: \"Nevada\",\r\n value: \"NV\"\r\n },\r\n {\r\n name: \"New Hampshire\",\r\n value: \"NH\"\r\n },\r\n {\r\n name: \"New Jersey\",\r\n value: \"NJ\"\r\n },\r\n {\r\n name: \"New Mexico\",\r\n value: \"NM\"\r\n },\r\n {\r\n name: \"New York\",\r\n value: \"NY\"\r\n },\r\n {\r\n name: \"North Carolina\",\r\n value: \"NC\"\r\n },\r\n {\r\n name: \"North Dakota\",\r\n value: \"ND\"\r\n },\r\n {\r\n name: \"Northern Mariana Islands\",\r\n value: \"MP\"\r\n },\r\n {\r\n name: \"Ohio\",\r\n value: \"OH\"\r\n },\r\n {\r\n name: \"Oklahoma\",\r\n value: \"OK\"\r\n },\r\n {\r\n name: \"Oregon\",\r\n value: \"OR\"\r\n },\r\n {\r\n name: \"Palau\",\r\n value: \"PW\"\r\n },\r\n {\r\n name: \"Pennsylvania\",\r\n value: \"PA\"\r\n },\r\n {\r\n name: \"Puerto Rico\",\r\n value: \"PR\"\r\n },\r\n {\r\n name: \"Rhode Island\",\r\n value: \"RI\"\r\n },\r\n {\r\n name: \"South Carolina\",\r\n value: \"SC\"\r\n },\r\n {\r\n name: \"South Dakota\",\r\n value: \"SD\"\r\n },\r\n {\r\n name: \"Tennessee\",\r\n value: \"TN\"\r\n },\r\n {\r\n name: \"Texas\",\r\n value: \"TX\"\r\n },\r\n {\r\n name: \"Utah\",\r\n value: \"UT\"\r\n },\r\n {\r\n name: \"Vermont\",\r\n value: \"VT\"\r\n },\r\n {\r\n name: \"Virgin Islands\",\r\n value: \"VI\"\r\n },\r\n {\r\n name: \"Virginia\",\r\n value: \"VA\"\r\n },\r\n {\r\n name: \"Washington\",\r\n value: \"WA\"\r\n },\r\n {\r\n name: \"West Virginia\",\r\n value: \"WV\"\r\n },\r\n {\r\n name: \"Wisconsin\",\r\n value: \"WI\"\r\n },\r\n {\r\n name: \"Wyoming\",\r\n value: \"WY\"\r\n },\r\n {\r\n name: \"Alberta\",\r\n value: \"AB\"\r\n },\r\n {\r\n name: \"British Columbia\",\r\n value: \"BC\"\r\n },\r\n {\r\n name: \"Manitoba\",\r\n value: \"MB\"\r\n },\r\n {\r\n name: \"New Brunswick\",\r\n value: \"NB\"\r\n },\r\n {\r\n name: \"Newfoundland and Labrador\",\r\n value: \"NL\"\r\n },\r\n {\r\n name: \"Northwest Territories\",\r\n value: \"NT\"\r\n },\r\n {\r\n name: \"Nova Scotia\",\r\n value: \"NS\"\r\n },\r\n {\r\n name: \"Nunavut\",\r\n value: \"NU\"\r\n },\r\n {\r\n name: \"Ontario\",\r\n value: \"ON\"\r\n },\r\n {\r\n name: \"Prince Edward Island\",\r\n value: \"PE\"\r\n },\r\n {\r\n name: \"Quebec\",\r\n value: \"QC\"\r\n },\r\n {\r\n name: \"Saskatchewan\",\r\n value: \"SK\"\r\n },\r\n {\r\n name: \"Yukon Territory\",\r\n value: \"YT\"\r\n }\r\n ]\r\n}","import React, { Component } from 'react';\r\nimport StateList from '../../data/statelist';\r\n\r\nclass StatesProvinces extends Component {\r\n\r\n state = {\r\n states: StateList.states\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.states.map(state => {state.name} )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default StatesProvinces;","import React, { Component } from 'react';\r\n\r\nimport { Prompt } from 'react-router';\r\n\r\nimport Countries from '../../../component/FormElements/Countries';\r\nimport CountryList from '../../../data/countrylist';\r\nimport StateList from '../../../data/statelist';\r\nimport StatesProvinces from '../../../component/FormElements/StatesProvinces';\r\n\r\nclass AccountInformation extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n editing: false,\r\n accountInfo: {\r\n name: this.props.accountInfo.name,\r\n streetAddress1: this.props.accountInfo.address,\r\n streetAddress2: this.props.accountInfo.address_two,\r\n city: this.props.accountInfo.city,\r\n state: this.getState(this.props.accountInfo.country_code),\r\n country: {\r\n value: this.props.accountInfo.country_code,\r\n text: this.getCountry(this.props.accountInfo.country_code)\r\n },\r\n zipCode: this.props.accountInfo.zipcode,\r\n phone: this.props.accountInfo.phone_num,\r\n mobilePhone: this.props.accountInfo.mobile_num\r\n },\r\n isFormHalfEdited: false // To show incomplete form navigation prompt\r\n }\r\n }\r\n\r\n getCountry = (countryCode) => {\r\n const country = CountryList.countries.filter(country => country.code === countryCode)[0].name;\r\n return country;\r\n }\r\n\r\n getState = (countryCode) => {\r\n let state;\r\n if (countryCode === 'US' || countryCode === 'CA') {\r\n state = {\r\n value: StateList.states.filter(state => state.value === this.props.accountInfo.state)[0].value,\r\n text: this.props.accountInfo.state\r\n }\r\n } else {\r\n state = {\r\n value: '',\r\n text: ''\r\n }\r\n }\r\n return state;\r\n }\r\n\r\n saveSettings = (e) => {\r\n e.preventDefault();\r\n\r\n this.props.editName(e.target.name.value);\r\n\r\n this.setState({\r\n editing: !this.state.editing,\r\n isFormHalfEdited: false,\r\n accountInfo: {\r\n name: e.target.name.value,\r\n streetAddress1: e.target.address1.value,\r\n streetAddress2: e.target.address2.value,\r\n city: e.target.city.value,\r\n state: {\r\n value: e.target.state.value,\r\n text: e.target.state.options[e.target.state.selectedIndex].text\r\n },\r\n country: {\r\n value: e.target.country.value,\r\n text: e.target.country.options[e.target.country.selectedIndex].text\r\n },\r\n zipCode: e.target.zipcode.value,\r\n phone: e.target.phone.value,\r\n mobilePhone: e.target.mobilephone.value\r\n }\r\n }, () => {\r\n\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/advertiser/accountInfo`, {\r\n method: 'POST',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n },\r\n body: JSON.stringify({\r\n accountInfo: this.state.accountInfo\r\n })\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n this.props.showSystemMessage('success', result.message);\r\n } else if (result[\"success\"] === false) {\r\n this.setState({ ...this.state, editing: true }, () => {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n });\r\n } else {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n }\r\n })\r\n .catch(error => this.props.showSystemMessage('error', error.message));\r\n });\r\n }\r\n\r\n setEditing = (e) => {\r\n e.preventDefault();\r\n this.setState({ editing: !this.state.editing, isFormHalfEdited: false });\r\n }\r\n\r\n inputChangeHandler = (e) => {\r\n if (e.target.name === 'phone' || e.target.name === \"mobilephone\") {\r\n this.validatePhone(e.target);\r\n }\r\n\r\n this.setState({ isFormHalfEdited: true });\r\n }\r\n\r\n validatePhone = (input_phone) => {\r\n input_phone.setCustomValidity(\"\");\r\n\r\n const phone = input_phone.value;\r\n\r\n if (input_phone.name === \"phone\" && !phone) {\r\n return true;\r\n }\r\n\r\n const validate = /^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$/.test(phone);\r\n\r\n if (input_phone.checkValidity() === false) {\r\n return false;\r\n } else if (!validate) {\r\n input_phone.setCustomValidity(\"This phone number is invalid.\");\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default AccountInformation;","import React, { Component } from 'react';\r\n\r\nimport { Prompt } from 'react-router';\r\n\r\nclass UserInformation extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.old_password = React.createRef();\r\n this.password2 = React.createRef();\r\n this.password3 = React.createRef();\r\n this.email = React.createRef();\r\n }\r\n\r\n state = {\r\n emailEditing: false,\r\n passwordEditing: false,\r\n userInfo: {\r\n email: this.props.userInfo.email_id\r\n },\r\n oldPassword: '',\r\n newPassword: '',\r\n confirmPassword: '',\r\n isPasswordMatching: false,\r\n isFormHalfEdited: false\r\n }\r\n\r\n validate = (e) => {\r\n // The actual password validation will be done in the backend. We are just matching if both are same here.\r\n e.persist();\r\n const input_password2 = this.password2.current.value;\r\n const input_password3 = this.password3.current.value;\r\n\r\n if (input_password2.length > 0 && input_password3.length > 0) {\r\n\r\n if (input_password2 !== input_password3) {\r\n this.setState({ ...this.state, isPasswordMatching: false, isFormHalfEdited: true }, () => {\r\n e.target.setCustomValidity('Your new password do not match.');\r\n e.target.reportValidity();\r\n return false;\r\n });\r\n\r\n } else {\r\n this.setState({ ...this.state, isPasswordMatching: true, isFormHalfEdited: true }, () => {\r\n this.password3.current.setCustomValidity('');\r\n this.password2.current.setCustomValidity('');\r\n });\r\n return true;\r\n }\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n saveSettings = (e) => {\r\n e.preventDefault();\r\n\r\n let formType = e.target.name;\r\n\r\n if (e.target.name === 'emailForm') {\r\n this.setState({ emailEditing: false, userInfo: { email: e.target.email.value }, isFormHalfEdited: false }, () => {\r\n this.postTheData(formType);\r\n });\r\n\r\n } else if (e.target.name === 'passwordForm') {\r\n this.setState({ passwordEditing: false, ...this.state.userInfo, oldPassword: e.target.oldPassword.value, newPassword: e.target.password.value, confirmPassword: e.target.confirmPassword.value, isFormHalfEdited: false }, () => {\r\n this.postTheData(formType);\r\n });\r\n }\r\n }\r\n\r\n postTheData = (formType) => {\r\n\r\n let JSONbody;\r\n let postURL;\r\n\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n if (formType === 'emailForm') {\r\n postURL = `${process.env.REACT_APP_API_URL}/advertiser/emailSettings`;\r\n JSONbody = {\r\n email: this.state.userInfo.email\r\n };\r\n } else if (formType === 'passwordForm') {\r\n postURL = `${process.env.REACT_APP_API_URL}/advertiser/password`;\r\n JSONbody = {\r\n oldPassword: this.state.oldPassword,\r\n newPassword: this.state.newPassword,\r\n newPasswordConfirm: this.state.confirmPassword\r\n }\r\n }\r\n\r\n fetch(postURL, {\r\n method: 'POST',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n },\r\n body: JSON.stringify(JSONbody)\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n\r\n if (result[\"success\"] === true) {\r\n this.props.showSystemMessage('success', result.message);\r\n } else if (result[\"success\"] === false) {\r\n if (formType === 'emailForm') {\r\n this.setState({ ...this.state, emailEditing: true }, () => {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n });\r\n } else {\r\n this.setState({ ...this.state, passwordEditing: true }, () => {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n });\r\n }\r\n } else {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n }\r\n })\r\n .catch(error => {\r\n console.log('Error in email updation: ', error);\r\n this.props.showSystemMessage('error', \"An internal error occurred while updating profile.\");\r\n });\r\n }\r\n\r\n setEditing = (e) => {\r\n e.preventDefault();\r\n if (e.target.name === 'emailForm') {\r\n this.setState({ emailEditing: !this.state.emailEditing, isFormHalfEdited: false });\r\n } else if (e.target.name === 'passwordForm') {\r\n this.setState({ passwordEditing: !this.state.passwordEditing, isFormHalfEdited: false });\r\n }\r\n }\r\n\r\n\r\n validateEmail = () => {\r\n const input_email = this.email.current;\r\n\r\n input_email.setCustomValidity(\"\");\r\n\r\n const emailAccount = input_email.value.split(\"@\")[0] + \"@\";\r\n const emailDomain = \"@\" + input_email.value.split(\"@\")[1];\r\n const abuseCheck = emailAccount.includes(\"abuse\");\r\n const bounceCheck = emailAccount.includes(\"bounce\");\r\n const blockCheck = emailAccount.includes(\"block\");\r\n const spamCheck = emailAccount.includes(\"spam\");\r\n const swearCheck = emailAccount.includes(\"fuck\");\r\n const validate = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(input_email.value);\r\n\r\n\r\n if (input_email.checkValidity() === false) {\r\n return false;\r\n } else if (emailAccount.length === 0 || emailDomain.length === 1 || abuseCheck || bounceCheck || blockCheck || spamCheck || swearCheck || !validate) {\r\n input_email.setCustomValidity(\"This email address is invalid.\");\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n inputChangeHandler = (e) => {\r\n if (e.target.name === 'email') {\r\n this.validateEmail();\r\n }\r\n\r\n this.setState({ isFormHalfEdited: true });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default UserInformation;","import React from 'react';\r\n\r\nimport AccountInformation from './AccountInformation/AccountInformation';\r\nimport UserInformation from './UserInformation/UserInformation';\r\n\r\nconst settings = (props) => {\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default settings;","import React, { Component } from 'react';\r\n\r\nclass CreateUser extends Component {\r\n\r\n state = {\r\n email: '',\r\n role: 'manager',\r\n password: ''\r\n }\r\n\r\n handleCreateUser = (e) => {\r\n e.preventDefault();\r\n\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/user/adduser`, {\r\n method: 'POST',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n },\r\n body: JSON.stringify({\r\n email: this.state.email,\r\n role: this.state.role,\r\n password: this.state.password\r\n })\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n this.props.showSystemMessage('success', result.message);\r\n this.props.modalClosed();\r\n } else {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n this.props.modalClosed();\r\n }\r\n })\r\n .catch(error => {\r\n this.props.showSystemMessage('error', error.message);\r\n });\r\n }\r\n\r\n handleRoleSelection = (e) => {\r\n e.preventDefault();\r\n this.setState({ ...this.state, role: e.target.value });\r\n }\r\n\r\n handleInputChange = (e) => {\r\n if (e.target.name === 'form_email') {\r\n this.setState({ ...this.state, email: e.target.value });\r\n } else if (e.target.name === 'form_password') {\r\n this.setState({ ...this.state, password: e.target.value });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Create User
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CreateUser;","import React, { Component } from 'react';\r\n\r\nimport { Modal } from 'reactstrap';\r\n\r\nimport CreateUser from './CreateUser/CreateUser';\r\nimport Loading from '../../component/UI/Loading/Loading';\r\n\r\nclass Users extends Component {\r\n\r\n state = {\r\n users: [],\r\n dataLoaded: false,\r\n openCreateUserModal: false\r\n }\r\n\r\n toggleCreateUserModal = () => {\r\n this.setState({ openCreateUserModal: !this.state.openCreateUserModal });\r\n }\r\n\r\n closeModalAndUpdateUsers = () => {\r\n this.setState({ openCreateUserModal: false }, () => {\r\n this.fetchUsers();\r\n });\r\n }\r\n\r\n fetchUsers = () => {\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/advertiser/users`, {\r\n method: 'GET',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n this.setState({ users: result.users, dataLoaded: true })\r\n } else if (result[\"success\"] === false) {\r\n this.setState({ dataLoaded: true }, () => {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n });\r\n } else {\r\n this.setState({ dataLoaded: true }, () => {\r\n this.props.showSystemMessage('error', 'There was an error while fetching users.');\r\n });\r\n }\r\n }).catch(error => {\r\n console.log('Error in Users: ', error);\r\n this.props.showSystemMessage('error', 'There was an error while fetching users.');\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchUsers();\r\n }\r\n\r\n deleteUser = (user_id) => {\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/user/deleteuser`, {\r\n method: 'DELETE',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n },\r\n body: JSON.stringify({\r\n user_id: user_id\r\n })\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n this.setState({ dataLoaded: false }, () => {\r\n this.props.showSystemMessage('success', result.message);\r\n this.fetchUsers();\r\n });\r\n } else {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n }\r\n })\r\n .catch(error => {\r\n this.props.showSystemMessage('error', 'An internal error occurred while deleting the user.', error.message);\r\n });\r\n }\r\n\r\n handleUserDelete = (e) => {\r\n e.preventDefault();\r\n const user_id = e.target.form_user_id.value;\r\n this.deleteUser(user_id);\r\n }\r\n\r\n editRole = (userId, e) => {\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/user/editrole`, {\r\n method: 'POST',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'x-app-token': authtoken\r\n },\r\n body: JSON.stringify({\r\n user_id: userId,\r\n role: e.target.value\r\n })\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n this.props.showSystemMessage('success', result.message);\r\n } else {\r\n this.props.showSystemMessage('error', result.errors.message);\r\n }\r\n })\r\n .catch(error => {\r\n this.props.showSystemMessage('error', error.message);\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n
User Accounts
\r\n
\r\n Create User\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Email \r\n Role \r\n Status \r\n \r\n \r\n \r\n \r\n {this.state.dataLoaded ?\r\n this.state.users.map(user => {\r\n\r\n let selectedOption =\r\n ( this.editRole(user.id, e)}>\r\n Manager \r\n User \r\n );\r\n\r\n return \r\n {user.e_mail} \r\n {(user.role !== 'admin' && this.props.users.role === 'admin') ?\r\n \r\n :\r\n (user.role)\r\n } \r\n {user.status === 'A' ? 'Active' : 'Unknown'} \r\n {this.props.users.role === 'admin' && user.role !== 'admin' ?\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
{this.refreshApp()}
\r\n :\r\n Logging in
\r\n );\r\n }\r\n\r\n}\r\n\r\nexport default OttLogin;","import React, { Component } from 'react';\r\n\r\nclass FileUpload extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filePath: \"\",\r\n fileDescription: \"\",\r\n selectedFile: \"\"\r\n }\r\n }\r\n\r\n handleFileSelection = (e) => {\r\n this.setState({ filePath: e.target.value, selectedFile: e.target.files[0] });\r\n }\r\n\r\n onDescriptionChange = (e) => {\r\n this.setState({ fileDescription: e.target.value });\r\n }\r\n\r\n handleFileSubmission = (e) => {\r\n let fileElement = e.target.mb_file;\r\n\r\n e.preventDefault();\r\n const data = new FormData();\r\n data.append('mb_file', this.state.selectedFile, this.state.selectedFile.name);\r\n data.append('file_description', this.state.fileDescription);\r\n\r\n const authtoken = localStorage.getItem('mb-auth-token');\r\n\r\n fetch(`${process.env.REACT_APP_API_URL}/upload`, {\r\n body: data,\r\n method: 'POST',\r\n credentials: \"include\",\r\n headers: {\r\n 'x-app-token': authtoken\r\n }\r\n })\r\n .then(res => res.json())\r\n .then(result => {\r\n if (result[\"success\"] === true) {\r\n // Clear all the details upon sucessful submission\r\n this.setState({ filePath: \"\", fileDescription: \"\", selectedFile: \"\" }, () => {\r\n fileElement.value = \"\";\r\n this.props.showSystemMessage('success', result.message);\r\n });\r\n\r\n } else if (result[\"success\"] === false) {\r\n if (result.code === 415) { // If file type is not allowed, then clear everything\r\n this.setState({ filePath: \"\", fileDescription: \"\", selectedFile: \"\" }, () => {\r\n fileElement.value = \"\";\r\n });\r\n }\r\n this.props.showSystemMessage('error', result.errors.message);\r\n } else {\r\n this.props.showSystemMessage('error', 'Internal error while trying to upload file. Please try again.');\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ filePath: \"\", fileDescription: \"\", selectedFile: \"\" }, () => {\r\n fileElement.value = \"\";\r\n this.props.showSystemMessage('error', error.message);\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n Allowed file types: pdf, doc, docx, xls, xlsx, xlt, xla, csv, txt\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.state.systemMessage.display && (\r\n
\r\n {this.state.systemMessage.message}\r\n \r\n )}\r\n\r\n { this.checkAuth() ?\r\n
\r\n \r\n \r\n \r\n \r\n :\r\n this.state.dataLoaded ?\r\n
\r\n \r\n :\r\n
\r\n }\r\n