this.props.onChangeStatus(this.props.quota)}\r\n >{buttonText}\r\n \r\n );\r\n }\r\n\r\n openEditing() {\r\n\r\n this.setState({\r\n editing: true,\r\n name: this.props.quota.name,\r\n definition: this.props.quota.definition,\r\n target: this.props.quota.target,\r\n active: this.props.quota.active,\r\n id: this.props.quota.id\r\n });\r\n\r\n }\r\n\r\n makeEdit(){\r\n\r\n this.props.onEdit((({name, definition, target, active, id}) => ({name, definition, target, active, id}))(this.state));\r\n\r\n this.setState({editing: false});\r\n }\r\n\r\n handleCancel(){\r\n this.setState({editing: false});\r\n }\r\n\r\n state = {\r\n editing: false\r\n };\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n {!this.state.editing && (\r\n \r\n {this.props.quota.name} \r\n {this.props.quota.definition} \r\n {this.props.quota.target} \r\n {this.props.quota.achieved} \r\n {this.props.quota.target - this.props.quota.achieved} \r\n {this.props.quota.available} \r\n {this.renderStatusIndicator(this.props.quota.active)} \r\n Edit \r\n {confirm => (\r\n Delete \r\n )}\r\n \r\n \r\n \r\n )}\r\n {this.state.editing && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.quota.achieved} \r\n {this.props.quota.target - this.props.quota.achieved} \r\n {this.props.quota.available} \r\n \r\n Save \r\n \r\n Cancel \r\n \r\n \r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Quota;\r\n","import React, {Component} from 'react';\r\nimport {Table, Button, Form, FormControl} from 'react-bootstrap';\r\nimport Quota from \"./quota\";\r\nimport FilterDefinition from \"./filterDefinition\";\r\n\r\nclass Quotas extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleToggleNewQuota = this.handleToggleNewQuota.bind(this);\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.handleClickSave = this.handleClickSave.bind(this);\r\n\r\n this.handleDefinitionChange = this.handleDefinitionChange.bind(this);\r\n\r\n }\r\n\r\n handleToggleNewQuota() {\r\n this.setState({newQuotaOpen: !this.state.newQuotaOpen});\r\n }\r\n\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n handleDefinitionChange(newDefinition){\r\n this.setState({newQuotaDefinition: newDefinition});\r\n }\r\n\r\n async handleClickSave(){\r\n\r\n const setSucessfully = await this.props.onSave(this.state);\r\n\r\n if(setSucessfully) {\r\n this.handleToggleNewQuota();\r\n }\r\n }\r\n\r\n state = {\r\n newQuotaOpen: false,\r\n newQuotaName: null,\r\n newQuotaDefinition: \"\",\r\n newQuotaTarget: null\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n Name \r\n Definition \r\n Target \r\n Achieved \r\n To Get \r\n Available \r\n Status \r\n \r\n \r\n {this.props.project.quotas != \"fetching\" && this.props.project.quotas.map(quota =>\r\n
\r\n\r\n \r\n \r\n Name \r\n {this.props.errors.name.message}\r\n )}\r\n \r\n\r\n \r\n Target \r\n {this.props.errors.target.message}\r\n )}\r\n \r\n\r\n Save\r\n Cancel\r\n
\r\n )\r\n }\r\n\r\n {!this.state.newQuotaOpen && (\r\n New\r\n )}\r\n\r\n Recalculate\r\n\r\n Last recalculated: \r\n {this.props.project.quotasLastRecalculated != \"fetching\" && (\r\n this.props.project.quotasLastRecalculated.toLocaleString('en-GB')\r\n )}\r\n \r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Quotas;\r\n","import React, {Component} from 'react';\r\nimport {Button} from 'react-bootstrap';\r\n\r\nclass Sample extends Component{\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n }\r\nrender(){\r\n return (\r\n \r\n {this.props.sample.name} \r\n {this.props.sample.total} \r\n {this.props.sample.completed} \r\n {this.props.sample.rejected} \r\n {this.props.sample.exclusions} \r\n {this.props.sample.total - this.props.sample.completed - this.props.sample.rejected\r\n - this.props.sample.exclusions} \r\n {this.props.sample.lastRefreshed.toLocaleString('en-GB')} \r\n this.props.onRefresh(this.props.sample.id)}\r\n >Refresh \r\n )\r\n}\r\n}\r\n\r\nexport default Sample;\r\n","import React, {Component} from 'react';\r\nimport {Form, Table} from 'react-bootstrap';\r\nimport Sample from \"./sample\";\r\nimport SearchResult from \"./searchResult\";\r\n\r\nclass Samples extends Component{\r\n\r\n state = {\r\n samplesSearchTerm:\"\"\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleSearchType = this.handleSearchType.bind(this);\r\n this.handleAddClick = this.handleAddClick.bind(this)\r\n }\r\n\r\n\r\n async handleSearchType(event) {\r\n\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n\r\n const name = target.name;\r\n\r\n await this.setState({\r\n [name]: value\r\n });\r\n\r\n this.props.onSamplesSearch(this.state.samplesSearchTerm);\r\n }\r\n\r\n handleAddClick(event){\r\n\r\n this.setState({samplesSearchTerm: \"\"});\r\n\r\n const selectedSampleId = event.target.value;\r\n\r\n this.props.onAddSample(selectedSampleId);\r\n }\r\n\r\n render(){\r\n return (\r\n \r\n \r\n \r\n \r\n Name \r\n Total \r\n Completed \r\n Rejected \r\n Filter/Quota Exclusions \r\n Available \r\n Last refreshed \r\n \r\n \r\n \r\n {this.props.project.selectedSamples != \"fetching\" && this.props.project.selectedSamples.map(sample =>\r\n \r\n
\r\n \r\n Search Samples to Add \r\n \r\n \r\n )}\r\n {this.props.project.displayedSamples.map(sample =>\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Samples;\r\n","import React, {Component} from 'react';\r\nimport {Button} from 'react-bootstrap';\r\n\r\nclass Incentive extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.handleEdit = this.handleEdit.bind(this);\r\n this.handleDelete = this.handleDelete.bind(this);\r\n }\r\n\r\n handleEdit() {\r\n this.props.onEdit({\r\n quota: this.props.incentive.quota,\r\n filter: this.props.incentive.filter,\r\n points: this.props.incentive.points,\r\n });\r\n\r\n\r\n //JFTODO make this less hacky\r\n\r\n this.props.onDelete(this.props.incentive.id)\r\n }\r\n\r\n handleDelete() {\r\n this.props.onDelete(this.props.incentive)\r\n }\r\n\r\nrender() {\r\n return (\r\n \r\n {this.props.incentive.type} \r\n {this.props.incentive.name} \r\n {this.props.incentive.points} \r\n Edit Delete \r\n )\r\n}\r\n}\r\n\r\nexport default Incentive;\r\n","import React, {Component} from 'react';\r\nimport {Table, Form, Button, FormControl} from 'react-bootstrap';\r\nimport Incentive from \"./incentive\";\r\nimport {API} from \"aws-amplify\";\r\nimport EditableText from \"./editableText\";\r\n\r\n\r\nclass Incentives extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleToggleNewIncentive = this.handleToggleNewIncentive.bind(this);\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.handleClickSave = this.handleClickSave.bind(this);\r\n this.handleEdit = this.handleEdit.bind(this);\r\n\r\n }\r\n\r\n getIncentives(){\r\n\r\n let filtersWithPoints = this.props.project.filters.filter(filter => {\r\n return filter.points > 0;\r\n });\r\n\r\n filtersWithPoints = filtersWithPoints.map(filter => {\r\n return {...filter, type: \"filter\"}\r\n });\r\n\r\n let quotasWithPoints = this.props.project.quotas.filter(quota => {\r\n return quota.points > 0;\r\n });\r\n\r\n quotasWithPoints = quotasWithPoints.map(quota => {\r\n return {...quota, type: \"quota\"}\r\n });\r\n\r\n return [...filtersWithPoints, ...quotasWithPoints];\r\n }\r\n\r\n async componentDidMount(){\r\n try {\r\n const incentivesAwarded = await API.get(\"soaptwo\", \"/projects/\" + this.props.project.projectId + \"/pointsawarded\");\r\n\r\n this.setState({incentivesAwarded});\r\n\r\n } catch (e) {\r\n alert(e)\r\n }\r\n }\r\n\r\n handleToggleNewIncentive() {\r\n this.setState({newIncentiveOpen: !this.state.newIncentiveOpen});\r\n }\r\n\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n async handleClickSave(){\r\n const setSucessfully = await this.props.onSave(this.state);\r\n\r\n if(setSucessfully) {\r\n this.handleToggleNewIncentive();\r\n }\r\n }\r\n\r\n handleEdit(editing){\r\n\r\n this.setState({\r\n newIncentiveQuota: editing.quota,\r\n newIncentiveFilter: editing.filter,\r\n newIncentivePoints: editing.points,\r\n newIncentiveOpen: true\r\n })\r\n }\r\n\r\n state = {\r\n newIncentiveOpen: false,\r\n newIncentiveType: 'quota',\r\n newIncentiveFilterOrQuota: null,\r\n newIncentivePoints: null,\r\n incentivesAwarded: \"fetching\"\r\n }\r\n\r\n render(){\r\n return (\r\n \r\n \r\n \r\n \r\n Incentive level (points) \r\n Number of panellists awarded \r\n \r\n \r\n \r\n {this.state.incentivesAwarded != \"fetching\" && this.state.incentivesAwarded.map(incentive =>\r\n \r\n {incentive.incentiveLevel} \r\n {incentive.count} \r\n \r\n )}\r\n \r\n\r\n
\r\n \r\n Default Incentive Level \r\n {this.props.project.defaultIncentive != \"fetching\" && (\r\n \r\n\r\n \r\n \r\n \r\n Type \r\n Name \r\n Points \r\n \r\n \r\n \r\n {this.getIncentives().map(incentive =>\r\n \r\n
\r\n\r\n {this.state.newIncentiveOpen && (\r\n \r\n\r\n \r\n Quota \r\n \r\n Select \r\n {this.props.project.quotas.map(quota =>\r\n {quota.name} \r\n )}\r\n \r\n \r\n )}\r\n\r\n {this.state.newIncentiveType == 'filter' && (\r\n \r\n Filter \r\n \r\n Select \r\n {this.props.project.filters.map(filter =>\r\n {filter.name} \r\n )}\r\n \r\n \r\n )}\r\n\r\n\r\n \r\n Points \r\n {this.props.errors.points.message}\r\n )}\r\n \r\n\r\n\r\n Save\r\n Cancel\r\n\r\n \r\n )}\r\n\r\n New \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Incentives;\r\n","import React, {Component} from 'react';\r\nimport Faker from 'faker';\r\nimport {API} from 'aws-amplify';\r\n\r\nclass TestUrls extends Component {\r\n\r\n state = {\r\n urls: \"fetching\"\r\n }\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n const baseUrl =\r\n window.location.origin.toString() + \"/landing?jobno=\" +\r\n this.props.project.projectNumber +\r\n \"&yscode=\";\r\n\r\n let yscodes = await API.get('return', '/test-ys-codes/' + this.props.project.projectNumber);\r\n\r\n let urls = yscodes.map(code => baseUrl + encodeURIComponent(code));\r\n\r\n this.setState({urls});\r\n\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.project.projectNumber != \"fetching\"\r\n && this.state.urls != \"fetching\" && this.state.urls.map(url =>\r\n
{url}
\r\n )}\r\n
\r\n\r\n \r\n Select Test User \r\n \r\n {this.props.project.users.map(user =>\r\n {user.email}\r\n )}\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Email \r\n Status \r\n Select \r\n \r\n \r\n \r\n {this.state.testers != \"fetching\" && this.state.testers.map(tester =>\r\n \r\n {tester.email} \r\n {tester.status} \r\n \r\n this.handleTesterSelect(tester.email)}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n\r\n Invite \r\n\r\n Reset \r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Testers;\r\n","import React, {Component} from 'react';\r\nimport {Form, Table, Button, Modal} from 'react-bootstrap';\r\nimport Confirm from \"./confirm\";\r\nimport {API} from 'aws-amplify';\r\n\r\nclass InvitesReminders extends Component{\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n\r\n state = {\r\n isError: false,\r\n errorMessage: \"\"\r\n }\r\n\r\n async componentDidMount() {\r\n this.props.onSetQuotaCombinationsAvailableStat()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n \r\n \r\n )}\r\n\r\n \r\n {this.props.project.quotas.map(quota =>\r\n \r\n Select Quotas\r\n\r\n \r\n \r\n \r\n Target \r\n Completed \r\n To Get \r\n Available \r\n To Send \r\n \r\n \r\n \r\n \r\n Total \r\n {this.props.project.target} \r\n {this.props.project.totalCompletes} \r\n {this.props.project.target - this.props.project.totalCompletes} \r\n {this.props.quotasTotalAvailableStat} \r\n \r\n \r\n \r\n {this.props.quotaCombinations.map(quota =>\r\n \r\n {quota.name} \r\n {quota.target} \r\n {quota.achieved} \r\n {quota.target - quota.achieved} \r\n {quota.available} \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n x Still To Get \r\n \r\n\r\n Distribute \r\n Max \r\n Clear \r\n\r\n \r\n { confirm => (\r\n Send \r\n )\r\n }\r\n \r\n\r\n \r\n \r\n Send Failed \r\n \r\n\r\n \r\n {this.props.errorMessage}
\r\n \r\n\r\n \r\n this.setState({isError: false})}variant=\"primary\">OK \r\n \r\n \r\n\r\n\r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default InvitesReminders;\r\n","import React, {Component} from 'react';\r\nimport {Form} from 'react-bootstrap';\r\nimport {API} from 'aws-amplify';\r\n\r\nclass ParameterSelector extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n\r\n }\r\n\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n\r\n this.props.onSave(this.props.paramType, this.props.paramFor, value, this.props.defaultParam);\r\n }\r\n\r\n state = {\r\n params: \"fetching\",\r\n selectedParam: this.props.value\r\n };\r\n\r\n async componentDidMount() {\r\n\r\n const result = await API.get('soap', \"/\" + this.props.paramType + \"params/\")\r\n\r\n this.setState({params: result});\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n {this.state.params != \"fetching\" &&(\r\n \r\n {this.props.title} \r\n \r\n {this.props.defaultParam && (\r\n { this.props.defaultParam } \r\n )}\r\n {this.state.params.map(param =>\r\n { param.name } \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 ParameterSelector;","import React, {Component} from 'react';\r\nimport {Form} from 'react-bootstrap';\r\nimport Faker from 'faker';\r\nimport ParameterSelector from './parameterSelector';\r\n\r\nclass YouthsightUrlForSupplier extends Component {\r\n\r\n render(){\r\n return (\r\n \r\n\r\n {this.props.source.name} \r\n\r\n {window.location.origin.toString()}/landing?jobno={this.props.project.projectNumber}\r\n &supplier={this.props.source.code}\r\n &{this.props.source.unique_identifier_param_name ? this.props.source.unique_identifier_param_name : 'id'}=
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default YouthsightUrlForSupplier;\r\n","import React, {Component} from 'react';\r\nimport YouthsightUrlForSupplier from \"./youthSightUrlForSupplier\";\r\n\r\nclass YouthsightUrlsForSupplier extends Component {\r\n render() {\r\n return (\r\n \r\n {this.props.project.sources.filter(source => { return source.name != \"Internal\"})\r\n .map(source =>\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default YouthsightUrlsForSupplier;","import React, {Component} from 'react';\r\nimport {Form, Button} from 'react-bootstrap';\r\nimport {API} from 'aws-amplify';\r\nimport ErrorDisplayingFormField from \"./errorDisplayingFormField\";\r\n\r\nclass SupplierUrlForYouthsight extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.handleSave = this.handleSave.bind(this);\r\n }\r\n\r\n state = {...this.props.source, errors:{}};\r\n\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n async handleSave(inputField) {\r\n\r\n const endPoint = \"/projects/\" +\r\n this.props.source.project_id +\r\n '/suppliers/' + this.props.source.supplier_id;\r\n\r\n let input = {};\r\n\r\n input[inputField] = this.state[inputField];\r\n\r\n const result = await API.patch('soaptwo', endPoint, {\r\n body: input\r\n });\r\n\r\n console.log(result);\r\n\r\n if(result.code == 1000) {\r\n this.setState({errors: result.errors});\r\n } else {\r\n this.setState({errors: {}});\r\n }\r\n\r\n }\r\n\r\n render(){\r\n return (\r\n \r\n {this.props.source.name} \r\n\r\n \r\n Respondent ID Param \r\n this.handleSave('respondent_id_param')}\r\n >Save\r\n \r\n\r\n \r\n Project ID Param \r\n this.handleSave('project_id_param')}\r\n >Save\r\n \r\n\r\n \r\n this.handleSave('completed_url')}\r\n >Save\r\n \r\n\r\n \r\n this.handleSave('screenout_url')}\r\n >Save\r\n \r\n\r\n \r\n this.handleSave('quota_full_url')}\r\n >Save\r\n \r\n\r\n \r\n this.handleSave('quality_fail_url')}\r\n >Save\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default SupplierUrlForYouthsight;\r\n","import React, {Component} from 'react';\r\nimport SupplierUrlForYouthsight from \"./supplierUrlForYouthsight\";\r\n\r\nclass SupplierUrlsForYouthsight extends Component {\r\n render(){\r\n return (\r\n \r\n {this.props.project.sources.filter(source => {\r\n return source.name != \"Internal\";\r\n }).map(source =>\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default SupplierUrlsForYouthsight;","import React, {Component} from \"react\";\r\nimport {Button, Form, FormControl} from \"react-bootstrap\";\r\nimport {API} from \"aws-amplify\";\r\n\r\nclass EditSentCount extends Component{\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.handleClickSet = this.handleClickSet.bind(this);\r\n }\r\n\r\n state = {\r\n sendCount: 0,\r\n error: false\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.setState({sendCount: this.props.sendCount});\r\n\r\n }\r\n\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value,\r\n error: false\r\n });\r\n }\r\n\r\n async handleClickSet() {\r\n\r\n let updateSendsResult = await API.patch('soaptwo',\r\n `/projects/${this.props.projectId}/suppliers`,\r\n {body: {\r\n preserveAbsent: true,\r\n suppliers: [{id: this.props.sourceId, sends: this.state.sendCount}]\r\n }});\r\n\r\n if(updateSendsResult.code == 1000) {\r\n this.setState({error: updateSendsResult.errors[Object.keys(updateSendsResult.errors)[0]]})\r\n } else {\r\n this.props.onSourceSentUpdate();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
Update {this.props.sourceName} sent count
\r\n
\r\n {this.state.error.message}\r\n )}\r\n\r\n\r\n Set \r\n \r\n
\r\n Per {this.props.interval} \r\n \r\n \r\n \r\n {this.props.interval} From \r\n Starts \r\n Completes \r\n Screenouts \r\n Quota fulls \r\n Quality fails \r\n \r\n \r\n \r\n {this.state.stats != \"fetching\" && (\r\n this.state.stats.map(row =>\r\n \r\n {new Date(row.intervalStartDate).toLocaleDateString(\"en-GB\")} \r\n {row.starts} \r\n {row.complets} \r\n {row.screenouts} \r\n {row.quota_fulls} \r\n {row.quality_fails} \r\n \r\n )\r\n )}\r\n \r\n
\r\n \r\n )\r\n }\r\n}\r\nexport default CompletionStatsTable;\r\n","import React, {Component} from 'react';\r\nimport Faker from 'faker';\r\nimport {Link} from 'react-router-dom';\r\nimport {Table, Form, Button, FormControl} from 'react-bootstrap';\r\nimport Expandable from './expandable.jsx';\r\nimport YouthsightUrlForClient from \"./youthsightUrlForClient\";\r\nimport PanelVariables from \"./panelVariables\";\r\nimport Quotas from \"./quotas\";\r\nimport Filters from \"./filters\";\r\nimport Samples from \"./samples\";\r\nimport Incentives from \"./incentives\";\r\nimport TestUrls from \"./testUrls\";\r\nimport Testers from \"./testers\";\r\nimport InvitesReminders from \"./invitesReminders\";\r\nimport YouthsightUrlsForSupplier from \"./youthsightUrlsForSupplier\";\r\nimport SupplierUrlsForYouthsight from \"./supplierUrlsForYouthsight\";\r\nimport ParameterSelector from \"./parameterSelector\";\r\nimport {API} from \"aws-amplify\";\r\nimport EditableText from \"./editableText\";\r\nimport ErrorDisplayingFormField from \"./errorDisplayingFormField\";\r\nimport moment from 'moment';\r\nimport Navigation from \"./navigation\";\r\nimport EditSentCount from \"./editSentCount\";\r\nimport CompletionStatsTable from \"./completionStatsTable\";\r\n\r\nclass viewProject extends Component {\r\n\r\n\r\n constructor(props) {\r\n super(props)\r\n\r\n this.handleFilteringStatsUpdate = this.handleFilteringStatsUpdate.bind(this);\r\n\r\n this.handleSetTarget = this.handleSetTarget.bind(this);\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n\r\n this.handleClientSurveyUrlSave = this.handleClientSurveyUrlSave.bind(this);\r\n this.handleClientIdParamNameSave = this.handleClientIdParamNameSave.bind(this);\r\n\r\n this.handleAddPanelVariable = this.handleAddPanelVariable.bind(this);\r\n\r\n this.handleQuotaStatusChange = this.handleQuotaStatusChange.bind(this);\r\n this.handleQuotaDelete = this.handleQuotaDelete.bind(this);\r\n this.handleQuotaSave = this.handleQuotaSave.bind(this);\r\n this.handleQuotaEdit = this.handleQuotaEdit.bind(this);\r\n\r\n this.sourcesSentRefresh = this.sourcesSentRefresh.bind(this)\r\n\r\n this.handleSamplesSearch = this.handleSamplesSearch.bind(this);\r\n this.handleAddSample = this.handleAddSample.bind(this);\r\n this.handleSampleRefresh = this.handleSampleRefresh.bind(this);\r\n\r\n this.pollForNewSelectedSample = this.pollForNewSelectedSample.bind(this);\r\n this.pollForRefreshedSample = this.pollForRefreshedSample.bind(this);\r\n\r\n this.handleFilterSave = this.handleFilterSave.bind(this);\r\n this.handleFilterDelete = this.handleFilterDelete.bind(this);\r\n this.handleFilterStatusChange = this.handleFilterStatusChange.bind(this);\r\n this.handleFiltersRecalculate = this.handleFiltersRecalculate.bind(this);\r\n\r\n this.handleIncentiveDelete = this.handleIncentiveDelete.bind(this);\r\n this.handleIncentiveSave = this.handleIncentiveSave.bind(this);\r\n\r\n this.handleProjectClosedToggle = this.handleProjectClosedToggle.bind(this);\r\n\r\n this.handleParamSave = this.handleParamSave.bind(this);\r\n\r\n this.handleSetDefaultIncentive = this.handleSetDefaultIncentive.bind(this);\r\n\r\n this.handleInviteToggle = this.handleInviteToggle.bind(this);\r\n this.handleSelectQuota = this.handleSelectQuota.bind(this);\r\n this.onStatusReminderToggle = this.onStatusReminderToggle.bind(this);\r\n this.handleSetQuotaCombinationsAvailableStat = this.handleSetQuotaCombinationsAvailableStat.bind(this);\r\n this.handleSelectQuotas = this.handleSelectQuotas.bind(this);\r\n this.setTotalToSend = this.setTotalToSend.bind(this);\r\n this.handleToSendChange = this.handleToSendChange.bind(this);\r\n this.handleDistribute = this.handleDistribute.bind(this);\r\n this.handleTotalToSendChange = this.handleTotalToSendChange.bind(this)\r\n this.handleSend = this.handleSend.bind(this)\r\n\r\n const projectName = Faker.random.number(3) > 0 ? Faker.company.companyName() : null;\r\n\r\n this.state = {\r\n projectId: this.props.match.params.id,\r\n projectClosed: \"fetching\",\r\n projectNumber: \"fetching\",\r\n totalAvailable: 0,\r\n totalCompletes: 0,\r\n totalSent: 0,\r\n totalStarted: 0,\r\n totalScreenOuts: 0,\r\n totalQuoataFull: 0,\r\n totalQualityFail: 0,\r\n target: \"fetching\",\r\n sources: \"fetching\",\r\n completionCode: 0,\r\n selectedPanelVariables: [],\r\n quotas: \"fetching\",\r\n quotasLastRecalculated: \"fetching\",\r\n samples: \"fetching\",\r\n selectedSamples: \"fetching\",\r\n displayedSamples: [],\r\n filters: \"fetching\",\r\n filtersLastRecalculated: \"fetching\",\r\n defaultIncentive: \"fetching\",\r\n emailTemplates: \"fetching\",\r\n selectedEmailTemplate: null,\r\n users: \"fetching\",\r\n errors: {},\r\n client_survey_url: \"fetching\",\r\n clientIdParamName: \"fetching\",\r\n clientResultCodeParam: \"fetching\",\r\n invite: true,\r\n remindStatus: 'invited',\r\n selectedQuotas: [],\r\n totalStatusStats: \"fetching\",\r\n quotaCombinations: [],\r\n quotasTotalAvailableStat: 0,\r\n totalToSend: 0,\r\n distributeToSend: false,\r\n xToGet: 7,\r\n invitesRemindersIsError: false,\r\n invitesRemindersErrorMessage: '',\r\n sendBlocked: false\r\n }\r\n\r\n }\r\n\r\n async handleFilteringStatsUpdate() {\r\n try {\r\n const result = await API.get('soap', \"/projects/\" + this.props.match.params.id + \"/filters\");\r\n\r\n this.setState({filters: result, filtersLastRecalculated: new Date()});\r\n\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n const result = await API.get('soap', '/projects/' + this.props.match.params.id + '/groups');\r\n\r\n const selectedSamples = result.map(function(selectedSample){\r\n selectedSample.id = selectedSample.sample_id;\r\n\r\n selectedSample.name = this.state.samples.filter(sample => {\r\n return sample.sampleId == selectedSample.id;\r\n })[0].name;\r\n\r\n selectedSample.exclusions = selectedSample.filtered_out;\r\n selectedSample.lastRefreshed = new Date(selectedSample.last_refreshed);\r\n\r\n return selectedSample;\r\n }, this);\r\n\r\n this.setState({selectedSamples});\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n const result = await API.get('soap', '/projects/' + this.props.match.params.id + '/quotas');\r\n\r\n this.setState({quotas: result, quotasLastRecalculated: new Date()});\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n let statusStatsResult = await API.get('soaptwo', '/project-status-stats/' +\r\n this.state.projectId);\r\n\r\n await Promise.all([\r\n this.setState({totalStatusStats: statusStatsResult}),\r\n this.handleSetQuotaCombinationsAvailableStat()\r\n ]);\r\n\r\n await this.handleSelectQuotas();\r\n\r\n this.setTotalToSend();\r\n } catch(e) {\r\n alert(e);\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n try {\r\n const selectedPanelVariables = await API.get('soap', '/projects/' + this.props.match.params.id + '/panelvariables');\r\n\r\n this.setState({selectedPanelVariables})\r\n\r\n } catch (e) {\r\n alert(e)\r\n }\r\n\r\n try {\r\n const groupsResult = await API.get(\"soap\", \"/groups/\");\r\n\r\n this.setState({samples: groupsResult});\r\n\r\n\r\n } catch (e) {\r\n alert(e)\r\n }\r\n\r\n try {\r\n const result = await API.get(\"soaptwo\", \"/projects/\" + this.props.match.params.id);\r\n\r\n console.log(result);\r\n\r\n this.setState({\r\n projectId: result[0].id,\r\n projectNumber: result[0].job_number,\r\n projectName: result[0].name,\r\n projectType: result[0].type,\r\n client_survey_url: result[0].client_survey_url,\r\n clientIdParamName: result[0].client_id_param,\r\n startDate: new Date(result[0].start_date),\r\n clientUniqueIdentifierParam: {\r\n id: result[0].unique_identifier_param_id,\r\n name: result[0].unique_identifier_param\r\n },\r\n clientResultCodeParam: {\r\n id: result[0].result_code_param_id,\r\n name: result[0].result_code_param\r\n },\r\n defaultIncentive: result[0].default_incentive,\r\n target: result[0].target_completes,\r\n completionCode: result[0].complete_code,\r\n projectClosed: result[0].closed_date\r\n });\r\n\r\n } catch (e) {\r\n alert(e)\r\n }\r\n\r\n try {\r\n const result = await API.get('soaptwo', '/projects/' + this.props.match.params.id + \"/suppliers\");\r\n\r\n this.setState({sources: result});\r\n\r\n console.log(result);\r\n\r\n this.setState({\r\n totalAvailable: result.reduce((accumulator, current) => accumulator + current.sent + (current.unsent ? current.unsent : 0) + current.started, 0),\r\n totalCompletes: result.reduce((accumulator, current) => accumulator + current.completed, 0),\r\n totalUnsent: result.reduce((accumulator, current) => accumulator + (current.unsent ? current.unsent : 0), 0),\r\n totalSent: result.reduce((accumulator, current) => accumulator + current.sent, 0),\r\n totalStarted: result.reduce((accumulator, current) => accumulator + current.started, 0),\r\n totalScreenOuts: result.reduce((accumulator, current) => accumulator + current.screenout, 0),\r\n totalQuoataFull: result.reduce((accumulator, current) => accumulator + current.quota_full, 0),\r\n totalQualityFail: result.reduce((accumulator, current) => accumulator + current.quality_fail, 0)\r\n });\r\n\r\n } catch(e) {\r\n alert(e)\r\n }\r\n\r\n try {\r\n const result = await API.get('soap', '/projects/' + this.props.match.params.id + '/quotas');\r\n\r\n this.setState({quotas: result, quotasLastRecalculated: new Date()});\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n const result = await API.get('soap', '/projects/' + this.props.match.params.id + '/groups');\r\n\r\n const selectedSamples = result.map(function(selectedSample){\r\n selectedSample.id = selectedSample.sample_id;\r\n\r\n selectedSample.name = this.state.samples.filter(sample => {\r\n return sample.sampleId == selectedSample.id;\r\n })[0].name;\r\n\r\n selectedSample.exclusions = selectedSample.filtered_out;\r\n selectedSample.lastRefreshed = new Date(selectedSample.last_refreshed);\r\n\r\n return selectedSample;\r\n }, this);\r\n\r\n this.setState({selectedSamples});\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n const result = await API.get('soap', \"/projects/\" + this.props.match.params.id + \"/filters\");\r\n\r\n this.setState({filters: result, filtersLastRecalculated: new Date()});\r\n\r\n } catch(e) {\r\n alert(e);\r\n }\r\n\r\n try {\r\n const emailTemplatesResult = await API.get('soaptwo', '/email-templates/');\r\n\r\n this.setState({emailTemplates: emailTemplatesResult});\r\n\r\n this.setState({emailTemplate: emailTemplatesResult[0].id})\r\n\r\n } catch(error) {\r\n console.log(error);\r\n }\r\n\r\n try {\r\n const users = await API.get('soapthree', '/users');\r\n\r\n this.setState({users})\r\n } catch(error) {\r\n console.log(error);\r\n }\r\n\r\n let statusStatsResult = await API.get('soaptwo', '/project-status-stats/' +\r\n this.state.projectId);\r\n\r\n this.setState({totalStatusStats: statusStatsResult});\r\n\r\n }\r\n\r\n async sourcesSentRefresh() {\r\n try {\r\n const result = await API.get('soaptwo', '/projects/' + this.props.match.params.id + \"/suppliers\");\r\n\r\n this.setState({sources: result});\r\n\r\n this.setState({\r\n totalAvailable: result.reduce((accumulator, current) => accumulator + current.sent + (current.unsent ? current.unsent : 0) + current.started, 0),\r\n totalCompletes: result.reduce((accumulator, current) => accumulator + current.completed, 0),\r\n totalUnsent: result.reduce((accumulator, current) => accumulator + (current.unsent ? current.unsent : 0), 0),\r\n totalSent: result.reduce((accumulator, current) => accumulator + current.sent, 0),\r\n totalStarted: result.reduce((accumulator, current) => accumulator + current.started, 0),\r\n totalScreenOuts: result.reduce((accumulator, current) => accumulator + current.screenout, 0),\r\n totalQuoataFull: result.reduce((accumulator, current) => accumulator + current.quota_full, 0),\r\n totalQualityFail: result.reduce((accumulator, current) => accumulator + current.quality_fail, 0)\r\n });\r\n\r\n } catch(e) {\r\n alert(e)\r\n }\r\n }\r\n\r\n async handleClientSurveyUrlSave(){\r\n\r\n const result = await API.patch('soaptwo', '/projects/' + this.props.match.params.id, {\r\n body: {'client_survey_url': this.state.client_survey_url}\r\n });\r\n\r\n const errors = result.errors ? result.errors : {};\r\n\r\n this.setState({errors: errors});\r\n\r\n }\r\n\r\n async handleClientIdParamNameSave(){\r\n\r\n const result = await API.patch('soaptwo', '/projects/' + this.props.match.params.id, {\r\n body: {'client_id_param': this.state.clientIdParamName}\r\n });\r\n\r\n const errors = result.errors ? result.errors : {};\r\n\r\n this.setState({errors: errors});\r\n\r\n }\r\n\r\n async handleSetTarget(target) {\r\n\r\n const projectId = this.props.match.params.id;\r\n\r\n let result = \"\";\r\n\r\n result = await API.patch('soaptwo', \"/projects/\" + projectId, {\r\n body:\r\n {'target_completes': target}\r\n });\r\n\r\n if(result.code == 1000) {\r\n this.setState({errors: result.errors})\r\n\r\n return false;\r\n } else {\r\n\r\n this.setState({target: result[0].target_completes});\r\n\r\n return true;\r\n }\r\n }\r\n handleInputChange(event) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n\r\n const name = target.name;\r\n\r\n console.log(name);\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n async handleAddPanelVariable(event) {\r\n const selectedVariableId = event.target.value;\r\n\r\n await API.post('soap', '/projects/' + this.props.match.params.id + '/panelvariables', {\r\n body: {'variableId': selectedVariableId}\r\n });\r\n\r\n try {\r\n const selectedPanelVariables = await API.get('soap', '/projects/' + this.props.match.params.id + '/panelvariables');\r\n\r\n this.setState({selectedPanelVariables})\r\n\r\n } catch (e) {\r\n alert(e)\r\n }\r\n }\r\n\r\n async handleParamSave(paramType, paramFor, paramId, defaultParam) {\r\n\r\n let endPoint = \"\";\r\n\r\n let field = \"\";\r\n\r\n let input = {};\r\n\r\n if(paramFor === \"client\") {\r\n endPoint = \"/projects/\" + this.state.projectId\r\n\r\n if(paramType === \"uniqueidentifier\") {\r\n field = \"unique_identifier_param_id\";\r\n }\r\n else if(paramType === 'resultcode') {\r\n field = \"result_code_param_id\";\r\n }\r\n\r\n input[field] = paramId;\r\n }\r\n else {\r\n endPoint = \"/projects/\" + this.state.projectId +\r\n '/suppliers/' + paramFor\r\n\r\n if(paramType === \"uniqueidentifier\") {\r\n field = \"unique_identifier_param_id\";\r\n }\r\n else if(paramType === 'resultcode') {\r\n field = \"result_code_param_id\";\r\n }\r\n\r\n input[field] = paramId;\r\n }\r\n\r\n try {\r\n let result = await API.patch('soaptwo', endPoint, {body: input});\r\n\r\n const newParamId = result[0][field];\r\n\r\n if(paramFor === \"client\") {\r\n if(paramType === \"uniqueidentifier\") {\r\n\r\n if(newParamId == 0) {\r\n this.setState({clientUniqueIdentifierParam: {id: newParamId, name: defaultParam} });\r\n } else {\r\n\r\n let result = await API.get('soap', \"/uniqueidentifierparams/\" + newParamId);\r\n\r\n this.setState({clientUniqueIdentifierParam: {id: newParamId, name: result[0].name}});\r\n }\r\n }\r\n if(paramType === \"resultcode\") {\r\n\r\n let result = await API.get('soap', \"/resultcodeparams/\" + newParamId);\r\n\r\n this.setState({clientResultCodeParam: {id: newParamId, name: result[0].name} });\r\n\r\n }\r\n } else {\r\n if(paramType === \"uniqueidentifier\") {\r\n\r\n let argumentName;\r\n\r\n if(newParamId == 0) {\r\n argumentName = defaultParam;\r\n } else {\r\n let result = await API.get('soap', \"/uniqueidentifierparams/\" + newParamId);\r\n\r\n argumentName = result[0].name;\r\n }\r\n\r\n let sources = this.state.sources;\r\n\r\n sources = sources.map((source) => {\r\n if (source.id === paramFor) {\r\n source.unique_identifier_param_id = newParamId;\r\n source.unique_identifier_param_name = argumentName;\r\n }\r\n\r\n return source;\r\n });\r\n\r\n console.log(sources);\r\n\r\n this.setState({sources});\r\n }\r\n }\r\n\r\n } catch(e) {\r\n alert(e)\r\n }\r\n\r\n }\r\n\r\n async handleQuotaStatusChange(quota) {\r\n const id = quota.id;\r\n\r\n const result = await API.patch('soap', '/quotas/' + id, {\r\n body: {\r\n active: !quota.active + \"\"\r\n }\r\n });\r\n\r\n const quotas = this.state.quotas.map(quota => {\r\n if(quota.id == id) {\r\n quota.active = result[0].active;\r\n return quota;\r\n } else {\r\n return quota;\r\n }\r\n })\r\n\r\n this.setState({quotas});\r\n\r\n this.handleFilteringStatsUpdate();\r\n }\r\n\r\n async handleQuotaDelete(event){\r\n\r\n const id = event.target.value;\r\n\r\n const result = await API.del('soap', '/quotas/' + id);\r\n\r\n const quotas = this.state.quotas.filter(quota => {\r\n return quota.id != id;\r\n });\r\n\r\n this.setState({quotas});\r\n\r\n }\r\n\r\n async handleQuotaSave(quota) {\r\n\r\n let result;\r\n\r\n result = await API.post('soaptwo', '/sfdl-validate', {\r\n body: {\r\n definition: quota.newQuotaDefinition,\r\n projectId: this.state.projectId\r\n }\r\n });\r\n\r\n if(result.code == 1) {\r\n\r\n result = await API.post('soap', '/quotas', {\r\n body: {\r\n name: quota.newQuotaName,\r\n definition: quota.newQuotaDefinition,\r\n target: quota.newQuotaTarget,\r\n project_id: this.state.projectId + \"\"\r\n }\r\n });\r\n }\r\n\r\n if(result.code == 1000) {\r\n this.setState({errors: {quota: result.errors}})\r\n\r\n return false;\r\n } else {\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n return true;\r\n }\r\n }\r\n\r\n async handleQuotaEdit(quota) {\r\n\r\n const result = await API.patch('soap', '/quotas/' + quota.id, {\r\n body: {\r\n name: quota.name,\r\n definition: quota.definition,\r\n target: quota.target + \"\",\r\n active: quota.active + \"\"}\r\n });\r\n\r\n await this.handleFilteringStatsUpdate();\r\n }\r\n\r\n async handleFilterSave(filter){\r\n\r\n const projectId = this.props.match.params.id + \"\";\r\n\r\n let result;\r\n\r\n result = await API.post('soaptwo', '/sfdl-validate', {\r\n body: {\r\n definition: filter.newFilterDefinition,\r\n projectId: this.state.projectId\r\n }\r\n });\r\n\r\n if(result.code == 1) {\r\n\r\n const result = await API.post('soap', '/filters/', {\r\n body: {\r\n name: filter.newFilterName,\r\n definition: filter.newFilterDefinition,\r\n project_id: projectId\r\n }\r\n });\r\n }\r\n\r\n if(result.code == 1000) {\r\n this.setState({errors: {filter: result.errors}})\r\n\r\n return false;\r\n } else {\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n return true\r\n }\r\n\r\n }\r\n\r\n async handleFilterDelete(event) {\r\n\r\n const id = event.target.value;\r\n\r\n const result = await API.del('soap', '/filters/' + id);\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n }\r\n\r\n async handleFilterStatusChange(filter) {\r\n\r\n const id = filter.id;\r\n\r\n const result = await API.patch('soap', '/filters/' + id, {\r\n body: {\r\n active: !filter.active + \"\"\r\n }\r\n });\r\n\r\n const filters = this.state.filters.map(filter => {\r\n if(filter.id == id) {\r\n filter.active = !filter.active;\r\n return filter;\r\n } else {\r\n return filter;\r\n }\r\n });\r\n\r\n this.setState({filters});\r\n\r\n this.handleFilteringStatsUpdate();\r\n }\r\n\r\n async handleFiltersRecalculate(){\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n }\r\n\r\n handleSamplesSearch(searchTerm){\r\n searchTerm = searchTerm.toLowerCase();\r\n\r\n console.log(searchTerm);\r\n\r\n const selectedSampleNames = this.state.selectedSamples.map(\r\n sample => sample.name);\r\n\r\n let displayedSamples = this.state.samples.filter(sample => {\r\n return !selectedSampleNames.includes(sample.name)\r\n });\r\n\r\n displayedSamples = displayedSamples.filter((sample) => {\r\n let searchValue = sample.name.toLowerCase() + ' ' + sample.psuName.toLowerCase();\r\n return searchValue.indexOf(searchTerm) !== -1;\r\n });\r\n\r\n this.setState({displayedSamples})\r\n }\r\n\r\n async handleAddSample(selectedSampleId) {\r\n\r\n this.setState({displayedSamples: []});\r\n\r\n this.pollForNewSelectedSample();\r\n\r\n const result = await API.post('soap', '/projects/' + this.props.match.params.id + '/groups', {\r\n body: {\r\n \"sampleId\": selectedSampleId\r\n }\r\n });\r\n }\r\n\r\n pollForNewSelectedSample() {\r\n\r\n async function checkAndUpdateSelectedSamples() {\r\n\r\n let selectedSamplesInDbResult = await API.get('soap', `/projects/${this.state.projectId}/groups`);\r\n\r\n let pageSampleCount = this.state.selectedSamples.length;\r\n\r\n let dbSampleCount = selectedSamplesInDbResult.length;\r\n\r\n console.log(dbSampleCount, pageSampleCount);\r\n\r\n if(dbSampleCount == pageSampleCount) {\r\n setTimeout(checkAndUpdateSelectedSamples.bind(this), 2000);\r\n } else {\r\n console.log(\"NEW SAMPLE!\");\r\n\r\n await this.handleFilteringStatsUpdate();\r\n }\r\n\r\n }\r\n\r\n setTimeout(checkAndUpdateSelectedSamples.bind(this), 2000);\r\n\r\n }\r\n\r\n pollForRefreshedSample(sampleId, clickTime) {\r\n\r\n async function checkRefreshedSampleAndUpdate() {\r\n\r\n const selectedSamplesInDbResult = await API.get('soap', `/projects/${this.state.projectId}/groups`);\r\n\r\n let chosenSampleLastRefreshInDb =\r\n selectedSamplesInDbResult.filter(sample => sample.sample_id == sampleId)[0].last_refreshed;\r\n\r\n if(!chosenSampleLastRefreshInDb) {\r\n setTimeout(checkRefreshedSampleAndUpdate.bind(this, sampleId), 2000);\r\n } else {\r\n\r\n const clickMoment = moment(clickTime);\r\n\r\n console.log(clickMoment.format());\r\n\r\n if(clickMoment.isBefore(chosenSampleLastRefreshInDb)) {\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n } else {\r\n\r\n setTimeout(checkRefreshedSampleAndUpdate.bind(this, sampleId), 2000);\r\n\r\n }\r\n }\r\n }\r\n\r\n // checkRefreshedSampleAndUpdate = checkRefreshedSampleAndUpdate.bind(this);\r\n\r\n setTimeout(checkRefreshedSampleAndUpdate.bind(this, sampleId), 2000);\r\n }\r\n\r\n async handleSampleRefresh(sampleId){\r\n\r\n console.log(sampleId);\r\n\r\n await API.post('soap', '/projects/' + this.props.match.params.id + '/groups', {\r\n body: {\r\n \"sampleId\": sampleId\r\n }\r\n });;\r\n\r\n this.pollForRefreshedSample(sampleId, new Date());\r\n\r\n }\r\n\r\n async handleIncentiveDelete(incentive){\r\n\r\n let type = \"\";\r\n\r\n if(incentive.type == 'filter') {\r\n type = \"filters\";\r\n } else if (incentive.type == 'quota') {\r\n type = \"quotas\"\r\n }\r\n\r\n const results = await API.patch('soap', \"/\" + type + \"/\" + incentive.id, {body:\r\n {points: 0}\r\n });\r\n\r\n let updatedType = this.state[type];\r\n\r\n updatedType = updatedType.map(type => {\r\n if(type.id == incentive.id)\r\n {\r\n type.points = 0;\r\n }\r\n\r\n return type;\r\n\r\n });\r\n\r\n this.setState({\r\n [type]: updatedType\r\n })\r\n }\r\n\r\n async handleIncentiveSave(incentive){\r\n\r\n let type = \"\";\r\n\r\n if(incentive.newIncentiveType == 'filter') {\r\n type = \"filters\";\r\n } else if (incentive.newIncentiveType == 'quota') {\r\n type = \"quotas\"\r\n }\r\n\r\n const result = await API.patch('soap', \"/\" + type + \"/\" + incentive.newIncentiveFilterOrQuota, {body:\r\n {points: incentive.newIncentivePoints}\r\n });\r\n\r\n if(result.code == 1000) {\r\n\r\n this.setState({errors: {incentives: result.errors}});\r\n\r\n return false;\r\n } else {\r\n\r\n let updatedType = this.state[type];\r\n\r\n updatedType = updatedType.map(type => {\r\n if (type.id == incentive.newIncentiveFilterOrQuota) {\r\n type.points = incentive.newIncentivePoints;\r\n }\r\n\r\n return type;\r\n\r\n });\r\n\r\n this.setState({\r\n [type]: updatedType\r\n })\r\n\r\n return true;\r\n }\r\n }\r\n\r\n async handleSetDefaultIncentive(defaultIncentive){\r\n\r\n const result = await API.patch('soaptwo', \"/projects/\" + this.props.match.params.id, {body:\r\n {default_incentive: defaultIncentive}\r\n });\r\n\r\n if(result.code == 1000) {\r\n\r\n this.setState({errors: {incentives: result.errors}})\r\n\r\n return false;\r\n\r\n } else {\r\n\r\n this.setState({defaultIncentive: result[0].default_incentive})\r\n\r\n return true;\r\n }\r\n }\r\n\r\n async handleProjectClosedToggle() {\r\n\r\n let closedDate = false;\r\n\r\n if(!this.state.projectClosed) {\r\n\r\n closedDate = await new Date().toJSON().slice(0, 10);\r\n\r\n }\r\n\r\n let result = \"\";\r\n\r\n if(this.props.match.params.id) {\r\n result = await API.patch('soaptwo', \"/projects/\" + this.props.match.params.id,\r\n {body: {\r\n closed_date: closedDate\r\n }});\r\n }\r\n\r\n console.log(result);\r\n\r\n this.setState({projectClosed: result[0].closed_date});\r\n }\r\n\r\n handleSelectQuota(event) {\r\n\r\n const quotaId = parseInt(event.target.value);\r\n\r\n let selectedQuotas = this.state.selectedQuotas;\r\n\r\n if(event.target.checked) {\r\n selectedQuotas = [...selectedQuotas, quotaId];\r\n }\r\n else {\r\n selectedQuotas = selectedQuotas.filter(selectedQuota =>\r\n selectedQuota != quotaId\r\n )\r\n }\r\n\r\n this.setState({selectedQuotas});\r\n }\r\n\r\n async handleInviteToggle(event){\r\n if(event.target.value == 'remind') {\r\n await this.setState({invite: false})\r\n } else if(event.target.value == \"invite\"){\r\n await this.setState({invite: true})\r\n }\r\n\r\n this.handleSetQuotaCombinationsAvailableStat();\r\n }\r\n\r\n async onStatusReminderToggle(event){\r\n await this.setState({remindStatus: event.target.value})\r\n\r\n this.handleSetQuotaCombinationsAvailableStat()\r\n }\r\n\r\n handleSetQuotaCombinationsAvailableStat() {\r\n\r\n if(this.state.invite) {\r\n this.state.quotasTotalAvailableStat = this.state.totalStatusStats.unsent;\r\n } else {\r\n if (this.state.remindStatus == 'invited') {\r\n this.state.quotasTotalAvailableStat = this.state.totalStatusStats.sent;\r\n } else if (this.state.remindStatus == 'started') {\r\n this.state.quotasTotalAvailableStat = this.state.totalStatusStats.started;\r\n } else if (this.state.remindStatus == 'both') {\r\n this.state.quotasTotalAvailableStat = this.state.totalStatusStats.sent + this.state.totalStatusStats.started;\r\n }\r\n }\r\n\r\n let quotaCombinations = this.state.quotaCombinations.map(function(combination){\r\n\r\n if(this.state.invite) {\r\n combination.available = combination.unsent;\r\n } else {\r\n if (this.state.remindStatus == 'invited') {\r\n combination.available = combination.sent;\r\n } else if (this.state.remindStatus == 'started') {\r\n combination.available = combination.started;\r\n } else if (this.state.remindStatus == 'both') {\r\n combination.available = combination.sent + combination.started;\r\n }\r\n }\r\n\r\n combination.toSend = Math.min(combination.toSend, combination.available);\r\n\r\n return combination;\r\n }, this);\r\n\r\n this.setState({quotaCombinations});\r\n\r\n this.setTotalToSend();\r\n\r\n }\r\n\r\n async handleSelectQuotas(){\r\n\r\n let selectedQuotas = this.state.selectedQuotas;\r\n\r\n if(selectedQuotas.length == 0) {\r\n\r\n this.setState({quotaCombinations: []})\r\n\r\n return;\r\n }\r\n\r\n let quotaCombinationsResult = await API.get('soap', '/quota-combinations?ids=' +\r\n selectedQuotas.join(','));\r\n\r\n console.log(quotaCombinationsResult);\r\n\r\n let quotaCombinations = quotaCombinationsResult.map(function(combination){\r\n\r\n let names = combination.quotaIds.map(function(id){\r\n return this.state.quotas.filter(quota => quota.id == id)[0].name\r\n }, this);\r\n\r\n let name = '';\r\n\r\n if(!names.length) {\r\n name = \"Not in any quota\"\r\n } else {\r\n name = names.join(' | ');\r\n }\r\n\r\n let target = \"-\";\r\n\r\n let achieved = \"-\";\r\n\r\n if(combination.quotaIds.length == 1) {\r\n target = this.state.quotas.filter(quota => quota.id == combination.quotaIds[0])[0].target;\r\n\r\n achieved = this.state.quotas.filter(quota => quota.id == combination.quotaIds[0])[0].achieved;\r\n }\r\n\r\n return {\r\n combinationIndex: combination.combinationIndex,\r\n quotaIds: combination.quotaIds,\r\n name: name,\r\n target: target,\r\n achieved: achieved,\r\n unsent: combination.panelistStats.unsent,\r\n sent: combination.panelistStats.sent,\r\n started: combination.panelistStats.started,\r\n definition: combination.definition,\r\n toSend: 0\r\n };\r\n }, this);\r\n\r\n this.setState({quotaCombinations})\r\n\r\n this.handleSetQuotaCombinationsAvailableStat()\r\n }\r\n\r\n handleToSendChange(event){\r\n\r\n this.setState({distributeToSend: false});\r\n\r\n const toSend = event.target.value;\r\n\r\n const combinationIdString = event.target.name;\r\n\r\n const quotaCombinations = this.state.quotaCombinations.map(function(combination) {\r\n\r\n if(combination.quotaIds.join('#') == combinationIdString) {\r\n combination.toSend = Math.min(toSend, combination.available);\r\n }\r\n\r\n return combination;\r\n }\r\n )\r\n\r\n this.setState({quotaCombinations});\r\n\r\n this.setTotalToSend();\r\n }\r\n\r\n setTotalToSend() {\r\n\r\n let totalToSend = this.state.totalToSend;\r\n\r\n if(this.state.quotaCombinations.length > 1) {\r\n\r\n totalToSend = this.state.quotaCombinations.reduce((accumulator, combination) =>\r\n accumulator + ((parseInt(combination.toSend) > 0) ? parseInt(combination.toSend) : 0)\r\n , 0);\r\n } else {\r\n totalToSend = Math.min(totalToSend, this.state.quotasTotalAvailableStat)\r\n }\r\n\r\n this.setState({totalToSend})\r\n }\r\n\r\n async handleTotalToSendChange(event) {\r\n\r\n await this.setState({totalToSend: event.target.value});\r\n\r\n this.setTotalToSend();\r\n\r\n }\r\n\r\n handleDistribute(event){\r\n this.handleInputChange(event);\r\n\r\n const distributeType = event.target.value;\r\n\r\n if(this.state.quotaCombinations.length > 0) {\r\n\r\n let quotaCombinations = [];\r\n\r\n quotaCombinations = this.state.quotaCombinations.map(function (combination) {\r\n\r\n if (distributeType === 'xToGet') {\r\n combination.toSend = Math.min(this.state.xToGet * (combination.target - combination.achieved),\r\n combination.available);\r\n } else if (distributeType === 'max') {\r\n combination.toSend = combination.available;\r\n } else if (distributeType === 'clear') {\r\n combination.toSend = '';\r\n }\r\n return combination;\r\n }, this);\r\n\r\n\r\n this.setState([quotaCombinations]);\r\n\r\n this.setTotalToSend();\r\n }\r\n else {\r\n\r\n let totalToSend = 0;\r\n\r\n if (distributeType === 'xToGet') {\r\n totalToSend = Math.min(this.state.xToGet * (this.state.target - this.state.totalCompletes),\r\n this.state.quotasTotalAvailableStat);\r\n } else if (distributeType === 'max') {\r\n totalToSend = this.state.quotasTotalAvailableStat;\r\n }\r\n\r\n this.setState({totalToSend});\r\n }\r\n }\r\n\r\n async handleSend() {\r\n\r\n if(this.state.sendBlocked) {\r\n return;\r\n }\r\n\r\n this.setState({sendBlocked: true});\r\n\r\n let status = '';\r\n\r\n if(this.state.invite) {\r\n status = 'unsent';\r\n } else {\r\n if (this.state.remindStatus == 'invited') {\r\n status = 'sent';\r\n } else if (this.state.remindStatus == 'started') {\r\n status = 'started';\r\n } else if (this.state.remindStatus == 'both') {\r\n status = 'both';\r\n }\r\n }\r\n\r\n let sendRequestData = {\r\n total: this.state.totalToSend,\r\n recipientsStatus: status,\r\n quotaCombinations: this.state.quotaCombinations,\r\n templateId: this.state.emailTemplate\r\n }\r\n\r\n let enqueueResponse = await API.post('soap', '/enqueue-emails/' + this.state.projectId, {\r\n body: sendRequestData});\r\n\r\n if(enqueueResponse.code > 1) {\r\n this.setState({invitesRemindersIsError: true, invitesRemindersErrorMessage: enqueueResponse.message});\r\n }\r\n\r\n await this.handleFilteringStatsUpdate();\r\n\r\n this.setState({sendBlocked: false});\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
View Project \r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n {this.state.projectNumber != \"fetching\" && (\r\n\r\n
\r\n Job number: {this.state.projectNumber}
\r\n Job name: {this.state.projectName}
\r\n Type: {this.state.projectType}
\r\n Start date: {this.state.startDate.toLocaleDateString()}
\r\n\r\n \r\n )}\r\n\r\n\r\n {/*
*/}\r\n
Current completes: \r\n
Total completes: {this.state.totalCompletes}
\r\n {this.state.sources != \"fetching\" && (\r\n this.state.sources.map(source =>
{source.name}: {source.completed}
)\r\n )}\r\n\r\n
\r\n {this.state.target != \"fetching\" && (\r\n
\r\n )}\r\n\r\n
Percentage of completes done: \r\n\r\n {this.state.totalCompletes != \"fetching\" && this.state.target != \"fetching\" && (\r\n
{ Math.round(this.state.totalCompletes / this.state.target * 100) }%
\r\n )}\r\n\r\n
Quotas \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Source \r\n #Sent \r\n #Started \r\n #Screen outs \r\n #Quota full \r\n #Quality Fail \r\n #Completed \r\n \r\n \r\n \r\n \r\n Total \r\n {this.state.totalSent} \r\n {this.state.totalStarted} \r\n {this.state.totalScreenOuts} \r\n {this.state.totalQuoataFull} \r\n {this.state.totalQualityFail} \r\n {this.state.totalCompletes} \r\n \r\n {this.state.sources != \"fetching\" && (\r\n this.state.sources.map(source =>\r\n \r\n {source.name} \r\n {source.sent} \r\n {source.started} \r\n {source.screenout} \r\n {source.quota_full} \r\n {source.quality_fail} \r\n {source.completed} \r\n \r\n )\r\n )}\r\n \r\n
\r\n\r\n {this.state.sources != \"fetching\" && (\r\n this.state.sources.filter(source => source.id).map(source =>\r\n
\r\n )\r\n )}\r\n\r\n
\r\n \r\n \r\n %Start Rate \r\n %Response Rate \r\n %Completion Rate \r\n \r\n \r\n \r\n \r\n \r\n {Math.round(\r\n (this.state.totalStarted + this.state.totalCompletes + this.state.totalScreenOuts\r\n + this.state.totalQuoataFull + this.state.totalQualityFail)\r\n /\r\n (this.state.totalSent + this.state.totalStarted + this.state.totalCompletes\r\n + this.state.totalScreenOuts + this.state.totalQuoataFull\r\n + this.state.totalQualityFail)\r\n * 100\r\n )}\r\n \r\n \r\n {Math.round(\r\n (this.state.totalCompletes + this.state.totalScreenOuts\r\n + this.state.totalQuoataFull + this.state.totalQualityFail)\r\n /\r\n (this.state.totalSent + this.state.totalStarted + this.state.totalCompletes\r\n + this.state.totalScreenOuts + this.state.totalQuoataFull\r\n + this.state.totalQualityFail)\r\n * 100)}\r\n \r\n {Math.round(\r\n (this.state.totalCompletes)\r\n /\r\n (this.state.totalStarted + this.state.totalCompletes\r\n + this.state.totalScreenOuts + this.state.totalQuoataFull\r\n + this.state.totalQualityFail)\r\n * 100)} \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n\r\n {this.state.client_survey_url !=\"fetching\" && (\r\n
\r\n Save\r\n \r\n )}\r\n\r\n
\r\n\r\n {this.state.clientIdParamName !=\"fetching\" && (\r\n
\r\n Save\r\n \r\n )}\r\n
\r\n
\r\n
\r\n
\r\n {this.state.projectNumber != \"fetching\" && (\r\n\r\n \r\n \r\n )}\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n {this.state.filters != \"fetching\" && (\r\n \r\n\r\n \r\n {this.state.selectedSamples != \"fetching\" && (\r\n \r\n\r\n \r\n {this.state.filters != \"fetching\" && this.state.quotas != \"fetching\" && (\r\n \r\n\r\n \r\n \r\n\r\n\r\n {!this.state.projectClosed && (\r\n \r\n \r\n \r\n \r\n Email Template\r\n \r\n\r\n \r\n
\r\n\r\n \r\n {this.state.emailTemplates.map(template =>\r\n {template.name} \r\n )}\r\n \r\n \r\n )}\r\n \r\n\r\n \r\n \r\n )}\r\n\r\n \r\n )}\r\n\r\n {this.state.sources != \"fetching\" && this.state.sources.length > 1 && (\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n )}\r\n \r\n {this.state.projectClosed != \"fetching\" && (this.state.projectClosed ? (\r\n
Re-open project \r\n ) : (\r\n
Close project \r\n ))\r\n }\r\n\r\n {this.state.projectClosed && this.state.projectClosed != \"fetching\" && (\r\n
Project Closed: {new Date(this.state.projectClosed).toLocaleDateString('en-GB')}
\r\n )}\r\n\r\n
Completion stats \r\n
\r\n\r\n
\r\n\r\n
\r\n {this.props.project.name} \r\n {this.props.project.archived_by} \r\n {new Date(this.props.project.start_date).toLocaleDateString(\"en-GB\")} \r\n {new Date(this.props.project.closed_date).toLocaleDateString(\"en-GB\")} \r\n {this.props.project.sent} \r\n {this.props.project.completed} \r\n {Math.round(this.props.project.started / this.props.project.sent * 100)} \r\n {Math.round(\r\n (this.props.project.completed + this.props.project.screenout + this.props.project.quota_full\r\n + this.props.project.quality_fail)\r\n /\r\n this.props.project.sent * 100)} \r\n {Math.round(this.props.project.completed / this.props.project.started * 100)} \r\n {\r\n Math.round((this.props.project.started - this.props.project.completed\r\n - this.props.project.screenout - this.props.project.quota_full - this.props.project.quality_fail) / this.props.project.started\r\n * 100)\r\n } \r\n \r\n Restore\r\n \r\n \r\n )\r\n }\r\n\r\n}\r\n\r\nexport default ArchivedProject;","import React, {Component} from 'react';\r\nimport ArchivedProject from './archivedProject';\r\nimport {Form} from 'react-bootstrap';\r\nimport {API} from \"aws-amplify\";\r\n\r\nclass ArchivedProjects extends Component {\r\n\r\n state = {\r\n projects: \"fetching\",\r\n displayedProjects: [] ,\r\n searchString: '',\r\n searchField: 'name'\r\n }\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleRestore = this.handleRestore.bind(this)\r\n this.onSearch = this.onSearch.bind(this)\r\n this.handleSearch = this.handleSearch.bind(this)\r\n this.handleSearchFieldSelect = this.handleSearchFieldSelect.bind(this)\r\n }\r\n\r\n async onSearch(event) {\r\n const searchString = event.target.value;\r\n\r\n await this.setState({searchString});\r\n\r\n this.handleSearch();\r\n }\r\n\r\n handleSearch(){\r\n\r\n const displayedProjects = this.state.projects.filter(project => project[this.state.searchField].indexOf(\r\n this.state.searchString) > -1);\r\n\r\n console.log(displayedProjects);\r\n\r\n this.setState({displayedProjects});\r\n\r\n }\r\n\r\n async handleSearchFieldSelect(event){\r\n\r\n const searchField = event.target.value;\r\n\r\n await this.setState({searchField});\r\n\r\n this.handleSearch()\r\n }\r\n\r\n async handleRestore(event){\r\n\r\n const restoredProjectId = event.target.value;\r\n\r\n const restoreResult = await API.patch('soaptwo', '/projects/' + restoredProjectId, {\r\n body: {'archived': 0}\r\n });\r\n\r\n if(restoreResult[0].archived == 0) {\r\n\r\n const projects = this.state.projects.filter(project => project.id != restoredProjectId);\r\n\r\n this.setState({projects});\r\n\r\n this.handleSearch();\r\n\r\n }\r\n }\r\n\r\n async componentDidMount(){\r\n const projectsResult = await API.get('soaptwo', '/archived-projects');\r\n\r\n this.setState({projects: projectsResult});\r\n\r\n this.handleSearch();\r\n }\r\n\r\n render(){\r\n return (\r\n \r\n\r\n \r\n Search \r\n \r\n {[\r\n {propertyName: 'name', label: \"Project Name\"},\r\n {propertyName: 'archived_by', label: \"User name\"}].map(field =>\r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n Project name \r\n User name \r\n Start date \r\n Date closed \r\n Invites sent \r\n Survey completes \r\n Started % \r\n Response rate % \r\n Completion rate % \r\n Drop out % \r\n Restore \r\n \r\n\r\n {this.state.projects !=\"fetching\" && this.state.displayedProjects.map(project =>\r\n\r\n
\r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default ArchivedProjects;\r\n","import React, {Component} from 'react';\r\nimport ArchivedProjects from './archivedProjects.jsx';\r\nimport Navigation from \"./navigation\";\r\n\r\nclass ArchivedProjectList extends Component {\r\n\r\n render(){\r\n return (\r\n\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
Archived Projects \r\n\r\n
\r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default ArchivedProjectList;","import React, {Component} from 'react';\r\nimport {API} from \"aws-amplify\";\r\nimport {isMobile} from 'react-device-detect';\r\n\r\nconst queryString = require('query-string');\r\n\r\n\r\nclass Landing extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleClickLink = this.handleClickLink.bind(this);\r\n }\r\n\r\n state = {};\r\n\r\n async handleClickLink() {\r\n\r\n const statusResult = await API.get('return', '/handleLanding?yscode='\r\n + encodeURIComponent(this.state.yscode) + \"&\" + this.state.resultCodeParam + \"=1\");\r\n\r\n let surveyLink = \"http://\" + this.state.url.replace(/https?:\\/\\//gi, '');\r\n\r\n window.location = surveyLink;\r\n\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n console.log(this.props.location.search);\r\n\r\n const landingResult = await API.get('return', '/handleLanding' + this.props.location.search);\r\n\r\n if(landingResult.redirect) {\r\n\r\n let redirect = \"http://\" + landingResult.redirect.replace(/https?:\\/\\//gi, '');\r\n\r\n window.location = redirect;\r\n } else {\r\n\r\n this.setState({\r\n content: landingResult.content,\r\n url: landingResult.url,\r\n yscode: landingResult.yscode,\r\n resultCodeParam: landingResult.resultCodeParam,\r\n mobileCompatibility: landingResult.mobileCompatibility\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n\r\n {this.state.content && (\r\n
\r\n )}\r\n\r\n {this.state.url && (this.state.mobileCompatibility || !isMobile) && (\r\n Click here to go to survey \r\n )}\r\n\r\n {this.state.content && !this.state.mobileCompatibility && isMobile && (\r\n This survey cannot be completed on mobiles. Please us a laptop or desktop computer to\r\n access this survey link
\r\n )}\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Landing;","import React, { Component } from \"react\";\r\nimport { Button, Form } from \"react-bootstrap\";\r\nimport { Auth } from \"aws-amplify\";\r\nimport {Link, Redirect} from 'react-router-dom';\r\n\r\nexport default class Login extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n email: \"\",\r\n password: \"\"\r\n };\r\n\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n }\r\n\r\n validateForm() {\r\n return this.state.email.length > 0 && this.state.password.length > 0;\r\n }\r\n\r\n handleInputChange(event) {\r\n\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n handleSubmit = async event => {\r\n event.preventDefault();\r\n\r\n try {\r\n await Auth.signIn(this.state.email, this.state.password);\r\n this.props.onUserHasAuthenticated(true);\r\n } catch (e) {\r\n alert(e.message);\r\n }\r\n }\r\n\r\n\r\n render() {\r\n\r\n if (this.props.isAuthenticated === true) {\r\n return \r\n \r\n \r\n \r\n Login\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { Auth } from \"aws-amplify\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {Form, Button} from 'react-bootstrap';\r\n\r\nclass PasswordReset extends Component {\r\n\r\n state = {\r\n username: \"\",\r\n codeSent: false,\r\n code: '',\r\n password: '',\r\n confirmPassword:'',\r\n errors: {},\r\n resetComplete: false\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.handleRequestCode = this.handleRequestCode.bind(this);\r\n this.handlePasswordReset = this.handlePasswordReset.bind(this);\r\n\r\n }\r\n\r\n handleInputChange(event) {\r\n\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n async handleRequestCode(){\r\n let requestCodeResult = await Auth.forgotPassword(this.state.username);\r\n\r\n this.setState({codeSent: true})\r\n }\r\n\r\n async handlePasswordReset(){\r\n\r\n await this.setState({errors: {}});\r\n\r\n let hasErrors = false;\r\n\r\n if(this.state.password.length < 12) {\r\n this.setState({errors: {...this.state.errors, password: 'Password must be at least 12 characters'}})\r\n\r\n hasErrors = true;\r\n }\r\n\r\n if(this.state.password != this.state.confirmPassword) {\r\n this.setState({errors: {...this.state.errors, confirmPassword: 'Password don\\'t match'}})\r\n\r\n hasErrors = true;\r\n }\r\n\r\n if(!hasErrors) {\r\n try {\r\n let passwordResetResult = await Auth.forgotPasswordSubmit(this.state.username, this.state.code, this.state.password);\r\n\r\n this.setState({resetComplete: true})\r\n } catch(error) {\r\n\r\n }\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {!this.state.resetComplete && (\r\n \r\n {!this.state.codeSent && (\r\n \r\n \r\n Username \r\n \r\n Request reset code\r\n \r\n )}\r\n\r\n {this.state.codeSent && (\r\n \r\n \r\n Code \r\n \r\n\r\n \r\n Password \r\n {this.state.errors.password} \r\n \r\n\r\n \r\n Confirm Password \r\n {this.state.errors.confirmPassword} \r\n \r\n\r\n Reset Password\r\n \r\n )}\r\n \r\n )}\r\n {this.state.resetComplete && (\r\n Password reset complete.
\r\n )}\r\n \r\n )\r\n }\r\n\r\n}\r\n\r\nexport default PasswordReset;","import React,{Component} from 'react';\r\nimport {Button} from 'react-bootstrap';\r\nimport Confirm from \"./confirm\";\r\n\r\nclass EmailTemplate extends Component {\r\n\r\n render(){\r\n return (\r\n \r\n {this.props.template.name} \r\n {new Date(this.props.template.date_created).toLocaleDateString(\"en-GB\")} \r\n {new Date(this.props.template.date_updated).toLocaleDateString(\"en-GB\")} \r\n {this.props.template.last_edited_by} \r\n {this.props.template.tags} \r\n \r\n Edit\r\n \r\n \r\n Copy\r\n \r\n \r\n \r\n {confirm => (\r\n Delete \r\n )}\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n}\r\n\r\nexport default EmailTemplate;\r\n","import React, {Component} from 'react';\r\nimport {Button, Modal, Form, Tabs, Tab} from \"react-bootstrap\";\r\n\r\nclass EmailTemplateEditor extends Component{\r\n\r\n state = {\r\n activeTab: 'source'\r\n };\r\n\r\n render() {\r\n return(\r\n \r\n \r\n\r\n \r\n \r\n Name\r\n \r\n \r\n Tags\r\n \r\n \r\n\r\n Available dynamic text fields:\r\n [[link]] \r\n #first_name# \r\n {this.props.dynamicFields != \"fetching\" && this.props.dynamicFields.map(field =>\r\n\r\n {field.varname} \r\n\r\n )}\r\n
\r\n\r\n \r\n \r\n \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 Save\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default EmailTemplateEditor;","import React, {Component} from 'react';\r\nimport EmailTemplate from './emailTemplate';\r\nimport EmailTemplateEditor from './emailTemplateEditor';\r\nimport {Form} from 'react-bootstrap';\r\nimport {API, Auth} from 'aws-amplify';\r\nimport {Link} from \"react-router-dom\";\r\nimport Navigation from \"./navigation\";\r\n\r\nclass EmailTemplates extends Component {\r\n\r\n state = {\r\n templates: \"fetching\",\r\n dynamicFields: \"fetching\",\r\n displayedTemplates: [],\r\n editing: false,\r\n templateUnderEdit: {},\r\n searchString: ''\r\n };\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.handleEdit = this.handleEdit.bind(this);\r\n this.handleCopy = this.handleCopy.bind(this);\r\n this.handleTemplateDelete = this.handleTemplateDelete.bind(this);\r\n\r\n this.setContentPreview = this.setContentPreview.bind(this);\r\n\r\n this.toggleEdit = this.toggleEdit.bind(this);\r\n this.handleTemplatePropertyChange = this.handleTemplatePropertyChange.bind(this);\r\n this.handleTemplateSave = this.handleTemplateSave.bind(this);\r\n\r\n this.handleSearch = this.handleSearch.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n }\r\n\r\n async handleEdit(event) {\r\n const templateId = event.target.value;\r\n\r\n const templateUnderEdit = JSON.parse(JSON.stringify(\r\n this.state.templates.filter(template => template.id == templateId)[0]));\r\n\r\n await this.setState({templateUnderEdit});\r\n\r\n this.setContentPreview();\r\n\r\n this.toggleEdit();\r\n }\r\n\r\n setContentPreview() {\r\n\r\n let templateUnderEdit = this.state.templateUnderEdit;\r\n\r\n let contentWithExampleDynamicText = templateUnderEdit['content'];\r\n\r\n for (const field of this.state.dynamicFields) {\r\n\r\n console.log(field.varname, field.demo);\r\n\r\n contentWithExampleDynamicText =\r\n contentWithExampleDynamicText.replace(field.varname, field.demo);\r\n }\r\n\r\n contentWithExampleDynamicText = contentWithExampleDynamicText.replace('[[link]]',\r\n 'https://field.opinionpanel.co.uk/landing');\r\n\r\n templateUnderEdit['contentPreview'] = contentWithExampleDynamicText;\r\n\r\n this.setState({templateUnderEdit})\r\n\r\n }\r\n\r\n handleCopy(event) {\r\n const templateId = event.target.value;\r\n\r\n let templateUnderEdit = JSON.parse(JSON.stringify(\r\n this.state.templates.filter(template => template.id == templateId)[0]));\r\n\r\n templateUnderEdit.id = null;\r\n\r\n this.setState({templateUnderEdit});\r\n\r\n this.toggleEdit();\r\n }\r\n\r\n toggleEdit(){\r\n this.setState({editing: !this.state.editing});\r\n }\r\n\r\n async handleTemplateDelete(event) {\r\n const templateId = event.target.value;\r\n\r\n const deleteResult = await API.del('soaptwo', '/email-templates/' + templateId);\r\n\r\n const templates = this.state.templates.filter(template => template.id != templateId);\r\n\r\n this.setState({templates});\r\n\r\n this.handleSearch();\r\n }\r\n\r\n async handleTemplatePropertyChange(event) {\r\n\r\n const propertyName = event.target.name;\r\n\r\n const newValue = event.target.value;\r\n\r\n let templateUnderEdit = this.state.templateUnderEdit;\r\n\r\n templateUnderEdit[propertyName] = newValue;\r\n\r\n await this.setState({templateUnderEdit})\r\n\r\n this.setContentPreview();\r\n }\r\n\r\n async handleTemplateSave(){\r\n\r\n const userInfo = await Auth.currentUserInfo();\r\n\r\n let httpVerb = \"patch\";\r\n\r\n if(!this.state.templateUnderEdit.id) {\r\n httpVerb = \"post\"\r\n }\r\n\r\n let idString = ''\r\n\r\n if(this.state.templateUnderEdit.id) {\r\n idString = this.state.templateUnderEdit.id;\r\n }\r\n\r\n const updateResult = await API[httpVerb]('soaptwo', '/email-templates/'\r\n + idString, {\r\n body: {\r\n name: this.state.templateUnderEdit.name,\r\n tags: this.state.templateUnderEdit.tags,\r\n content: this.state.templateUnderEdit.content,\r\n date_updated: new Date().toISOString().split('T')[0],\r\n last_edited_by: userInfo.username\r\n }\r\n });\r\n\r\n const templates =\r\n [...this.state.templates.filter(template => template.id != updateResult[0].id), updateResult[0]]\r\n\r\n this.setState({templates});\r\n\r\n this.handleSearch();\r\n\r\n this.toggleEdit();\r\n\r\n }\r\n\r\n async onSearch(event) {\r\n\r\n const searchString = event.target.value;\r\n\r\n await this.setState({searchString});\r\n\r\n this.handleSearch();\r\n }\r\n\r\n async handleSearch(){\r\n\r\n const displayedTemplates = this.state.templates.filter(function(template){\r\n\r\n console.log(template['content']);\r\n\r\n return Object.keys(template).reduce((accumulator, key) => {\r\n\r\n return accumulator || String(template[key]).indexOf(this.state.searchString) > -1;\r\n\r\n }, false);\r\n\r\n\r\n\r\n }, this);\r\n\r\n this.setState({displayedTemplates});\r\n }\r\n\r\n async componentDidMount() {\r\n\r\n const templates = await API.get('soaptwo', '/email-templates');\r\n\r\n this.setState({templates});\r\n\r\n this.handleSearch();\r\n\r\n const dynamicFields = await API.get('soaptwo', '/email-dynamic-fields');\r\n\r\n this.setState({dynamicFields});\r\n\r\n }\r\n\r\n render(){\r\n return (\r\n\r\n \r\n \r\n\r\n
\r\n\r\n
Mail Template Management \r\n\r\n
\r\n Search \r\n \r\n\r\n
\r\n \r\n \r\n Name \r\n Date created \r\n Date last edited \r\n Last edited by \r\n Tags \r\n \r\n \r\n\r\n {this.state.templates != \"fetching\" && this.state.displayedTemplates.map(template =>\r\n\r\n
\r\n\r\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 EmailTemplates","import React, {Component} from 'react';\r\nimport { Route, Redirect} from \"react-router-dom\";\r\n\r\nconst PrivateRoute = ({component: Component, authed, ...rest}) => {\r\n return (\r\n (\r\n authed === true\r\n ? \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\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 App;\r\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","export default {\r\n apiGateway: {\r\n REGION: \"us-east-1\",\r\n URL: \"https://qjp7ne6t1d.execute-api.us-east-1.amazonaws.com/dev\"\r\n },\r\n cognito: {\r\n REGION: \"us-east-1\",\r\n USER_POOL_ID: \"us-east-1_xKixjAVUX\",\r\n APP_CLIENT_ID: \"54qsdg1ch89nrb0cb8tre4q2i5\",\r\n IDENTITY_POOL_ID: \"us-east-1:9e96e2ca-1eb4-484f-9ae9-f6c2b592da87\"\r\n }\r\n};\r\n","import './custom.scss';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\nimport './custom.scss';\r\nimport Amplify from \"aws-amplify\";\r\nimport config from \"./config\";\r\n\r\nAmplify.configure({\r\n Auth: {\r\n mandatorySignIn: true,\r\n region: config.cognito.REGION,\r\n userPoolId: config.cognito.USER_POOL_ID,\r\n identityPoolId: config.cognito.IDENTITY_POOL_ID,\r\n userPoolWebClientId: config.cognito.APP_CLIENT_ID\r\n },\r\n API: {\r\n endpoints: [\r\n {\r\n name: \"soap\",\r\n endpoint: config.apiGateway.URL,\r\n region: config.apiGateway.REGION\r\n },\r\n {\r\n name: \"soaptwo\",\r\n endpoint: \" https://uxwrt6in5d.execute-api.us-east-1.amazonaws.com/dev\",\r\n region: \"us-east-1\"\r\n },\r\n {\r\n name: \"soapthree\",\r\n endpoint: \" https://mt3krk1q9c.execute-api.us-east-1.amazonaws.com/dev\",\r\n region: \"us-east-1\"\r\n },\r\n {\r\n name: \"return\",\r\n endpoint: \" https://d3vd813279.execute-api.us-east-1.amazonaws.com/test/\",\r\n region: \"us-east-1\"\r\n },\r\n ]\r\n }\r\n});\r\n\r\n\r\nReactDOM.render(