b) \r\n return -1;\r\n else \r\n return 0;\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n getColumnWidth = (accessor, headerText) => {\r\n const maxWidth = 400\r\n const magicSpacing = 10\r\n const cellLength = Math.max(\r\n (`${accessor}` || '').length,\r\n headerText.length,\r\n )\r\n\r\n return Math.min(maxWidth, cellLength * magicSpacing)\r\n }\r\n\r\n getDataColumns = props => {\r\n\r\n const { programDef, user } = this.props;\r\n\r\n let dataColumns = [\r\n {\r\n Header: '',\r\n accessor: 'link',\r\n Cell: props => (\r\n \r\n Select\r\n \r\n ),\r\n width: 150\r\n\r\n }];\r\n\r\n // GET OUR STANDARD COLUMNS\r\n dataColumns = [\r\n {name: 'Id', accessor: 'id', fieldName: 'id', selectable: true, width: 50},\r\n ...dataColumns, \r\n ...this.getStandardColumns()\r\n ];\r\n\r\n const regButtons = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onAccept({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })} \r\n onRefundClick={e => props.value.onRefund({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n onRejectClick={e => props.value.onReject({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
,\r\n width: 172\r\n };\r\n\r\n if(typeof programDef !== 'undefined' && \r\n programDef !== null && programDef.applicationsRequiresAccept)\r\n dataColumns.push(regButtons);\r\n\r\n const regDeleteButton = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onDelete({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
\r\n };\r\n\r\n dataColumns.push(regDeleteButton);\r\n\r\n return dataColumns;\r\n }\r\n\r\n getFootballOpsDataColumns = props => {\r\n\r\n const { programDef, user } = this.props;\r\n\r\n let dataColumns = [\r\n {\r\n Header: '',\r\n accessor: 'link',\r\n Cell: props => (\r\n \r\n Select\r\n \r\n ),\r\n width: 150\r\n\r\n }];\r\n\r\n // GET OUR STANDARD COLUMNS\r\n dataColumns = [\r\n {name: 'Id', accessor: 'id', fieldName: 'id', selectable: true, width: 50},\r\n ...dataColumns, \r\n ...this.getFootballOpsColumns()\r\n ];\r\n\r\n const regButtons = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onAccept({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })} \r\n onRefundClick={e => props.value.onRefund({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n onRejectClick={e => props.value.onReject({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
,\r\n width: 172\r\n };\r\n\r\n if(typeof programDef !== 'undefined' && \r\n programDef !== null && typeof programDef.applicationsRequiresAccept !== 'undefined' && \r\n programDef.applicationsRequiresAccept !== null && programDef.applicationsRequiresAccept)\r\n dataColumns.push(regButtons);\r\n\r\n const regDeleteButton = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onDelete({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
\r\n };\r\n\r\n dataColumns.push(regDeleteButton);\r\n \r\n return dataColumns;\r\n }\r\n\r\n getLegendDataColumns = props => {\r\n\r\n const { user } = this.props;\r\n \r\n let dataColumns = [{\r\n Header: '',\r\n accessor: 'link',\r\n Cell: props => (),\r\n width: typeof user !== 'undefined' && user.hasLegendsEditRole === true ? 180 : 120\r\n }];\r\n\r\n // GET OUR STANDARD COLUMNS\r\n dataColumns = [\r\n {name: 'Id', accessor: 'id', fieldName: 'id', selectable: true, width: 50},\r\n ...dataColumns, \r\n ...this.getLegendColumns()\r\n ];\r\n\r\n const regButtons = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onAccept({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })} \r\n onRejectClick={e => props.value.onReject({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
,\r\n width: 172\r\n };\r\n\r\n dataColumns.push(regButtons);\r\n\r\n const regOutofBusinessButtons = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onOutofBusiness({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
,\r\n width: 150\r\n };\r\n\r\n dataColumns.push(regOutofBusinessButtons);\r\n\r\n const regDeleteButton = {\r\n Header: \"\",\r\n accessor: \"actions\",\r\n Cell: props => props.value.onDelete({\r\n personId: props.value.id, \r\n eventId: props.value.eventId, \r\n regStatus: props.value.registrationStatus\r\n })}\r\n registrationStatus={props.value.registrationStatus} \r\n user={user}\r\n />
\r\n };\r\n\r\n dataColumns.push(regDeleteButton);\r\n\r\n return dataColumns;\r\n }\r\n\r\n handleDoApproveClicked = event => {\r\n const { \r\n handleChangeRegStatus\r\n } = this.props;\r\n const { selectedPersonId, selectedEventId } = this.state;\r\n\r\n this.handleToggleConfirmApproveModal();\r\n handleChangeRegStatus(selectedEventId, selectedPersonId, RegistrationStatuses.Approved);\r\n }\r\n\r\n handleDoRejectClicked = event => {\r\n const { \r\n handleChangeLegendAppStatus,\r\n handleChangeRegStatus, \r\n programId\r\n } = this.props;\r\n\r\n const { selectedPersonId, selectedEventId } = this.state;\r\n\r\n console.log('Do Reject')\r\n this.handleToggleConfirmRejectModal();\r\n\r\n programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n handleChangeLegendAppStatus(programId, selectedPersonId, RegistrationStatuses.Rejected) :\r\n handleChangeRegStatus(selectedEventId, selectedPersonId, RegistrationStatuses.Rejected);\r\n\r\n // handleChangeRegStatus(selectedEventId, selectedPersonId, RegistrationStatuses.Rejected);\r\n }\r\n\r\n handleDoOutofBusinessClicked = event => {\r\n const { \r\n handleChangeLegendAppStatus,\r\n programId\r\n } = this.props;\r\n const { selectedPersonId, selectedEventId } = this.state;\r\n\r\n this.handleToggleConfirmOutofBusinessModal();\r\n handleChangeLegendAppStatus(programId, selectedPersonId, RegistrationStatuses.OutofBusiness);\r\n }\r\n\r\n handleDoDeleteClicked = event => {\r\n const { programId } = this.props;\r\n const { selectedPersonId } = this.state;\r\n\r\n this.handleToggleConfirmDeleteModal();\r\n if (this.props.handleDelete != null)\r\n {\r\n this.props.handleDelete(programId, selectedPersonId);\r\n }\r\n }\r\n\r\n handleApproveClicked = event => {\r\n const { participants, programId } = this.props;\r\n const { personId } = event;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const myPerson = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n participants.filter(participant => participant.applicationId === personId)[0] :\r\n participants.filter(participant => participant.id === personId)[0];\r\n\r\n \r\n newState.participantName = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n myPerson.applicantName : \r\n `${this.toTitleCase(myPerson.firstName)} ${this.toTitleCase(myPerson.lastName)}`\r\n\r\n newState.selectedPersonId = personId;\r\n newState.selectedEventId = programId;\r\n newState.confirmApproveModal = !prevState.confirmApproveModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleRejectClicked = event => {\r\n const { participants, programId } = this.props;\r\n const { personId } = event;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n const myPerson = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n participants.filter(participant => participant.applicationId === personId)[0] :\r\n participants.filter(participant => participant.id === personId)[0];\r\n \r\n newState.participantName = programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n myPerson.applicantName : \r\n `${this.toTitleCase(myPerson.firstName)} ${this.toTitleCase(myPerson.lastName)}`\r\n\r\n newState.selectedPersonId = personId;\r\n newState.selectedEventId = programId;\r\n newState.confirmRejectModal = !prevState.confirmRejectModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleRefundClicked = event => {\r\n const { \r\n handleListApplicationTransactions, \r\n handleResetParticipantRefundedTx,\r\n participants } = this.props;\r\n const { eventId, personId } = event;\r\n\r\n // GRAB THE APPLICANT'S TRANSACTIONS LIST\r\n handleListApplicationTransactions(eventId, personId)\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n const myPerson = participants.filter(participant => participant.id === personId)[0];\r\n newState.participantName = `${this.toTitleCase(myPerson.firstName)} ${this.toTitleCase(myPerson.lastName)}`\r\n return newState;\r\n }, () => {\r\n handleResetParticipantRefundedTx();\r\n this.handleToggleRefundModal()\r\n })\r\n }\r\n \r\n handleOutofBusinessClicked = event => {\r\n const { participants, programId } = this.props;\r\n const { personId } = event;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const myPerson = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n participants.filter(participant => participant.applicationId === personId)[0] :\r\n participants.filter(participant => participant.id === personId)[0];\r\n\r\n \r\n newState.participantName = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n myPerson.applicantName : \r\n `${this.toTitleCase(myPerson.firstName)} ${this.toTitleCase(myPerson.lastName)}`\r\n\r\n newState.selectedPersonId = personId;\r\n newState.selectedEventId = programId;\r\n newState.confirmOutofBusinessModal = !prevState.confirmOutofBusinessModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleDeleteClicked = event => {\r\n const { participants, programId } = this.props;\r\n const { personId } = event;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const myPerson = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n participants.filter(participant => participant.applicationId === personId)[0] :\r\n participants.filter(participant => participant.id === personId)[0];\r\n\r\n newState.participantName = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n myPerson.applicantName : \r\n `${this.toTitleCase(myPerson.firstName)} ${this.toTitleCase(myPerson.lastName)}`\r\n\r\n newState.selectedPersonId = personId;\r\n newState.selectedEventId = programId;\r\n newState.confirmDeleteModal = !prevState.confirmDeleteModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleDoRefundClicked = event => {\r\n const { \r\n handleIssueRefund, \r\n appTransactions } = this.props;\r\n\r\n const latestTx = appTransactions.filter(at => at.authorizationCode !== \"\" & at.authorizationCode !== \"1\")[0];\r\n const { registrationTransactionId } = latestTx;\r\n\r\n handleIssueRefund(registrationTransactionId, { \r\n transactionId: registrationTransactionId, \r\n creditCardLastFour: this.state.creditCardLastFour \r\n })\r\n\r\n // close the modal \r\n this.handleToggleRefundModal();\r\n }\r\n\r\n handleToggleConfirmApproveModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmApproveModal: !prevState.confirmApproveModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleConfirmRejectModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmRejectModal: !prevState.confirmRejectModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleConfirmOutofBusinessModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmOutofBusinessModal: !prevState.confirmOutofBusinessModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleConfirmDeleteModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmDeleteModal: !prevState.confirmDeleteModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleRefundModal = () => {\r\n this.setState(prevState => { return { editRefundModal: !prevState.editRefundModal, creditCardLastFour: '' }});\r\n }\r\n\r\n toTitleCase = str => {\r\n return typeof str === 'undefined' ? '' : str.replace(\r\n /\\w\\S*/g,\r\n function(txt) {\r\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\r\n }\r\n );\r\n }\r\n\r\n hasValue = (source,value) => {\r\n return source.filter(s => s === value).length > 0;\r\n }\r\n\r\n render() {\r\n\r\n const { \r\n approveApplicationResponseLoading,\r\n eventId, \r\n events, \r\n loading,\r\n participants,\r\n programId,\r\n refundCreditCardResponseLoading,\r\n refundCreditCardTxResponse,\r\n selectedColumns\r\n } = this.props;\r\n\r\n console.log(participants);\r\n\r\n if(typeof events === 'undefined' || events === null || events.length === 0) return null;\r\n\r\n const savedEvent = events.filter(e => e.eventId === programId)[0];\r\n const eventName = typeof savedEvent === 'undefined' ? '' : savedEvent.eventName;\r\n const eventFee = typeof savedEvent === 'undefined' ? '' : savedEvent.programFee;\r\n const eventYear = typeof savedEvent === 'undefined' ? '' : savedEvent.eventYear;\r\n\r\n const standardColumnsList = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n legendsColumnDefs : \r\n //programId === \r\n // (BILL_WALSH_DIVERSITY_COACHING_FELLOWSHIP || NUNN_WOOTEN_SCOUTING_FELLOWSHIP) ? \r\n // bwnwColumnDefs \r\n // :\r\n programId === FOOTBALLOPSSUBMISSION_ID ?\r\n footballOpsColumnDefs.filter(scd => this.hasValue(selectedColumns, scd.accessor)) : \r\n standardColumnDefs.filter(scd => this.hasValue(selectedColumns, scd.accessor));\r\n\r\n const participantsList = participants.map((participant,pKey) => {\r\n let { registrationStatus, statusChangedBy } = participant;\r\n registrationStatus = registrationStatus === null ? '---' : registrationStatus.toUpperCase();\r\n statusChangedBy = statusChangedBy == 'Applicant' ? '' : statusChangedBy;\r\n let participantObject = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n {\r\n id: pKey + 1,\r\n playerId: participant.playerId,\r\n link: {\r\n eventId,\r\n id: participant.applicationId,\r\n name: participant.applicantName\r\n },\r\n submittedOn: moment(participant.applicationDate).format(\"MM/DD/YYYY\"),\r\n registrationStatus,\r\n actions: {\r\n eventId,\r\n id: participant.applicationId,\r\n registrationStatus,\r\n onAccept: this.handleApproveClicked,\r\n onReject: this.handleRejectClicked,\r\n onRefund: this.handleRefundClicked,\r\n onOutofBusiness: this.handleOutofBusinessClicked,\r\n onDelete: this.handleDeleteClicked\r\n }\r\n } \r\n // : (BILL_WALSH_DIVERSITY_COACHING_FELLOWSHIP || NUNN_WOOTEN_SCOUTING_FELLOWSHIP) ? \r\n // {\r\n // id: pKey + 1,\r\n // playerId: participant.playerId,\r\n // link: {\r\n // eventId,\r\n // id: participant.id,\r\n // name: `${participant.lastName}, ${participant.firstName}`\r\n // },\r\n // firstName: participant.firstName,\r\n // lastName: participant.lastName,\r\n // currentJobTitle: participant.currentJobTitle,\r\n // organization: participant.organization,\r\n // submittedOn: moment(participant.registrationDate).format(\"MM/DD/YYYY\"),\r\n // registrationStatus,\r\n // actions: {\r\n // eventId,\r\n // id: participant.id,\r\n // registrationStatus,\r\n // onAccept: this.handleApproveClicked,\r\n // onReject: this.handleRejectClicked,\r\n // onRefund: this.handleRefundClicked\r\n // }\r\n // }\r\n :\r\n programId === FOOTBALLOPSSUBMISSION_ID ? \r\n {\r\n id: pKey + 1,\r\n link: {\r\n eventId,\r\n id: participant.id,\r\n name: `${participant.lastName}, ${participant.firstName}`\r\n },\r\n firstName: participant.firstName,\r\n lastName: participant.lastName,\r\n phone: participant.primaryPhone,\r\n cityState: `${participant.city}, ${participant.postalCode}`,\r\n submittedOn: moment(participant.registrationDate).format(\"MM/DD/YYYY\"),\r\n registrationStatus,\r\n statusChangedBy,\r\n actions: {\r\n eventId,\r\n id: participant.id,\r\n registrationStatus,\r\n onAccept: this.handleApproveClicked,\r\n onReject: this.handleRejectClicked,\r\n onRefund: this.handleRefundClicked,\r\n onDelete: this.handleDeleteClicked\r\n }\r\n }\r\n :\r\n {\r\n id: pKey + 1,\r\n playerId: participant.playerId,\r\n link: {\r\n eventId,\r\n id: participant.id,\r\n name: `${participant.lastName}, ${participant.firstName}`\r\n },\r\n firstName: participant.firstName,\r\n lastName: participant.lastName,\r\n phone: participant.primaryPhone,\r\n cityState: `${participant.city}, ${participant.stateCode}`,\r\n submittedOn: moment(participant.registrationDate).format(\"MM/DD/YYYY\"),\r\n registrationStatus,\r\n statusChangedBy,\r\n actions: {\r\n eventId,\r\n id: participant.id,\r\n registrationStatus,\r\n onAccept: this.handleApproveClicked,\r\n onReject: this.handleRejectClicked,\r\n onRefund: this.handleRefundClicked,\r\n onDelete: this.handleDeleteClicked\r\n }\r\n };\r\n\r\n for(let col=0;col : \r\n participantsList == null || participantsList.length === 0 ?\r\n No Participants
: \r\n typeof loading === 'undefined' || loading===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 {`${eventName} Participants`} | \r\n Total Submissions: | \r\n {`${participantsList.length}`} | \r\n Total Approved: | \r\n {`${participantsList.filter(pl => pl.registrationStatus === 'APPROVED' || pl.registrationStatus === 'Approved').length}`} | \r\n
\r\n \r\n
\r\n
\r\n {\r\n this.setState({ sortOptions: val }) \r\n }\r\n }\r\n defaultSorting={[\r\n {\r\n id: 'applicationDate',\r\n desc: true\r\n }\r\n ]\r\n }\r\n style={{width: '1600px'}}\r\n />\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n formHasChanged: () => dispatch(authActions.formHasChanged()), \r\n handleChangeRegStatus: (eventId, personId, statusId) => \r\n dispatch(eventActions.updateEventApplicationStatus(eventId, personId, statusId)),\r\n handleChangeLegendAppStatus: (eventId, personId, statusId) => dispatch(legendsActions.updateLegendApplicationStatus(eventId, personId, statusId)),\r\n handleGetEventForm: eventId => dispatch(formsActions.getFormDefinition(eventId)),\r\n handleIssueRefund: (eventId, participantId) => \r\n dispatch(eventActions.postCreditCardRefund(eventId, participantId)),\r\n handleListApplicationTransactions: (eventId, personId) => \r\n dispatch(eventActions.listApplicationTransactions(eventId, personId)),\r\n handleListEventApplications: eventId => \r\n dispatch(eventActions.listEventParticipants(eventId)),\r\n handleResetParticipantApprovedTx: () => \r\n dispatch(eventActions.resetParticipantApprovedTX()), \r\n handleResetParticipantRefundedTx: () => \r\n dispatch(eventActions.resetParticipantRefundedTX()),\r\n handleUpdateSelectParticipantColumn: column => \r\n dispatch(formsActions.updateSelectParticipantColumn(column))\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n appTransactions,\r\n appTransactionsLoading, \r\n eventId, \r\n events, \r\n eventTeam,\r\n eventYear,\r\n participants, \r\n participantsLoading,\r\n refundCreditCardResponseLoading,\r\n approveApplicationResponseLoading,\r\n refundCreditCardTxResponse\r\n } = state.eventParticipants;\r\n \r\n const { formDef, selectedColumns } = state.forms\r\n\r\n const { user } = state.auth;\r\n\r\n const {\r\n legendApplicationLoading, \r\n legendApplications\r\n } = state.legendApplication\r\n\r\n return {\r\n appTransactions,\r\n appTransactionsLoading, \r\n eventId,\r\n events,\r\n eventTeam,\r\n eventYear, \r\n legendApplications,\r\n loading: participantsLoading || legendApplicationLoading, \r\n participants: [...participants, ...legendApplications],\r\n programDef: formDef,\r\n refundCreditCardResponseLoading,\r\n approveApplicationResponseLoading,\r\n refundCreditCardTxResponse,\r\n selectedColumns,\r\n user\r\n }\r\n}\r\n \r\nexport default connect(mapStateToProps,mapDispatchToProps)(DataTable);\r\n\r\nconst GetStatusButtons = props => {\r\n\r\n const { user } = props;\r\n\r\n switch(props.registrationStatus) {\r\n case 'APPROVED':\r\n return \r\n case 'PAID':\r\n return \r\n \r\n \r\n case 'PENDING':\r\n case 'SUBMITTED':\r\n return typeof user !== 'undefined' && (user.isAdmin || \r\n user.hasLegendsAdminRole || user.hasLegendsApproverRole || \r\n user.hasNFLProgramsAdminRole || user.hasNFLProgramsApproverRole) ? (\r\n \r\n \r\n Deny\r\n \r\n \r\n Approve\r\n \r\n \r\n ) : null;\r\n default:\r\n return null\r\n }\r\n}\r\n\r\nconst GetOutofBusinessButtons = props => {\r\n\r\n const { user } = props;\r\n\r\n switch(props.registrationStatus) {\r\n case 'APPROVED':\r\n return typeof user !== 'undefined' && (user.isAdmin || \r\n user.hasLegendsAdminRole || user.hasLegendsApproverRole || \r\n user.hasNFLProgramsAdminRole || user.hasNFLProgramsApproverRole) ? (\r\n \r\n \r\n Out of Business\r\n \r\n \r\n ) : null;\r\n default:\r\n return null\r\n }\r\n}\r\n\r\nconst GetDeleteButton = props => {\r\n\r\n const { user } = props;\r\n\r\n switch(props.registrationStatus) {\r\n case 'PENDING':\r\n case 'SUBMITTED':\r\n return typeof user !== 'undefined' && (user.isAdmin || \r\n user.hasLegendsAdminRole || user.hasNFLProgramsAdminRole) ? (\r\n \r\n \r\n Delete\r\n \r\n \r\n ) : null;\r\n default:\r\n return null\r\n }\r\n}\r\n\r\nconst GetLinks = props => {\r\n const { user, id } = props;\r\n \r\n return typeof user !== 'undefined' && user.hasLegendsEditRole === false ? (\r\n \r\n \r\n Select\r\n \r\n ) \r\n :\r\n ()\r\n}","import _ from 'lodash';\r\nimport React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { formsActions } from '../../../_actions';\r\n\r\nimport { Colxx } from '../../CustomBootstrap';\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter, \r\n Row \r\n} from \"reactstrap\";\r\n\r\nconst standardColumnDefs = [\r\n {name: 'Email', accessor: 'email', fieldName: 'email', selectable: true},\r\n {name: 'Phone Number', accessor: 'phone', fieldName: 'primaryPhone', selectable: true},\r\n {name: 'Location', accessor: 'cityState', fieldName: 'city', selectable: true},\r\n {name: 'DOB', accessor: 'dob', fieldName: 'birthDate', fieldType: 'date', selectable: true},\r\n {name: 'Submitted On', accessor: 'submittedOn', fieldName: 'registrationDate', fieldType: 'date', selectable: false},\r\n {name: 'Status', accessor: 'registrationStatus', fieldName: 'registrationStatus', selectable: false},\r\n {name: 'Approved By', accessor: 'approvedBy', fieldName: 'statusChangedBy', selectable: true},\r\n {name: 'Playing History', accessor: 'playingHistory', fieldName: 'playingHistory', selectable: true}\r\n];\r\n\r\nclass EventColumnsList extends Component {\r\n state = {\r\n selectedColumns: []\r\n }\r\n\r\n componentDidMount() {\r\n const { selectedColumns } = this.props;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedColumns = selectedColumns;\r\n return newState;\r\n })\r\n }\r\n\r\n handleColumnsSelectedNew = event => {\r\n\r\n var column = event.target.value;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState); \r\n const gotColumnName = newState.selectedColumns.filter(c => c === column).length > 0;\r\n\r\n if(!gotColumnName)\r\n newState.selectedColumns.push(column);\r\n else {\r\n newState.selectedColumns = newState.selectedColumns.filter(c => c !== column)\r\n }\r\n \r\n return newState;\r\n })\r\n }\r\n\r\n toggle = () => {\r\n this.props.toggle(this.state.selectedColumns); \r\n }\r\n\r\n render() {\r\n \r\n const { selectedColumns } = this.props;\r\n // const { selectedColumns } = this.state;\r\n\r\n const allQuestions = [\r\n ...standardColumnDefs.filter(sc => sc.selectable).map((column, cKey) => {\r\n return { questionId: column.accessor, questionText: column.name };\r\n })\r\n ];\r\n\r\n return (\r\n\r\n \r\n \r\n Please Select Columns to Display
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleUpdateSelectParticipantColumn: column => \r\n dispatch(formsActions.updateSelectParticipantColumn(column)) \r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n\r\n const { \r\n eventId, \r\n events, \r\n eventQuestions,\r\n } = state.eventParticipants;\r\n\r\n const { selectedColumns } = state.forms;\r\n\r\n return {\r\n eventId, \r\n events, \r\n eventQuestions,\r\n selectedColumns\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EventColumnsList);\r\n","import _ from 'lodash';\r\nimport React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { formsActions } from '../../../_actions';\r\n\r\nimport { Colxx } from '../../CustomBootstrap';\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter, \r\n Row \r\n} from \"reactstrap\";\r\n\r\nclass ResumeDownload extends Component {\r\n state = {\r\n applicantList: [],\r\n selectedResumes: [],\r\n selectAll: false\r\n }\r\n\r\n componentDidMount() {\r\n const { selectedApplicantsResumes, participants } = this.props;\r\n\r\n //if (typeof participants !== 'undefined' && participants !== null && participants.length > 0)\r\n //{\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedResumes = selectedApplicantsResumes;\r\n newState.applicantList = participants.map((applicant,pKey) => {\r\n let applicantObject = {id: applicant.id , firstName: applicant.firstName, lastName: applicant.lastName, applicantResume: applicant.applicantResume, selected: false}; \r\n return applicantObject;\r\n });\r\n return newState;\r\n });\r\n //}\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (prevState.applicantList !== this.state.applicantList && this.state.applicantList.length !== this.props.participants.length) {\r\n const { selectedApplicantsResumes, participants } = this.props;\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedResumes = selectedApplicantsResumes;\r\n newState.applicantList = participants.map((applicant,pKey) => {\r\n let applicantObject = {id: applicant.id , firstName: applicant.firstName, lastName: applicant.lastName, applicantResume: applicant.applicantResume, selected: false}; \r\n return applicantObject;\r\n });\r\n return newState;\r\n });\r\n }\r\n }\r\n\r\n handleSelectAll(event) {\r\n let tempList = this.state.applicantList;\r\n const isChecked = event.target.checked;\r\n // Check/Uncheck all items\r\n tempList.map((applicant) => (applicant.selected = isChecked));\r\n\r\n // Update State\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectAll = isChecked;\r\n newState.applicantList = tempList;\r\n newState.selectedResumes = this.state.applicantList.filter((e) => e.selected);\r\n return newState;\r\n });\r\n }\r\n\r\n handleOnItemCheck(e, item) {\r\n let tempList = this.state.applicantList;\r\n const isChecked = e.target.checked;\r\n tempList.map((applicant) => {\r\n if (applicant.id === item.id) {\r\n applicant.selected = isChecked;\r\n } \r\n\r\n return applicant;\r\n });\r\n\r\n // To Control selecAll Checkbox State\r\n const totalItems = this.state.applicantList.length;\r\n const totalCheckedItems = tempList.filter((e) => e.selected).length;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectAll = totalItems === totalCheckedItems;\r\n newState.applicantList = tempList;\r\n newState.selectedResumes = this.state.applicantList.filter((e) => e.selected);\r\n return newState;\r\n });\r\n }\r\n\r\n handleDownloadClicked = () => {\r\n this.props.handleDownloadClicked(this.state.selectedResumes); \r\n }\r\n\r\n render() {\r\n console.log(this.props.participants);\r\n console.log(this.state.applicantList);\r\n return ( \r\n\r\n \r\n \r\n Please Select Applicant to Download Resume
\r\n \r\n \r\n \r\n \r\n \r\n | \r\n this.handleSelectAll(e)}\r\n />\r\n | \r\n First Name | \r\n Last Name | \r\n
\r\n \r\n \r\n {\r\n this.state.applicantList.map((prgparticipant, iKey) => {\r\n return (\r\n \r\n | \r\n this.handleOnItemCheck(e, prgparticipant)}\r\n />\r\n | \r\n {prgparticipant.firstName} | \r\n {prgparticipant.lastName} | \r\n
\r\n );\r\n })\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n\r\n const { \r\n eventId, \r\n events,\r\n participants\r\n } = state.eventParticipants;\r\n\r\n return {\r\n eventId, \r\n events,\r\n participants\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n null)(ResumeDownload);\r\n","import _ from 'lodash';\r\nimport React, { Component } from 'react';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n Label,\r\n Modal,\r\n ModalHeader, \r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass ConfirmExportSent extends Component {\r\n state = { \r\n confirmationBox: '',\r\n formIsValid: false\r\n }\r\n\r\n getBoldedName = name => {name}\r\n\r\n render() {\r\n const { \r\n isOpen, \r\n programName, \r\n toggle \r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n {`${programName} Submissions Export`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\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 ConfirmExportSent;\r\n","import React, { Component, Fragment } from 'react';\r\nimport axiosD1 from 'axios';\r\nimport axios from '../../axios-pea';\r\nimport { getAxiosHeaders, getAxiosHeadersForZip } from '../../_helpers';\r\nimport { DELETE_EVENT_APP } from '../../endpoints/ServiceEndpoints';\r\nimport { connect } from 'react-redux';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { RegistrationStatuses } from '../../_constants';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n FormGroup,\r\n Form\r\n } from \"reactstrap\";\r\n\r\nimport { \r\n authActions, \r\n eventActions, \r\n formsActions,\r\n legendsActions \r\n} from '../../_actions';\r\n\r\nimport moment from 'moment';\r\nimport DataTable from '../DataTable/DataTable';\r\nimport DatePicker from \"react-datepicker\";\r\nimport EventColumnsList from './EventColumnsList/EventColumnsList';\r\nimport ResumeDownload from './ResumeDownload/ResumeDownload';\r\nimport Spinner from '../Spinner/Spinner';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport * as serviceEndpoints from '../../endpoints/ServiceEndpoints';\r\nimport appRoutes from 'appRoutes';\r\nimport data from '../../data/TeamData';\r\nimport usStates from '../../data/USStates';\r\nimport ConfirmExportSent from './ConfirmExportSent/ConfirmExportSent';\r\nimport Select from 'react-select';\r\nimport JSZip from 'jszip';\r\nimport { saveAs } from 'file-saver';\r\nimport JSZipUtils from 'jszip-utils'\r\n\r\nconst programYears = [\r\n {key: 'SELECT',\tdescription: 'Select Event Year'},\r\n {key: '2025',\tdescription: '2025-2026'},\r\n {key: '2024',\tdescription: '2024-2025'},\r\n {key: '2023',\tdescription: '2023-2024'},\r\n {key: '2022',\tdescription: '2022-2023'},\r\n {key: '2021',\tdescription: '2021-2022'},\r\n {key: '2020',\tdescription: '2020-2021'},\r\n {key: '2019', description: '2019-2020'},\r\n {key: 'all', description: 'All'}\r\n];\r\n\r\nconst countryOptions = [\r\n {key: 'SELECT',\tdescription: 'SELECT'},\r\n {key: 'United States of America',\tdescription: 'United States of America'},\r\n {key: 'OTHER',\tdescription: 'Other'}\r\n]\r\n\r\nconst teamData = [{\r\n clubKey: 0,\t\r\n clubCode: 'NP',\t\r\n clubCity: '---',\r\n clubName: 'No Preference'\r\n}, ...data];\r\n\r\nconst BILL_WALSH_ID = '27EE7E9D-7563-4A70-865A-44844F7B7F9F';\r\nconst LEGENDS_BUSINESS_DIRECTORY_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96';\r\nconst NUNN_WOOTEN_ID = '169412AF-6899-4CE2-890F-DEC25D30D0BF';\r\nconst FOOTBALLOPS_SUBMISSION_ID = '31D531E9-1094-424C-9665-597A6B2F018B';\r\n\r\nconst disableAnchor = {\r\n pointerEvents: 'none',\r\n cursor: 'default'\r\n}\r\n\r\nclass EventParticipants extends Component {\r\n state = {\r\n clearSearchDisabled: true,\r\n nameSearch: '',\r\n reportExported:false,\r\n selectColumnsModal: false,\r\n fromSearchDate: null,\r\n toSearchDate: null,\r\n confirmExportSent: false,\r\n selectedOptions: [],\r\n url: \"\",\r\n selectResumeDownloadModal: false,\r\n downloadingZip: false\r\n }\r\n\r\n handleToggleConfirmExportSent = () => {\r\n\r\n this.setState(prevState => { \r\n return { confirmExportSent: !prevState.confirmExportSent }\r\n });\r\n }\r\n\r\n getQueryStringValue = param => {\r\n let qs = this.props.location.search;\r\n \r\n if(qs.length === 0) return '';\r\n\r\n // GRAB EVERYTHING AFTER THE \"?\"\r\n qs = qs.substring(qs.indexOf('?') + 1);\r\n let arrQs = qs.split('&');\r\n for(let count=0; count<=arrQs.length; count++){\r\n if(arrQs[count].indexOf(param) > -1)\r\n return arrQs[count].split('=')[1];\r\n }\r\n\r\n return '';\r\n }\r\n\r\n componentDidMount() {\r\n const { programId } = this.props.match.params;\r\n const { \r\n events,\r\n eventTeam, \r\n filterName,\r\n fromSearchDate,\r\n listEvents, \r\n handleListAllLegendsApplications,\r\n handleListEventApplications,\r\n selectedCountry,\r\n selectedState,\r\n toSearchDate,\r\n footballAreas,\r\n listFootballAreas\r\n } = this.props;\r\n\r\n const { searchFootballAreas } = this.state;\r\n \r\n if(typeof events === 'undefined' || events === null) {\r\n listEvents();\r\n }\r\n\r\n const eventObj = typeof events === 'undefined' || events === null ? null : events.filter(event => event.eventId === programId.toLowerCase())[0];\r\n\r\n const team = typeof eventTeam === 'undefined' ? 'NP' : eventTeam;\r\n let year = typeof this.state.eventYear === 'undefined' || this.state.eventYear === null ? 'NP' : this.state.eventYear;\r\n const searchName = typeof filterName === 'undefined' ? 'NP' : filterName;\r\n\r\n const country = typeof selectedCountry === 'undefined' ? 'NP' : selectedCountry;\r\n const usState = typeof selectedState === 'undefined' ? 'NP' : selectedState;\r\n\r\n const searchFromDate = typeof fromSearchDate === 'undefined' ? 'NP' : fromSearchDate;\r\n const searchToDate = typeof toSearchDate === 'undefined' ? 'NP' : toSearchDate;\r\n \r\n if(programId.toUpperCase() === FOOTBALLOPS_SUBMISSION_ID && (typeof footballAreas === 'undefined' || footballAreas === null || footballAreas.length <= 0))\r\n listFootballAreas(programId);\r\n\r\n if(programId.toUpperCase() === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications(searchFromDate,searchToDate, searchName);\r\n } else { \r\n if (eventObj != null && (typeof this.state.eventYear === 'undefined' || this.state.eventYear === null))\r\n {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.eventYear = eventObj.eventYear;\r\n return newState; }); \r\n\r\n // year = typeof this.state.eventYear === 'undefined' || this.state.eventYear === null ? 'NP' : this.state.eventYear;\r\n year = eventObj.eventYear;\r\n handleListEventApplications(programId, year, team, searchFootballAreas, searchName);\r\n } \r\n else\r\n {\r\n handleListEventApplications(programId, year, team, searchFootballAreas, searchName);\r\n }\r\n }\r\n }\r\n\r\n getEventData = (programId) => {\r\n let eObj = null;\r\n axios.get(\r\n serviceEndpoints.LIST_EVENTS(),\r\n getAxiosHeaders()).then((resp) => { \r\n const eventList = resp.data;\r\n eObj = eventList.filter(event => event.eventId === programId.toLowerCase())[0];\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.eventYear = eObj.eventYear;\r\n return newState; });\r\n }).catch(error => { \r\n eObj = null;\r\n });\r\n return eObj;\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n const { programId } = this.props.match.params; \r\n const { \r\n eventTeam, \r\n filterName,\r\n fromSearchDate,\r\n handleListAllLegendsApplications,\r\n handleListEventApplications,\r\n selectedCountry,\r\n selectedState,\r\n toSearchDate\r\n } = this.props;\r\n\r\n const { searchFootballAreas, eventYear } = this.state;\r\n \r\n if(programId.toUpperCase() === LEGENDS_BUSINESS_DIRECTORY_ID && (this.props.location.action === 'POP' || prevProps.fromSearchDate !== fromSearchDate || prevProps.toSearchDate !== toSearchDate || prevProps.filterName !== filterName))\r\n handleListAllLegendsApplications(fromSearchDate, toSearchDate, filterName)\r\n \r\n if(programId.toUpperCase() !== LEGENDS_BUSINESS_DIRECTORY_ID && (this.props.location.action === 'POP' || prevState.eventYear !== eventYear || prevProps.eventTeam !== eventTeam || prevState.searchFootballAreas !== searchFootballAreas || prevProps.filterName !== filterName))\r\n {\r\n handleListEventApplications(programId, eventYear, eventTeam, searchFootballAreas, filterName);\r\n } \r\n }\r\n\r\n handleRefundClick = event => {\r\n const { programId, id } = this.props.match.params;\r\n }\r\n\r\n handleApproveClicked = event => {\r\n const { programId, id } = this.props.match.params;\r\n const { handleChangeRegStatus, handleChangeLegendAppStatus } = this.props;\r\n \r\n\r\n programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n handleChangeLegendAppStatus(programId, id, RegistrationStatuses.Approved) :\r\n handleChangeRegStatus(programId, id, RegistrationStatuses.Approved);\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleRejectClicked = event => {\r\n const { programId, id } = this.props.match.params;\r\n const { handleChangeRegStatus, handleChangeLegendAppStatus } = this.props;\r\n \r\n\r\n programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n handleChangeLegendAppStatus(programId, id, RegistrationStatuses.Rejected) :\r\n handleChangeRegStatus(programId, id, RegistrationStatuses.Rejected);\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleExportClicked = () => {\r\n const { programId } = this.props.match.params;\r\n\r\n const fileName = `pe_export.csv`;\r\n const { eventYear } = this.state;\r\n //const { eventYear } = this.props;\r\n\r\n const headers = getAxiosHeaders()\r\n headers.responseType = 'blob'\r\n\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n newState.confirmExportSent = false;\r\n return newState;\r\n })\r\n\r\n axiosD1.get(`${appRoutes.apiUrl}${serviceEndpoints.EXPORT_EVENT_PARTICIPANTS(programId, eventYear)}`, headers)\r\n .then(resp=>{\r\n var blobURL = window.URL.createObjectURL(resp.data);\r\n var tempLink = document.createElement('a');\r\n tempLink.style.display = 'none';\r\n tempLink.href = blobURL;\r\n tempLink.setAttribute('download', fileName); \r\n tempLink.click();\r\n });\r\n\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n newState.confirmExportSent = true;\r\n return newState;\r\n })\r\n }\r\n \r\n handleDateChanged = (date, dateString, id) => {\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n newState[id] = moment(date).format(\"MM/DD/YYYY\");\r\n return newState;\r\n }); \r\n }\r\n\r\n getSearchInput = event => {\r\n const { id, name, value } = event.target;\r\n const myKey = typeof id === 'undefined' ? name : id;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({},prevState);\r\n newState[id] = value;\r\n return newState\r\n });\r\n }\r\n\r\n resolveFieldValue = field => {\r\n if(typeof this.state[field] === 'undefined' || this.state[field] === null) return '';\r\n return new Date(this.state[field]);\r\n }\r\n\r\n handleEventYearFilterChanged = event => {\r\n const { programId } = this.props.match.params;\r\n const { eventTeam, filterName, handleListEventApplications } = this.props;\r\n const { value } = event.target;\r\n\r\n const { searchFootballAreas } = this.state;\r\n \r\n handleListEventApplications(programId, value, eventTeam, searchFootballAreas, filterName);\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.eventYear = value;\r\n newState.nameSearch = '';\r\n newState.searchFootballAreas = 'NP';\r\n newState.selectedOptions = []; \r\n return newState; });\r\n }\r\n\r\n handleSearchByName = event => {\r\n const { programId } = this.props.match.params;\r\n const { \r\n eventTeam, \r\n handleListEventApplications,\r\n handleListAllLegendsApplications,\r\n searchFromDate,\r\n searchToDate\r\n } = this.props; \r\n \r\n const { eventYear, nameSearch, searchFootballAreas } = this.state;\r\n \r\n if(programId.toUpperCase() === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications(searchFromDate,searchToDate, nameSearch);\r\n } else {\r\n handleListEventApplications(programId, eventYear, eventTeam, searchFootballAreas, nameSearch);\r\n }\r\n }\r\n\r\n handleResetSearchByName = event => {\r\n const { programId } = this.props.match.params;\r\n const { \r\n eventTeam, \r\n handleListEventApplications,\r\n handleListAllLegendsApplications,\r\n searchFromDate,\r\n searchToDate\r\n } = this.props;\r\n\r\n const { eventYear } = this.state;\r\n\r\n if(programId.toUpperCase() === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications(searchFromDate,searchToDate, 'NP');\r\n } else {\r\n handleListEventApplications(programId, eventYear, eventTeam, 'NP', 'NP');\r\n }\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.nameSearch = '';\r\n newState.searchFootballAreas = 'NP';\r\n newState.selectedOptions = []; \r\n return newState\r\n })\r\n }\r\n\r\n handleSearchByDate = event => {\r\n const { handleListAllLegendsApplications } = this.props;\r\n \r\n const {fromSearchDate, toSearchDate, filterName} = this.state;\r\n handleListAllLegendsApplications(fromSearchDate, toSearchDate, filterName);\r\n }\r\n\r\n handleCountryFilterChanged = event => {\r\n const { selectedState, handleListAllLegendsApplications, filterName } = this.props;\r\n const { value } = event.target;\r\n\r\n handleListAllLegendsApplications(value, selectedState, filterName);\r\n }\r\n\r\n handleStatesFilterChanged = event => {\r\n const { selectedCountry, handleListAllLegendsApplications } = this.props;\r\n const { value } = event.target;\r\n\r\n handleListAllLegendsApplications(selectedCountry, value);\r\n }\r\n\r\n handleEventTeamFilterChanged = event => {\r\n const { programId } = this.props.match.params;\r\n const { filterName, handleListEventApplications } = this.props; \r\n const { value } = event.target;\r\n const { eventYear } = this.state;\r\n\r\n handleListEventApplications(programId, eventYear, value, 'NP', filterName);\r\n }\r\n \r\n refreshParticipantsList = () => {\r\n const { programId } = this.props.match.params;\r\n const {\r\n eventTeam, \r\n filterName,\r\n fromSearchDate, \r\n toSearchDate,\r\n selectedFootballAreas} = this.props;\r\n \r\n const { \r\n handleListAllLegendsApplications,\r\n handleListEventApplications,\r\n handleResetParticipantRefunded,\r\n handleResetParticipantRefundedTx \r\n } = this.props;\r\n\r\n const team = typeof eventTeam === 'undefined' ? 'NP' : eventTeam;\r\n let year = typeof this.state.eventYear === 'undefined' || this.state.eventYear === null ? 'NP' : this.state.eventYear;\r\n\r\n const searchName = typeof filterName === 'undefined' ? 'NP' : filterName;\r\n const searchFromDate = typeof fromSearchDate === 'undefined' ? 'NP' : fromSearchDate;\r\n const searchToDate = typeof toSearchDate === 'undefined' ? 'NP' : toSearchDate;\r\n\r\n handleResetParticipantRefunded();\r\n handleResetParticipantRefundedTx();\r\n\r\n if(programId.toUpperCase() === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications(searchFromDate,searchToDate, searchName);\r\n } else if (programId.toUpperCase() === FOOTBALLOPS_SUBMISSION_ID) {\r\n handleListEventApplications(programId, year, team, selectedFootballAreas, searchName);\r\n } else {\r\n handleListEventApplications(programId, year, team, 'NP', searchName);\r\n }\r\n\r\n return programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n :\r\n \r\n }\r\n\r\n handleSelectColumnsClicked = () => {\r\n this.handleToggleColumnsModal();\r\n }\r\n\r\n handleToggleColumnsModal = columns => {\r\n const {eventTeam } = this.props;\r\n const { selectedFootballAreas, eventYear } = this.state;\r\n this.setState(prevState => { \r\n return { \r\n selectColumnsModal: !prevState.selectColumnsModal \r\n }\r\n }, \r\n () => { \r\n if(!this.state.selectColumnsModal){\r\n const { programId } = this.props.match.params;\r\n this.props.handleUpdateSelectParticipantColumn(columns);\r\n this.props.handleListEventApplications(programId, eventYear, eventTeam, selectedFootballAreas, 'NP');\r\n }\r\n },() => this.props.formHasChanged()); \r\n }\r\n \r\n handleDoDownloadClicked = resumes => {\r\n const { programId } = this.props.match.params;\r\n const { events } = this.props;\r\n\r\n console.log(resumes);\r\n\r\n this.setState(prevState => { return { downloadingZip: true } });\r\n\r\n let headers = getAxiosHeadersForZip();\r\n \r\n let eventName = \"\"; \r\n \r\n console.log(this.state.eventYear);\r\n eventName = programId.toUpperCase() === BILL_WALSH_ID ? 'BillWalsh' : programId.toUpperCase() === NUNN_WOOTEN_ID ? 'Nunn-Wooten' : '';\r\n let fileName = this.state.eventYear + \"_\" + eventName + \"_Resumes_\" + moment().format('YYYY_MM_DD_hh_mm_ss') + \".zip\";\r\n console.log(fileName);\r\n // const urls = resumes.filter(m => m.applicantResume !== '').map((resume, ikey) => {\r\n // return window.location.origin.toString() + '/nflprograms/repository/uploads/' + resume.applicantResume;\r\n // });\r\n\r\n // const zip = new JSZip();\r\n // let isError = false;\r\n // urls.forEach((url)=> {\r\n // isError = false;\r\n // const blobPromise = fetch(url).then(function (response) { \r\n // console.log({response}) \r\n // if (response.status === 200 || response.status === 0) {\r\n // return Promise.resolve(response.blob());\r\n // } \r\n // else \r\n // {\r\n // isError = true;\r\n // console.log(response.statusText);\r\n // return Promise.reject(new Error(response.statusText));\r\n // }\r\n // }); \r\n // if (!isError) {\r\n // const name = url.substring(url.lastIndexOf('/') + 1);\r\n // zip.file(name, blobPromise);\r\n // }\r\n // return blobPromise;\r\n //});\r\n\r\n // zip.generateAsync({type:\"blob\"})\r\n // .then(blob => { \r\n // saveAs(blob, fileName); \r\n // alert(\"Resumes downloaded successfully. \" + fileName);\r\n // })\r\n // .catch(e => { \r\n // console.log(e); \r\n // alert(e); \r\n // });\r\n const axiosConfig = {\r\n\r\n responseType: 'arraybuffer',\r\n headers\r\n };\r\n\r\n axios.post(\r\n serviceEndpoints.DOWNLOAD_APPLICANT_RESUMES_ZIP(programId),\r\n resumes,\r\n axiosConfig).then((resp) => {\r\n console.log(resp.request.response);\r\n var blobURL = window.URL.createObjectURL(new Blob([resp.request.response],{\r\n type:'application/zip'\r\n }));\r\n var tempLink = document.createElement('a');\r\n tempLink.style.display = 'none';\r\n tempLink.href = blobURL;\r\n tempLink.setAttribute('download', fileName); \r\n document.body.appendChild(tempLink);\r\n tempLink.click();\r\n tempLink.parentNode.removeChild(tempLink);\r\n this.setState(prevState => { return { downloadingZip: false } });\r\n alert(\"Resume(s) downloaded successfully. \" + fileName);\r\n }).catch(error => { \r\n this.setState(prevState => { return { downloadingZip: false } });\r\n alert(\"Error downloading resume(s).
\" + error.request !== null && error.request.responseText !== null && error.request.responseText !== '' ? error.request.responseText : error.message !== null && error.message !== '' ? error.message : error.response !== null ? error.response.request.response : \"Unknown Error\");\r\n });\r\n\r\n this.handleToggleResumeDownloadModal();\r\n }\r\n\r\n handleToggleResumeDownloadModal = () => {\r\n // const { programId } = this.props.match.params;\r\n // const { \r\n // eventTeam, \r\n // handleListEventApplications,\r\n // handleListAllLegendsApplications,\r\n // searchFromDate,\r\n // searchToDate\r\n // } = this.props; \r\n \r\n // const { eventYear, nameSearch, searchFootballAreas } = this.state;\r\n \r\n // const searchName = typeof nameSearch === 'undefined' || nameSearch === \"\" ? 'NP' : nameSearch;\r\n\r\n // handleListEventApplications(programId, eventYear, eventTeam, searchFootballAreas, searchName);\r\n\r\n this.setState(prevState => { return { selectResumeDownloadModal: !prevState.selectResumeDownloadModal } });\r\n this.props.formHasChanged(); \r\n }\r\n\r\n handleComponentAddClicked = (e, name, value) => {\r\n this.handleToggleComponentsModal();\r\n }\r\n\r\n updateState = (name, value, selectedOptions) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState); \r\n \r\n if(value.indexOf('&') > 0) { value = value.replace(\"&\", \"%26\") }\r\n newState[name] = value;\r\n newState['selectedOptions'] = selectedOptions === null ? [] : selectedOptions;\r\n \r\n\r\n\r\n return newState;\r\n }, \r\n () => console.log(this.state)\r\n );\r\n }\r\n\r\n reactSelectChangeHandler = (value, action) => {\r\n const { name } = action; \r\n const concatValues = Array.isArray(value) ? value.map((i,k) => i.label).join() : value === null ? 'NP' : value;\r\n\r\n this.updateState(name, concatValues, value);\r\n }\r\n\r\n DoDelete = (eventId, personId) => {\r\n //handleDeleteApplication(programId, selectedPersonId);\r\n axios.post(\r\n DELETE_EVENT_APP(eventId, personId),\r\n {},\r\n getAxiosHeaders()).then((resp) => { \r\n this.refreshParticipantsList();\r\n }).catch(error => { \r\n alert(\"Error deleting application.
\" + error.request !== null && error.request.responseText !== null && error.request.responseText !== '' ? error.request.responseText : error.message !== null && error.message !== '' ? error.message : error.response !== null ? error.response.request.response : \"Unknown Error\");\r\n });\r\n }\r\n\r\n render() {\r\n const { programId } = this.props.match.params;\r\n const { \r\n eventTeam,\r\n programAdminChanged,\r\n legendApplications,\r\n loading, \r\n participants, \r\n events, \r\n footballAreas,\r\n refundCreditCardSuccess,\r\n selectedCountry,\r\n selectedState,\r\n } = this.props;\r\n \r\n const { eventYear } = this.state;\r\n \r\n let nCols = programId.toUpperCase() !== BILL_WALSH_ID && programId.toUpperCase() !== NUNN_WOOTEN_ID ? 3 : 2;\r\n\r\n let eventName = \"\"; \r\n let participantsList = programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n legendApplications.map((legend, legendKey) => {\r\n return {\r\n id: legend.applicationId,\r\n applicationId: legend.applicationId,\r\n legendId: legend.legendId,\r\n applicationDate: legend.applicationDate,\r\n applicantName: legend.applicantName,\r\n companyName: legend.companyName,\r\n industry: legend.industry,\r\n applicationStatusID: legend.applicationStatusID,\r\n applicationStatusDate: legend.applicationStatusDate,\r\n registrationStatus: legend.registrationStatus,\r\n eventRegistrationId: legend.eventRegistrationId,\r\n playerId: legend.playerId\r\n }\r\n }) : participants;\r\n\r\n if (typeof loading !== 'undefined' && \r\n loading === false &&\r\n typeof events !== 'undefined' && \r\n events !== null && \r\n programId !== null) {\r\n const eventObj = events.filter(event => event.eventId === programId.toLowerCase())[0];\r\n eventName = typeof eventObj === 'undefined' ? '' : eventObj.eventName;\r\n }\r\n\r\n // refundCreditCardSuccess || programAdminChanged ? \r\n // this.refreshParticipantsList() :\r\n\r\n return typeof loading === 'undefined' || \r\n loading === true || this.state.downloadingZip || (programId.toUpperCase() === FOOTBALLOPS_SUBMISSION_ID && typeof footballAreas === 'undefined' && footballAreas === null && footballAreas.length <= 0) ? \r\n : \r\n (\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n} \r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n eventId,\r\n eventYear, \r\n eventTeam, \r\n events, \r\n eventQuestions,\r\n participants,\r\n participantsLoading, \r\n refundCreditCardSuccess,\r\n footballAreas } = state.eventParticipants;\r\n \r\n const { selectedColumns } = state.forms;\r\n\r\n const { programAdminChanged, user } = state.auth;\r\n\r\n const {\r\n legendApplicationLoading,\r\n legendApplications,\r\n selectedCountry,\r\n selectedState,\r\n } = state.legendApplication\r\n\r\n return {\r\n eventId,\r\n eventYear, \r\n eventTeam,\r\n events,\r\n eventQuestions,\r\n legendApplicationLoading,\r\n legendApplications,\r\n footballAreas,\r\n participants: [...participants, ...legendApplications],\r\n loading: participantsLoading || legendApplicationLoading,\r\n programAdminChanged,\r\n refundCreditCardSuccess,\r\n selectedColumns,\r\n selectedCountry,\r\n selectedState,\r\n user\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n formHasChanged: () => dispatch(authActions.formHasChanged()),\r\n handleChangeRegStatus: (eventId, personId, statusId) => \r\n dispatch(eventActions.updateEventApplicationStatus(eventId, personId, statusId)),\r\n handleChangeLegendAppStatus: (eventId, personId, statusId) => dispatch(legendsActions.updateLegendApplicationStatus(eventId, personId, statusId)),\r\n listEvents: () => dispatch(eventActions.listEvents()),\r\n listFootballAreas: (eventId) => dispatch(eventActions.listFootballAreas(eventId)),\r\n handleListEventApplications: (eventId, year, team, searchFootballAreas, filterName) => \r\n dispatch(eventActions.listEventParticipants(eventId, year, team, searchFootballAreas, filterName)),\r\n handleListAllLegendsApplications: (fromSearchDate, toSearchDate, filterName) => \r\n dispatch(legendsActions.listAllLegendsApplications(fromSearchDate, toSearchDate, filterName)),\r\n handleResetParticipantRefunded: () => \r\n dispatch(eventActions.resetParticipantRefunded()),\r\n handleResetParticipantRefundedTx: () => \r\n dispatch(eventActions.resetParticipantRefundedTX()),\r\n handleUpdateSelectParticipantColumn: column => \r\n dispatch(formsActions.updateSelectParticipantColumn(column))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EventParticipants);\r\n","import _ from 'lodash';\r\nimport React, { Fragment } from 'react';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport {\r\n FormGroup,\r\n Label,\r\n Form\r\n} from \"reactstrap\";\r\nimport moment from 'moment';\r\n\r\nimport Spinner from '../../../Spinner/Spinner';\r\nimport appRoutes from 'appRoutes';\r\n\r\nconst MULTI_DROP_DOWN_COMPONENT_ID = '339aa42d-a3de-41e3-9cd2-5f49e0f711e3';\r\nconst FILE_UPLOAD_COMPONENT_ID = 'dc6d1cca-6df3-4b76-8e12-bc2ccf4616e6';\r\n\r\nconst formatPhoneNumber = phoneNumberString => {\r\n var cleaned = ('' + phoneNumberString).replace(/\\D/g, '');\r\n // var match = cleaned.match(/^(1|)?(\\d{3})(\\d{3})(\\d{4})$/);\r\n var match = cleaned.match(/^([0-9][0-9]?[0-9]?|)?(\\d{3})(\\d{3})(\\d{4})$/);\r\n\r\n if (match) {\r\n // var intlCode = (match[1] ? '+1 ' : '');\r\n var intlCode = match[1] === undefined || match[1] === null ? '' : '+' + match[1] + ' ';\r\n return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');\r\n }\r\n return phoneNumberString;\r\n }\r\n\r\n\r\nconst FOPCompanyInformation = props => {\r\n const { participant, loading, programComponents } = props;\r\n \r\n const fileUploadComp = programComponents.filter(pc => pc.componentId.toUpperCase() === FILE_UPLOAD_COMPONENT_ID.toUpperCase())[0];\r\n \r\n const fileUploadConfigText = typeof fileUploadComp === 'undefined' ? '' : fileUploadComp.configuration;\r\n\r\n let displayFileUploads = false;\r\n let fileUploadSectionText = \"\";\r\n let fileUploadControlLabels = {}; \r\n\r\n if(fileUploadConfigText.trim().length > 0) {\r\n const fuConfig = JSON.parse(fileUploadConfigText);\r\n fileUploadControlLabels = JSON.parse(fuConfig.labels);\r\n fileUploadSectionText = fuConfig.sectionTitle;\r\n displayFileUploads = true;\r\n }\r\n\r\n return typeof programComponents === 'undefined' || typeof participant === 'undefined' || participant == null ? null : (\r\n typeof loading === 'undefined' || loading === true ? :\r\n );\r\n}\r\n\r\nconst getUploadedFileLink = (labels, file, labelIndex) => { \r\n let nfile = \"\";\r\n if (file.indexOf('_') > 0)\r\n {\r\n nfile = file.substring(file.indexOf('_') + 1);\r\n }\r\n else\r\n {\r\n nfile = file;\r\n }\r\n \r\n return {`${nfile}`}\r\n}\r\n\r\nconst getUploadedFiles = (participant,labels) => {\r\n\r\n const { \r\n FILE_UPLOAD_0, \r\n FILE_UPLOAD_1, \r\n FILE_UPLOAD_2, \r\n FILE_UPLOAD_3,\r\n FILE_UPLOAD_4,\r\n FILE_UPLOAD_5} = participant;\r\n\r\n let listItems = [];\r\n\r\n if(FILE_UPLOAD_0 !== null && typeof FILE_UPLOAD_0 !== 'undefined' && FILE_UPLOAD_0.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_0, 0))\r\n if(FILE_UPLOAD_1 !== null && typeof FILE_UPLOAD_1 !== 'undefined' && FILE_UPLOAD_1.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_1, 1))\r\n if(FILE_UPLOAD_2 !== null && typeof FILE_UPLOAD_2 !== 'undefined' && FILE_UPLOAD_2.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_2, 2))\r\n if(FILE_UPLOAD_3 !== null && typeof FILE_UPLOAD_3 !== 'undefined' && FILE_UPLOAD_3.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_3, 3))\r\n if(FILE_UPLOAD_4 !== null && typeof FILE_UPLOAD_4 !== 'undefined' && FILE_UPLOAD_4.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_4, 4))\r\n if(FILE_UPLOAD_5 !== null && typeof FILE_UPLOAD_5 !== 'undefined' && FILE_UPLOAD_5.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_5, 5))\r\n \r\n return (\r\n listItems.length > 0?\r\n \r\n {listItems.map((li, liKey) => {\r\n return - {li}
\r\n })}\r\n
: No Uploaded File);\r\n}\r\n\r\nconst FormatCommaListAsUL = config => {\r\n const { source } = config;\r\n\r\n if(typeof source === 'undefined' || source === null)\r\n return none specified
\r\n \r\n const myList = source.split(',');\r\n let items = [];\r\n\r\n if(myList.length === 1)\r\n return {myList[0]}
\r\n\r\n for(let i = 0; i < myList.length; i++){\r\n items.push({myList[i]})\r\n }\r\n\r\n return ();\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { participant, participantsLoading } = state.eventParticipants\r\n const { programComponents } = state.programComponents;\r\n\r\n return {\r\n participant,\r\n loading: participantsLoading,\r\n programComponents\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(FOPCompanyInformation)\r\n","import _ from 'lodash';\r\nimport React, { Fragment } from 'react';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport {\r\n FormGroup,\r\n Label,\r\n Form\r\n} from \"reactstrap\";\r\nimport moment from 'moment';\r\n\r\nimport Spinner from '../../../Spinner/Spinner';\r\n\r\nconst MULTI_DROP_DOWN_COMPONENT_ID = '339aa42d-a3de-41e3-9cd2-5f49e0f711e3'\r\n\r\nconst formatPhoneNumber = phoneNumberString => {\r\n var cleaned = ('' + phoneNumberString).replace(/\\D/g, '');\r\n // var match = cleaned.match(/^(1|)?(\\d{3})(\\d{3})(\\d{4})$/);\r\n var match = cleaned.match(/^([0-9][0-9]?[0-9]?|)?(\\d{3})(\\d{3})(\\d{4})$/);\r\n\r\n if (match) {\r\n // var intlCode = (match[1] ? '+1 ' : '');\r\n var intlCode = '+' + match[1] + ' ';\r\n return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');\r\n }\r\n return phoneNumberString;\r\n }\r\n\r\nconst LegendInformation = props => {\r\n const { participant, legendTeams, loading, programComponents } = props;\r\n\r\n const multiDropDownComp = programComponents.filter(pc => pc.componentId.toUpperCase() === MULTI_DROP_DOWN_COMPONENT_ID.toUpperCase())[0];\r\n const configText = typeof multiDropDownComp === 'undefined' ? '' : multiDropDownComp.configuration;\r\n \r\n return typeof programComponents === 'undefined' || typeof participant === 'undefined' || participant === null ? null : (\r\n typeof loading === 'undefined' || loading === true ? :\r\n );\r\n}\r\n\r\nconst FormatCommaListAsUL = config => {\r\n const { source } = config;\r\n\r\n if(source === null)\r\n return none specified
\r\n \r\n const myList = source.split(',');\r\n let items = [];\r\n\r\n if(myList.length === 1)\r\n return {myList[0]}
\r\n\r\n for(let i = 0; i < myList.length; i++){\r\n items.push({myList[i]})\r\n }\r\n\r\n return ();\r\n}\r\n\r\nconst TeamsPlayedForList = config => {\r\n const { teams } = config;\r\n const numTeams = teams.length;\r\n\r\n let table = [];\r\n\r\n if(teams.length === 0) {\r\n table.push(| No Teams Specified |
)\r\n } else {\r\n for(let i = 0; i <= numTeams - 1; i++) {\r\n table.push({getChildTableRow(teams[i])}
)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n | Season | \r\n | \r\n Team Name | \r\n
\r\n \r\n
| \r\n | \r\n
| \r\n
\r\n \r\n \r\n {table}\r\n \r\n
\r\n )\r\n}\r\n\r\nconst getChildTableRow = team => {\r\n\r\n let children = [];\r\n children.push(\r\n \r\n {team.season} | \r\n | \r\n {team.clubName} | \r\n \r\n )\r\n\r\n return children;\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n const { programComponents } = state.programComponents;\r\n\r\n const {\r\n legendApplication,\r\n legendApplicationLoading,\r\n } = state.legendApplication\r\n\r\n const {\r\n legendTeams\r\n } = state.legendHelpers;\r\n\r\n return {\r\n participant: legendApplication,\r\n legendTeams: legendTeams.length === 0 && state.legendApplication.legendTeams != null ? state.legendApplication.legendTeams : legendTeams,\r\n loading: legendApplicationLoading,\r\n programComponents\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(LegendInformation)\r\n","import _ from 'lodash';\r\nimport React from 'react';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport {\r\n FormGroup,\r\n Label,\r\n Form\r\n} from \"reactstrap\";\r\nimport moment from 'moment';\r\n\r\nimport Spinner from '../../../Spinner/Spinner';\r\nimport appRoutes from 'appRoutes';\r\n \r\nconst MULTI_DROP_DOWN_COMPONENT_ID = '339aa42d-a3de-41e3-9cd2-5f49e0f711e3'\r\nconst FILE_UPLOAD_COMPONENT_ID = 'dc6d1cca-6df3-4b76-8e12-bc2ccf4616e6';\r\nconst PREFERRED_TEAMS_COMPONENT_ID = '6a0133da-3615-4d1a-b02f-c384c7cd6854';\r\n\r\nconst PersonalInformation = props => {\r\n const { participant, loading, programComponents } = props;\r\n\r\n const multiDropDownComp = programComponents.filter(pc => pc.componentId.toUpperCase() === MULTI_DROP_DOWN_COMPONENT_ID.toUpperCase())[0];\r\n const fileUploadComp = programComponents.filter(pc => pc.componentId.toUpperCase() === FILE_UPLOAD_COMPONENT_ID.toUpperCase())[0];\r\n const preferredTeamsComp = programComponents.filter(pc => pc.componentId.toUpperCase() === PREFERRED_TEAMS_COMPONENT_ID.toUpperCase())[0];\r\n\r\n const configText = typeof multiDropDownComp === 'undefined' ? '' : multiDropDownComp.configuration;\r\n const fileUploadConfigText = typeof fileUploadComp === 'undefined' ? '' : fileUploadComp.configuration;\r\n\r\n let displayFileUploads = false;\r\n\r\n let fileUploadSectionText = \"\";\r\n let fileUploadControlLabels = {}; \r\n let multiDropDownLabel = \"\";\r\n\r\n if(configText.trim().length > 0) {\r\n const mddConfig = JSON.parse(configText);\r\n multiDropDownLabel = mddConfig.controlCaption;\r\n }\r\n \r\n if(fileUploadConfigText.trim().length > 0) {\r\n const fuConfig = JSON.parse(fileUploadConfigText);\r\n fileUploadControlLabels = JSON.parse(fuConfig.labels);\r\n fileUploadSectionText = fuConfig.sectionTitle;\r\n displayFileUploads = true;\r\n }\r\n \r\n return typeof programComponents === 'undefined' || typeof participant === 'undefined'? null : (\r\n typeof loading === 'undefined' || loading === true ? :\r\n );\r\n}\r\n\r\nconst getUploadedFileLink = (labels, file, labelIndex) => { \r\n return {`${labels[`label${labelIndex}`]}`}\r\n}\r\n\r\nconst getFootballExperienceFields = participant => {\r\n const {\r\n currentFormerFootballPlayer,\r\n lastTeamPlayedFor,\r\n lastYearPlayedInNFL,\r\n numYearsPlayedInNFL,\r\n whichLeague,\r\n otherLeague\r\n } = participant;\r\n\r\n const experience = currentFormerFootballPlayer === \"yes\" && whichLeague === \"NFL\" ? \r\n \r\n - {`Football Experience: NFL`}
\r\n - {`Last Team Played For: ${lastTeamPlayedFor}`}
\r\n - {`Last Year Played: ${lastYearPlayedInNFL}`}
\r\n - {`Number of Years Played: ${numYearsPlayedInNFL}`}
\r\n
: \r\n whichLeague === 'other' ?\r\n \r\n - {`Football Experience: ${whichLeague} - ${otherLeague}`}
\r\n
: \r\n \r\n - {`Football Experience: ${whichLeague}`}
\r\n
\r\n\r\n return participant.currentFormerFootballPlayer === \"yes\" ? (\r\n \r\n \r\n {experience}\r\n \r\n ) : participant.currentFormerFootballPlayer === \"no\" ? \r\n (\r\n \r\n \r\n No\r\n \r\n ) : null;\r\n}\r\n\r\nconst getFootballBackgroundFields = participant => {\r\n const {\r\n footballExperience,\r\n lastSeasonPlayedInNFL,\r\n lastTeamPlayedFor,\r\n numYearsPlayedInNFL,\r\n headCoachPlayedFor,\r\n lastSeasonPlayedInCollege,\r\n schoolPlayedFor,\r\n jobTitle,\r\n schoolWorkFor,\r\n yearsOfExperience\r\n } = participant;\r\n\r\n const background = footballExperience === \"formerNFLPlayer\" ? \r\n \r\n - {`Football Background: Former NFL Player`}
\r\n - {`Last NFL Club Played For: ${lastTeamPlayedFor}`}
\r\n - {`Last Season Played: ${lastSeasonPlayedInNFL}`}
\r\n - {`Number of Years Played: ${numYearsPlayedInNFL}`}
\r\n
:\r\n footballExperience === \"formerCollegePlayer\" ? \r\n \r\n - {`Football Background: Former College Football Player (No NFL Playing Experience)`}
\r\n - {`School Played For: ${schoolPlayedFor}`}
\r\n - {`Last Season Played: ${lastSeasonPlayedInCollege}`}
\r\n - {`Head Coach(es) Played For: ${headCoachPlayedFor}`}
\r\n
: footballExperience === \"currentCollegePlayer\" ?\r\n \r\n - {`Football Background: Currently Work in College Football`}
\r\n - {`School: ${schoolWorkFor}`}
\r\n - {`Job Title: ${jobTitle}`}
\r\n - {`Years of Experience: ${yearsOfExperience}`}
\r\n
: null\r\n\r\n return typeof footballExperience !== 'undefined' && footballExperience !== '' ? (\r\n \r\n \r\n {background}\r\n \r\n ) : null;\r\n}\r\n\r\nconst getUploadedFiles = (participant,labels) => {\r\n\r\n const { \r\n FILE_UPLOAD_0, \r\n FILE_UPLOAD_1, \r\n FILE_UPLOAD_2, \r\n FILE_UPLOAD_3,\r\n FILE_UPLOAD_4,\r\n FILE_UPLOAD_5} = participant;\r\n\r\n let listItems = [];\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_0, 0))\r\n \r\n if(FILE_UPLOAD_1 !== null && typeof FILE_UPLOAD_1 !== 'undefined' && FILE_UPLOAD_1.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_1, 1))\r\n if(FILE_UPLOAD_2 !== null && typeof FILE_UPLOAD_2 !== 'undefined' && FILE_UPLOAD_2.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_2, 2))\r\n if(FILE_UPLOAD_3 !== null && typeof FILE_UPLOAD_3 !== 'undefined' && FILE_UPLOAD_3.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_3, 3))\r\n if(FILE_UPLOAD_4 !== null && typeof FILE_UPLOAD_4 !== 'undefined' && FILE_UPLOAD_4.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_4, 4))\r\n if(FILE_UPLOAD_5 !== null && typeof FILE_UPLOAD_5 !== 'undefined' && FILE_UPLOAD_5.length > 0)\r\n listItems.push(getUploadedFileLink(labels, FILE_UPLOAD_5, 5))\r\n \r\n return (\r\n \r\n {listItems.map((li, liKey) => {\r\n return - {li}
\r\n })}\r\n
);\r\n}\r\n\r\nconst getMultiDropDownListResults = (participant) => {\r\n\r\n const { \r\n MULTI_DROP_DOWN_0, \r\n MULTI_DROP_DOWN_1, \r\n MULTI_DROP_DOWN_2, \r\n MULTI_DROP_DOWN_3,\r\n MULTI_DROP_DOWN_4,\r\n MULTI_DROP_DOWN_5} = participant;\r\n\r\n let listItems = [];\r\n\r\n if(MULTI_DROP_DOWN_1 !== null && typeof MULTI_DROP_DOWN_0 !== 'undefined' && MULTI_DROP_DOWN_0.length > 0 && MULTI_DROP_DOWN_0 !== 'no-preference') \r\n listItems.push(MULTI_DROP_DOWN_0)\r\n\r\n if(MULTI_DROP_DOWN_1 !== null && typeof MULTI_DROP_DOWN_1 !== 'undefined' && MULTI_DROP_DOWN_1.length > 0 && MULTI_DROP_DOWN_1 !== 'no-preference')\r\n listItems.push(MULTI_DROP_DOWN_1)\r\n if(MULTI_DROP_DOWN_2 !== null && typeof MULTI_DROP_DOWN_2 !== 'undefined' && MULTI_DROP_DOWN_2.length > 0 && MULTI_DROP_DOWN_2 !== 'no-preference')\r\n listItems.push(MULTI_DROP_DOWN_2)\r\n if(MULTI_DROP_DOWN_3 !== null && typeof MULTI_DROP_DOWN_3 !== 'undefined' && MULTI_DROP_DOWN_3.length > 0 && MULTI_DROP_DOWN_3 !== 'no-preference')\r\n listItems.push(MULTI_DROP_DOWN_3)\r\n if(MULTI_DROP_DOWN_4 !== null && typeof MULTI_DROP_DOWN_4 !== 'undefined' && MULTI_DROP_DOWN_4.length > 0 && MULTI_DROP_DOWN_4 !== 'no-preference')\r\n listItems.push(MULTI_DROP_DOWN_4)\r\n if(MULTI_DROP_DOWN_5 !== null && typeof MULTI_DROP_DOWN_5 !== 'undefined' && MULTI_DROP_DOWN_5.length > 0 && MULTI_DROP_DOWN_5 !== 'no-preference')\r\n listItems.push(MULTI_DROP_DOWN_5)\r\n\r\n return listItems.length > 0 ? (\r\n \r\n {listItems.map((li, liKey) => {\r\n return - {li}
\r\n })}\r\n
) : \r\n (No Preference
);\r\n}\r\n\r\nconst isJson = (str) => {\r\n try {\r\n JSON.parse(str);\r\n } catch (e) {\r\n return false;\r\n }\r\n return true;\r\n} \r\n\r\nconst getPreferredTeamsResults = (preferredTeamsString) => {\r\n\r\n let listItems = [];\r\n\r\n if( (typeof preferredTeamsString === 'undefined' || preferredTeamsString === null) || \r\n (preferredTeamsString.trim().length === 0 || preferredTeamsString === '[]' || \r\n preferredTeamsString === 'null' || preferredTeamsString.toUpperCase() == 'NO PREFERENCE')) {\r\n return (No Preference
)\r\n } else if(isJson(preferredTeamsString)){\r\n const preferredTeams = JSON.parse(preferredTeamsString);\r\n\r\n const transformedTeams = preferredTeams.map((p,k) => {\r\n return typeof p !== 'undefined' && p !== null ? p.clubName : \"\"\r\n })\r\n\r\n listItems = _.orderBy(transformedTeams);\r\n } else if(preferredTeamsString.indexOf(',') > -1) {\r\n listItems = preferredTeamsString.split(',')\r\n } else {\r\n listItems.push(preferredTeamsString)\r\n }\r\n\r\n listItems = _.orderBy(listItems)\r\n return listItems.length > 0 ? (\r\n \r\n {listItems.map((li, liKey) => {\r\n return - {li}
\r\n })}\r\n
) : No Preference
;\r\n}\r\n\r\nconst convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n}\r\n\r\nconst toTitleCase = str => {\r\n return typeof str === 'undefined' ? '' : str.replace(\r\n /\\w\\S*/g,\r\n function(txt) {\r\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\r\n }\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { participant, participantsLoading } = state.eventParticipants\r\n const { programComponents } = state.programComponents;\r\n\r\n return {\r\n participant,\r\n loading: participantsLoading,\r\n programComponents\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(PersonalInformation)\r\n","import _ from 'lodash';\r\nimport React, { Fragment } from 'react';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport { connect } from 'react-redux';\r\nimport {\r\n Button,\r\n FormGroup,\r\n Label,\r\n Form\r\n} from \"reactstrap\";\r\n\r\nimport Spinner from '../../../Spinner/Spinner';\r\n\r\n\r\nconst toTitleCase = str => {\r\n return typeof str === 'undefined' ? '' : str.replace(\r\n /\\w\\S*/g,\r\n function(txt) {\r\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\r\n }\r\n );\r\n}\r\n \r\nconst playerDbInfo = props => {\r\n const { handlePlayerDbSearch, loading, participant, user } = props;\r\n\r\n let isClubUser = false;\r\n if (typeof user !== 'undefined' && user !== null)\r\n isClubUser = user.isClubUser;\r\n\r\n return typeof participant === 'undefined'? null : (\r\n typeof loading === 'undefined' || loading === true ? :\r\n\r\n \r\n \r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { participant, participantsLoading } = state.eventParticipants\r\n\r\n const { selectedPlayerDb } = state.programComponents;\r\n\r\n const { user } = state.auth;\r\n\r\n return {\r\n loading: participantsLoading, \r\n participant,\r\n selectedPlayerDb,\r\n user\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(playerDbInfo);\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../_actions';\r\nimport Autosuggest from 'react-autosuggest';\r\n\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n Modal,\r\n ModalHeader, \r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n \r\nconst getSuggestionValue = suggestion => suggestion.name;\r\n \r\nconst renderSuggestion = suggestion => (\r\n \r\n {suggestion.name}\r\n
\r\n );\r\n\r\nclass PlayerDbSearch extends Component {\r\n state = {\r\n value: '', \r\n suggestions: []\r\n }\r\n\r\n shouldRenderSuggestions = (value, reason) => {\r\n return value.trim().length > 1;\r\n }\r\n\r\n render() {\r\n const { \r\n onChange, \r\n onSuggestionsClearRequested,\r\n onSuggestionsFetchRequested, \r\n onSuggestionSelected,\r\n playerDbSuggestions,\r\n playerDbValue } = this.props;\r\n\r\n const { \r\n isOpen,\r\n toggle \r\n } = this.props;\r\n \r\n const inputProps = {\r\n placeholder: `Type a player's name`,\r\n value: playerDbValue,\r\n onChange\r\n }\r\n return (\r\n \r\n \r\n Player Db Search \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n\r\n const { \r\n playerDbValue,\r\n playerDbSuggestions,\r\n playerDbSuggestionsLoading\r\n } = state.programComponents;\r\n\r\n return {\r\n playerDbValue,\r\n playerDbSuggestions,\r\n playerDbSuggestionsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n onChange(event, { newValue }) {\r\n dispatch(eventActions.updatePlayerDbListInputValue(newValue))\r\n },\r\n onSuggestionsFetchRequested({ value }) {\r\n dispatch(eventActions.listPlayerDbPlayersByPattern(value));\r\n },\r\n onSuggestionsClearRequested() {\r\n dispatch(eventActions.clearPlayerDbList());\r\n },\r\n onSuggestionSelected(event, { suggestion }) {\r\n dispatch(eventActions.updateSelectedPlayerDbValue(suggestion.value))\r\n }\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PlayerDbSearch)\r\n","import React, { Component } from 'react';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader, \r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass RemoveApplicant extends Component {\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Remove Submission
\r\n {this.props.programName}
\r\n \r\n \r\n \r\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 (RemoveApplicant);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Row,\r\n Card,\r\n CardBody,\r\n FormGroup,\r\n Label,\r\n Form\r\n} from \"reactstrap\";\r\n\r\nimport { eventActions } from '../../../../_actions';\r\nimport Spinner from '../../../Spinner/Spinner';\r\n\r\nclass Responses extends Component {\r\n componentDidMount() {\r\n this.props.handleGetApplicationResponses(this.props.eventId, this.props.participantId);\r\n }\r\n \r\n getQuestionLabel = (question) => {\r\n switch(question) {\r\n case 'agent':\r\n return 'Agent';\r\n case 'areaOfInterest':\r\n return 'Area of Interest';\r\n case 'clubPlayerEngagementDirector':\r\n return 'Club Player Engagement Director';\r\n case 'currentPlayer':\r\n return 'Current Player';\r\n case 'currentNFLPlayer':\r\n return 'Current NFL Player';\r\n case 'currentTeam':\r\n return 'Current Team';\r\n case 'currentTeammate':\r\n return 'Current Teammate';\r\n case 'directorOfPlayerEngagement':\r\n return 'Director of Player Engagement';\r\n case 'FamilyInformation':\r\n return 'Family Information'\r\n case 'formerPlayer':\r\n return 'Former Player';\r\n case 'formerTeammate':\r\n return 'Former Teammate';\r\n case 'legendsDirector':\r\n return 'Legends Director';\r\n case 'leagueOffice':\r\n return 'League Office';\r\n case 'mostRecentTeam':\r\n return 'Most Recent Team';\r\n case 'nflAlumniAssoc':\r\n return 'NFL Alumni Association';\r\n case 'other':\r\n // return 'Other';\r\n return '';\r\n case 'playerRepresentative':\r\n return 'Player Representative';\r\n case 'personalStatement':\r\n return 'Personal Statement';\r\n case 'PlayerSegment':\r\n return 'Playing History';\r\n case 'yearsInNFL':\r\n return 'Years in NFL';\r\n\r\n case 'SignificantOtherAttend':\r\n return 'Will your Significant Other Attend?'\r\n case 'sigOtherName':\r\n return \"Name\";\r\n case 'sigOtherEmail':\r\n return \"Email\";\r\n case 'sigOtherCell':\r\n return \"Cell Phone\";\r\n case 'sigOtherTShirt':\r\n return \"T-Shirt Size\";\r\n\r\n case 'childName0':\r\n return 'Child 1';\r\n case 'childName1':\r\n return 'Child 2';\r\n case 'childName2':\r\n return 'Child 3';\r\n case 'childName3':\r\n return 'Child 4';\r\n case 'childName4':\r\n return 'Child 5';\r\n case 'childName5':\r\n return 'Child 6';\r\n case 'childName6':\r\n return 'Child 7';\r\n case 'childName7':\r\n return 'Child 8';\r\n case 'childName8':\r\n return 'Child 9';\r\n case 'childName9':\r\n return 'Child 10';\r\n\r\n case 'childAge0':\r\n return 'Child 1 Age';\r\n case 'childAge1':\r\n return 'Child 2 Age';\r\n case 'childAge2':\r\n return 'Child 3 Age';\r\n case 'childAge3':\r\n return 'Child 4 Age';\r\n case 'childAge4':\r\n return 'Child 5 Age';\r\n case 'childAge5':\r\n return 'Child 6 Age';\r\n case 'childAge6':\r\n return 'Child 7 Age';\r\n case 'childAge7':\r\n return 'Child 8 Age';\r\n case 'childAge8':\r\n return 'Child 9 Age';\r\n case 'childAge9':\r\n return 'Child 10 Age';\r\n\r\n case 'childShirtSize0':\r\n return 'Child 1 Shirt Size';\r\n case 'childShirtSize1':\r\n return 'Child 2 Shirt Size';\r\n case 'childShirtSize2':\r\n return 'Child 3 Shirt Size';\r\n case 'childShirtSize3':\r\n return 'Child 4 Shirt Size';\r\n case 'childShirtSize4':\r\n return 'Child 5 Shirt Size';\r\n case 'childShirtSize5':\r\n return 'Child 6 Shirt Size';\r\n case 'childShirtSize6':\r\n return 'Child 7 Shirt Size';\r\n case 'childShirtSize7':\r\n return 'Child 8 Shirt Size';\r\n case 'childShirtSize8':\r\n return 'Child 9 Shirt Size';\r\n case 'childShirtSize9':\r\n return 'Child 10 Shirt Size';\r\n\r\n case 'WillYouBeAtteningJobFair':\r\n return 'Will You Be Attending the Job Fair';\r\n default:\r\n return question\r\n }\r\n }\r\n\r\n formatAnswerByType = question => {\r\n\r\n const { questionTypeId, questionText } = question;\r\n const convertedQuestion = JSON.parse(question.response);\r\n \r\n const responses = convertedQuestion === Array ? convertedQuestion[0] : convertedQuestion; \r\n const keys = Object.keys(responses);\r\n\r\n let formattedAnswer = [];\r\n\r\n if (questionText === 'Family Information') {\r\n const {SignificantOtherAttend, sigOtherName, sigOtherEmail, sigOtherCell, sigOtherTShirt} = responses;\r\n\r\n const childKeys = Object.keys(responses)\r\n const children = childKeys.filter(k => k.indexOf('childName') > -1)\r\n\r\n formattedAnswer.push(`Sig. Other Attend?: ${SignificantOtherAttend}`)\r\n if(SignificantOtherAttend ==='yes') {\r\n formattedAnswer.push(`Sig. Other Name: ${sigOtherName}`)\r\n formattedAnswer.push(`Sig. Other Email: ${sigOtherEmail}`)\r\n formattedAnswer.push(`Sig. Other Cell: ${sigOtherCell}`)\r\n formattedAnswer.push(`Sig. Other T-Shirt: ${sigOtherTShirt}`)\r\n }\r\n\r\n if(keys.length > 0) {\r\n for(let cCount=0; cCount <= children.length -1; cCount++) {\r\n formattedAnswer.push(`Child${cCount+1}: ${responses[`childName${cCount}`]}, ${responses[`childAge${cCount}`]}, ${responses[`childShirtSize${cCount}`]}`)\r\n }\r\n }\r\n } else if(questionText === 'Playing History') {\r\n\r\n const { segment, teamName, yearsPlayedNfl } = JSON.parse(responses.PlayerSegment);\r\n\r\n if(segment === 'Current NFL Player') {\r\n formattedAnswer.push(`Type: ${segment}`);\r\n formattedAnswer.push(`Team: ${teamName}`);\r\n } else {\r\n formattedAnswer.push(`Type: ${segment === 'nflFreeAgent' ? 'NFL Free Agent' : 'Legend'}`);\r\n formattedAnswer.push(`Team: ${teamName}`);\r\n formattedAnswer.push(`Years Played: ${yearsPlayedNfl}`); \r\n }\r\n \r\n } else {\r\n \r\n keys.map((qKey, kKey) => {\r\n\r\n switch(questionTypeId) {\r\n case 1: // Free Text\r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`);\r\n break;\r\n case 2: // Yes/No\r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`)\r\n break; \r\n\r\n case 6: \r\n //formattedAnswer.push(`${this.getQuestionLabel(qKey)} : ${this.removeOtherFromString(responses[qKey])}`)\r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`);\r\n break;\r\n\r\n case 3: // Multi-Select\r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`)\r\n break;\r\n\r\n case 4: // DropDown\r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`);\r\n break;\r\n\r\n case 5: // Component \r\n formattedAnswer.push(`${this.removeOtherFromString(responses[qKey])}`);\r\n break;\r\n\r\n default:\r\n formattedAnswer.push(`${this.removeOtherFromString(this.getQuestionLabel(qKey))}`);\r\n break;\r\n }\r\n })\r\n }\r\n\r\n return formattedAnswer;\r\n }\r\n\r\n removeOtherFromString = inputText => {\r\n if(inputText !== null && inputText.indexOf('Other') > -1){\r\n const xx = inputText.substr(0, inputText.indexOf('Other')) + ' ' + inputText.substr(inputText.indexOf('Other') + 'Other'.length, inputText.length - 'Other'.length)\r\n return xx;\r\n }\r\n\r\n return inputText;\r\n }\r\n\r\n getUnorderedList = arrList => {\r\n const labelClasses = ['font-weight-bold', 'align-top'];\r\n const list = arrList.map((item, fKey) => {\r\n return (\r\n {item}
\r\n );\r\n });\r\n return list;\r\n }\r\n\r\n getTableList = arrList => {\r\n const labelClasses = ['font-weight-bold', 'align-top'];\r\n const list = arrList.map((item, fKey) => {\r\n return (\r\n {item.replace(/\\[/g, '').replace(/\\]/g, '').replace(/\\{/g, '').replace(/\\}/g, '; ').replace(/\\\"/g, '').replace(/\\,/g, ', ')}
\r\n );\r\n });\r\n return list;\r\n }\r\n\r\n getParagraph = content => {\r\n return {content[0]}
\r\n }\r\n\r\n render() {\r\n const { responses, responsesLoading } = this.props;\r\n\r\n return (\r\n typeof responsesLoading === 'undefined' || \r\n responsesLoading === 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\nconst mapStateToProps = state => {\r\n const { responses, responsesLoading } = state.eventParticipants;\r\n\r\n return {\r\n responses,\r\n responsesLoading\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleGetApplicationResponses: (eventId, participantId) => \r\n dispatch(eventActions.getEventParticipantResponses(eventId, participantId))\r\n }\r\n};\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps)\r\n (Responses);\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Card,\r\n CardBody,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nconst convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n\r\n if(date instanceof Date && !isNaN(date))\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;\r\n \r\n return strDate;\r\n}\r\n \r\nconst Transactions = props => {\r\n const { \r\n appTransactions, \r\n appTransactionsLoading } = props;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Transaction Information
\r\n {\r\n appTransactions == null || appTransactions.length === 0 ? \r\n No transactions..
:\r\n \r\n \r\n \r\n | Date/Time | \r\n Payment Method | \r\n Amount | \r\n Transaction No. | \r\n Auth Code | \r\n Transaction Response | \r\n
\r\n \r\n \r\n {appTransactions.map((i,p) => {\r\n return (\r\n \r\n | {convertFromISODate(i.transactionDate)} | \r\n {i.paymentMethod} | \r\n {Number(i.amountPaid).toFixed(2)} | \r\n {i.transactionNum} | \r\n {i.authorizationCode} | \r\n {i.description} | \r\n
)\r\n })\r\n }\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n appTransactions,\r\n appTransactionsLoading\r\n } = state.eventParticipants;\r\n\r\n return {\r\n appTransactions,\r\n appTransactionsLoading\r\n }\r\n}\r\n\r\nexport default \r\nconnect(mapStateToProps, null)\r\n(Transactions);\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport moment from 'moment';\r\nimport { eventActions } from '../../../../_actions';\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Card,\r\n CardBody,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nconst convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n\r\n if(date instanceof Date && !isNaN(date))\r\n return moment(date).format('MM/DD/YYYY hh:mm:ss a'); \r\n \r\n return strDate;\r\n}\r\n\r\nconst StatusLog = props => {\r\n const { programId } = props; \r\n const { \r\n appStatuses, \r\n handleListApplicationStatuses,\r\n participant \r\n } = props;\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Log History
\r\n {\r\n appStatuses == null || appStatuses.length === 0 ? \r\n No statuses..
:\r\n \r\n \r\n \r\n | Log ID | \r\n Status | \r\n Action By | \r\n Date/Time | \r\n
\r\n \r\n \r\n {appStatuses.map((i,p) => {\r\n return (\r\n \r\n | {i.statusId} | \r\n {i.registrationStatus} | \r\n {i.changedBy} | \r\n {convertFromISODate(i.statusDate)} | \r\n
)\r\n })\r\n }\r\n \r\n
\r\n } \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const {\r\n appStatuses,\r\n appStatusesLoading,\r\n participant\r\n } = state.eventParticipants;\r\n\r\n const {\r\n legendApplication,\r\n } = state.legendApplication\r\n\r\n\r\n return {\r\n appStatuses,\r\n appStatusesLoading,\r\n participant: participant || legendApplication, \r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleListApplicationStatuses: (eventId, personId) => \r\n dispatch(eventActions.listEventParticipantStatuses(eventId, personId)),\r\n handleListApplicationTransactions: (eventId, personId) => \r\n dispatch(eventActions.listApplicationTransactions(eventId, personId)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(StatusLog)\r\n\r\n","import React, { Component, Fragment } from 'react';\r\nimport axios from '../../../axios-pea';\r\nimport { getAxiosHeaders } from '../../../_helpers';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { \r\n authActions, \r\n dialogActions, \r\n formsActions, \r\n eventActions,\r\n legendsActions } from '../../../_actions';\r\nimport { RegistrationStatuses } from '../../../_constants';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Form,\r\n FormGroup,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport { DELETE_EVENT_APP } from '../../../endpoints/ServiceEndpoints';\r\nimport AnchorRow from './FormAnchorRow/FormAnchorRow';\r\nimport EditRefund from './EditRefund/EditRefund';\r\nimport FOPCompanyInformation from './FOPCompanyInformation/FOPCompanyInformation';\r\nimport LegendInformation from './LegendInformation/LegendInformation';\r\nimport PersonalInformation from './PersonalInformation/PersonalInformation';\r\nimport PlayerDbInfo from './PlayerDbInfo/PlayerDbInfo';\r\nimport PlayerDbSearch from '../../Shared/PlayerDbSearch/PlayerDbSearch';\r\nimport RemoveSubmission from './RemoveApplicant/RemoveApplicant';\r\nimport ConfirmApprove from './ConfirmApprove/ConfirmApprove';\r\nimport ConfirmReject from './ConfirmReject/ConfirmReject';\r\nimport ConfirmDelete from './ConfirmDelete/ConfirmDelete';\r\nimport ConfirmOutofBusiness from './ConfirmOutofBusiness/ConfirmOutofBusiness';\r\nimport Responses from './Responses/Responses';\r\nimport Spinner from '../../Spinner/Spinner';\r\nimport Transactions from './Transactions/Transactions';\r\nimport StatusLog from './StatusLog/StatusLog';\r\n\r\nconst LEGENDS_BUSINESS_DIRECTORY_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96';\r\nconst FOOTBALL_OPS_ID = '31D531E9-1094-424C-9665-597A6B2F018B';\r\n\r\nclass EventParticipantForm extends Component {\r\n state={\r\n creditCardLastFour: null, \r\n editRefundModal: false,\r\n removeSubmissionModal: false,\r\n playerDbSearchModal: false,\r\n editRefundModal: false,\r\n confirmApproveModal: false,\r\n confirmRejectModal: false,\r\n confirmDeleteModal: false,\r\n confirmOutofBusinessModal: false,\r\n showApprovedRejectButtons: true\r\n }\r\n\r\n componentDidMount() {\r\n const { programId, id } = this.props.match.params;\r\n\r\n const { \r\n handleGetLegendApplication,\r\n handleListAllLegendsApplications,\r\n handleListEventApplications, \r\n handleListLegendTeams,\r\n listEventComponents, \r\n handleGetEventForm, \r\n handleGetParticipant,\r\n handleListApplicationTransactions, \r\n handleListApplicationStatuses\r\n } = this.props;\r\n\r\n\r\n listEventComponents(programId);\r\n handleGetEventForm(programId);\r\n\r\n if(programId === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications('','');\r\n handleGetLegendApplication(id);\r\n handleListLegendTeams(id);\r\n } else {\r\n handleListEventApplications(programId);\r\n handleGetParticipant(programId, id);\r\n handleListApplicationTransactions(programId, id);\r\n }\r\n \r\n handleListApplicationStatuses(programId, id);\r\n }\r\n\r\n handleOpeningDialog = (event, title, message, type) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.props.showDialog(\r\n {\r\n open: true,\r\n title: title,\r\n message: message,\r\n closeDialog: this.props.hideDialog()\r\n },\r\n type\r\n );\r\n };\r\n\r\n toTitleCase = str => {\r\n return typeof str === 'undefined' || str === null ? '' : str.replace(\r\n /\\w\\S*/g,\r\n function(txt) {\r\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\r\n }\r\n );\r\n }\r\n\r\n handleApproveClicked = event => {\r\n //const { programId, id } = this.props.match.params;\r\n //const { \r\n // handleChangeRegStatus, \r\n // handleChangeLegendAppStatus\r\n //} = this.props;\r\n \r\n //programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n // handleChangeLegendAppStatus(programId, id, RegistrationStatuses.Approved) :\r\n // handleChangeRegStatus(programId, id, RegistrationStatuses.Approved);\r\n\r\n //this.props.formHasChanged();\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.confirmApproveModal = !prevState.confirmApproveModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleRejectClicked = event => {\r\n //const { programId, id } = this.props.match.params;\r\n //const { handleChangeRegStatus, handleChangeLegendAppStatus } = this.props;\r\n \r\n\r\n //programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n // handleChangeLegendAppStatus(programId, id, RegistrationStatuses.Rejected) :\r\n // handleChangeRegStatus(programId, id, RegistrationStatuses.Rejected);\r\n //this.props.formHasChanged();\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.confirmRejectModal = !prevState.confirmRejectModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleDeleteClicked = event => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.confirmDeleteModal = !prevState.confirmDeleteModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleOutofBusinessClicked = event => {\r\n //const { programId, id } = this.props.match.params;\r\n //const { handleChangeRegStatus, handleChangeLegendAppStatus } = this.props;\r\n \r\n\r\n //programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n // handleChangeLegendAppStatus(programId, id, RegistrationStatuses.OutofBusiness) :\r\n // handleChangeRegStatus(programId, id, RegistrationStatuses.OutofBusiness);\r\n //this.props.formHasChanged();\r\n //const { participants, programId } = this.props;\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.confirmOutofBusinessModal = !prevState.confirmOutofBusinessModal\r\n return newState;\r\n })\r\n }\r\n\r\n handleToggleConfirmApproveModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmApproveModal: !prevState.confirmApproveModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleConfirmRejectModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmRejectModal: !prevState.confirmRejectModal }\r\n }, () => formHasChanged());\r\n }\r\n \r\n handleToggleConfirmDeleteModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmDeleteModal: !prevState.confirmDeleteModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleToggleConfirmOutofBusinessModal = () => {\r\n const { formHasChanged } = this.props;\r\n\r\n this.setState(prevState => { \r\n return { confirmOutofBusinessModal: !prevState.confirmOutofBusinessModal }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleDoApproveClicked = event => {\r\n const { \r\n handleChangeRegStatus,\r\n handleGetParticipant,\r\n handleListApplicationStatuses,\r\n formHasChanged\r\n } = this.props;\r\n const { programId, id } = this.props.match.params;\r\n \r\n this.handleToggleConfirmApproveModal();\r\n handleChangeRegStatus(programId, id, RegistrationStatuses.Approved);\r\n //handleGetParticipant(programId, id);\r\n handleListApplicationStatuses(programId, id);\r\n this.setState(prevState => { \r\n return { showApprovedRejectButtons: false }\r\n }, () => formHasChanged());\r\n }\r\n\r\n handleDoRejectClicked = event => {\r\n const { \r\n handleChangeLegendAppStatus,\r\n handleChangeRegStatus,\r\n handleGetParticipant,\r\n handleListApplicationStatuses,\r\n formHasChanged\r\n } = this.props;\r\n\r\n const { programId, id } = this.props.match.params;\r\n\r\n console.log('Do Reject')\r\n\r\n this.handleToggleConfirmRejectModal();\r\n programId === LEGENDS_BUSINESS_DIRECTORY_ID ?\r\n handleChangeLegendAppStatus(programId, id, RegistrationStatuses.Rejected) :\r\n handleChangeRegStatus(programId, id, RegistrationStatuses.Rejected);\r\n \r\n //handleGetParticipant(programId, id);\r\n handleListApplicationStatuses(programId, id); \r\n this.setState(prevState => { \r\n return { showApprovedRejectButtons: false }\r\n }, () => formHasChanged()); \r\n }\r\n \r\n DoDeleteClicked = event => {\r\n const { programId, id } = this.props.match.params;\r\n\r\n this.handleToggleConfirmDeleteModal();\r\n \r\n const eventId = programId;\r\n const personId = id;\r\n axios.post(\r\n DELETE_EVENT_APP(eventId, personId),\r\n {},\r\n getAxiosHeaders()).then((resp) => { \r\n return programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n window.location.pathname = `/nflprograms/app/nfllegends/programs/${programId}/participants`:\r\n window.location.pathname = `/nflprograms/app/admin/programs/${programId}/participants`\r\n }).catch(error => { \r\n alert(\"Error deleting application.
\" + error.request !== null && error.request.responseText !== null && error.request.responseText !== '' ? error.request.responseText : error.message !== null && error.message !== '' ? error.message : error.response !== null ? error.response.request.response : \"Unknown Error\");\r\n });\r\n }\r\n\r\n handleDoOutofBusinessClicked = event => {\r\n const { \r\n handleChangeLegendAppStatus,\r\n handleGetParticipant,\r\n handleListApplicationStatuses\r\n } = this.props;\r\n const { programId, id } = this.props.match.params;\r\n\r\n this.handleToggleConfirmOutofBusinessModal();\r\n handleChangeLegendAppStatus(programId, id, RegistrationStatuses.OutofBusiness);\r\n handleGetParticipant(programId, id);\r\n handleListApplicationStatuses(programId, id);\r\n }\r\n\r\n handleResendConfirmation = event => {\r\n const { programId, id } = this.props.match.params;\r\n const { handleResendConfirmationEmail } = this.props;\r\n\r\n handleResendConfirmationEmail(programId, id)\r\n this.props.formHasChanged(); \r\n }\r\n\r\n handleRefundClicked = event => {\r\n const { handleResetParticipantRefundedTx } = this.props;\r\n handleResetParticipantRefundedTx();\r\n\r\n this.handleToggleRefundModal();\r\n this.props.formHasChanged(); \r\n }\r\n\r\n handleDoRefundClicked = event => {\r\n const { handleIssueRefund, appTransactions } = this.props;\r\n const latestTx = appTransactions.filter(at => at.authorizationCode !== \"\" & at.authorizationCode !== \"1\")[0];\r\n const { registrationTransactionId } = latestTx;\r\n\r\n handleIssueRefund(registrationTransactionId, { \r\n transactionId: registrationTransactionId, \r\n creditCardLastFour: this.state.creditCardLastFour \r\n });\r\n this.props.formHasChanged(); \r\n }\r\n\r\n handleDoSelectPlayerClicked = event => {\r\n const { programId, id } = this.props.match.params;\r\n const { \r\n formHasChanged,\r\n selectedPlayerDb, \r\n handleUpdateLegendWithPlayerId, \r\n handleUpdatePersonWithPlayerId \r\n } = this.props;\r\n\r\n if(programId === LEGENDS_BUSINESS_DIRECTORY_ID){ \r\n console.log('Its a legend')\r\n handleUpdateLegendWithPlayerId(programId, id, selectedPlayerDb)\r\n formHasChanged(); \r\n } else {\r\n handleUpdatePersonWithPlayerId(programId, id, selectedPlayerDb)\r\n }\r\n\r\n this.handleTogglePlayerDbSearchModal();\r\n }\r\n\r\n handleDoRemoveApplication = event => {\r\n\r\n const { handleRemoveApplication } = this.props;\r\n const { programId, id } = this.props.match.params;\r\n \r\n handleRemoveApplication(programId, id);\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleToggleRefundModal = () => {\r\n this.setState(prevState => { return { editRefundModal: !prevState.editRefundModal, creditCardLastFour: '' }});\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleToggleRemoveModal = () => {\r\n this.setState(prevState => { return { removeSubmissionModal: !prevState.removeSubmissionModal }});\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleTogglePlayerDbSearchModal = () => {\r\n const { handleClearSelectedPlayerDbValue } = this.props;\r\n handleClearSelectedPlayerDbValue();\r\n \r\n this.setState(prevState => { return { playerDbSearchModal: !prevState.playerDbSearchModal }});\r\n this.props.formHasChanged();\r\n }\r\n\r\n creditCardLastFourAdd = (e, name, value) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState[name] = value;\r\n return newState;\r\n }, () => this.props.formHasChanged())\r\n }\r\n\r\n redirectToParticipantsList = () => {\r\n const { programId } = this.props.match.params;\r\n const { handleResetParticipantDeleted } = this.props;\r\n\r\n handleResetParticipantDeleted();\r\n\r\n return programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n : \r\n \r\n }\r\n\r\n refreshParticipant = () => {\r\n const { programId, id } = this.props.match.params;\r\n const { \r\n handleGetParticipant,\r\n handleGetLegendApplication,\r\n handleListEventApplications,\r\n handleListLegendTeams,\r\n handleListAllLegendsApplications, \r\n handleListApplicationTransactions,\r\n handleListApplicationStatuses,\r\n handleResetParticipantRefunded } = this.props;\r\n \r\n this.handleToggleRefundModal();\r\n handleResetParticipantRefunded();\r\n\r\n if(programId === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n handleListAllLegendsApplications('','');\r\n handleGetLegendApplication(id);\r\n handleListLegendTeams(id);\r\n } else {\r\n handleListEventApplications(programId);\r\n handleGetParticipant(programId, id);\r\n handleListApplicationTransactions(programId, id);\r\n }\r\n\r\n handleListApplicationStatuses(programId, id);\r\n this.props.formHasChanged();\r\n\r\n return programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n : \r\n \r\n }\r\n\r\n render() {\r\n const { programId, id } = this.props.match.params;\r\n\r\n const { \r\n handleListApplicationStatuses, \r\n loading,\r\n participant,\r\n participantDeleted,\r\n resendConfirmationLoading,\r\n refundCreditCardResponseLoading, \r\n refundCreditCardSuccess,\r\n refundCreditCardTxResponse,\r\n approveApplicationResponseLoading,\r\n user\r\n } = this.props;\r\n\r\n const { appTransactions } = this.props;\r\n\r\n const { programDef } = this.props;\r\n let latestTx = typeof appTransactions === 'undefined' || appTransactions === null ? \r\n 0 : \r\n appTransactions.filter(at => at.authorizationCode !== \"\" & at.authorizationCode !== \"1\")[0];\r\n\r\n let appStatus = '';\r\n if(typeof participant !== 'undefined' && participant !== null)\r\n {\r\n appStatus = participant.registrationStatus;\r\n }\r\n handleListApplicationStatuses(programId, id);\r\n \r\n return typeof loading === 'undefined' || \r\n loading === true || \r\n typeof programDef === 'undefined' || \r\n programDef === null || \r\n typeof participant === 'undefined' || \r\n participant === null ?\r\n :\r\n participantDeleted ? this.redirectToParticipantsList() : \r\n refundCreditCardSuccess ? this.refreshParticipant() :\r\n (\r\n \r\n \r\n \r\n \r\n \r\n {`Applicant Name: ${this.toTitleCase(participant.firstName)} ${this.toTitleCase(participant.lastName)}`}
\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n {programId === LEGENDS_BUSINESS_DIRECTORY_ID ? \r\n <>\r\n \r\n \r\n Search for Player\r\n \r\n \r\n : programId === FOOTBALL_OPS_ID ? \r\n <>\r\n \r\n \r\n \r\n :\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n } \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {programId === LEGENDS_BUSINESS_DIRECTORY_ID ? 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\nconst mapStateToProps = state => {\r\n \r\n const { \r\n appTransactions,\r\n appTransactionsLoading,\r\n eventTeam,\r\n eventYear,\r\n participant, \r\n participants, \r\n participantDeleted,\r\n participantsLoading,\r\n refundCreditCardSuccess,\r\n refundCreditCardResponseLoading,\r\n refundCreditCardTxResponse, \r\n resendConfirmationLoading,\r\n approveApplicationResponseLoading,\r\n } = state.eventParticipants;\r\n\r\n const { formDef } = state.forms\r\n \r\n const {\r\n legendApplication,\r\n legendApplicationLoading\r\n } = state.legendApplication\r\n\r\n const {\r\n legendTeams \r\n } = state.legendHelpers;\r\n\r\n const { user } = state.auth;\r\n\r\n const { \r\n programComponents, \r\n programComponentsLoading,\r\n selectedPlayerDb \r\n } = state.programComponents;\r\n\r\n return {\r\n appTransactions,\r\n appTransactionsLoading,\r\n eventTeam,\r\n eventYear,\r\n legendApplication,\r\n legendTeams,\r\n participant: participant || legendApplication,\r\n participants: participant || legendApplication,\r\n programDef: formDef,\r\n participantDeleted,\r\n programComponents,\r\n loading: participantsLoading || legendApplicationLoading,\r\n refundCreditCardSuccess,\r\n refundCreditCardTxResponse,\r\n resendConfirmationLoading,\r\n selectedPlayerDb,\r\n user,\r\n approveApplicationResponseLoading\r\n }\r\n} \r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleClearSelectedPlayerDbValue: () => dispatch(eventActions.clearSelectedPlayerDbValue()),\r\n formHasChanged: () => dispatch(authActions.formHasChanged()),\r\n handleChangeLegendAppStatus: (eventId, personId, statusId) => dispatch(legendsActions.updateLegendApplicationStatus(eventId, personId, statusId)),\r\n handleChangeRegStatus: (eventId, personId, statusId) => dispatch(eventActions.updateEventApplicationStatus(eventId, personId, statusId)), \r\n hideDialog: () => dispatch(dialogActions.hideDialog()),\r\n handleGetEventForm: eventId => dispatch(formsActions.getFormDefinition(eventId)),\r\n handleGetLegendApplication: applicationId => \r\n dispatch(legendsActions.getLegendApplication(applicationId)), \r\n handleGetParticipant: ( eventId, participantId ) => \r\n dispatch(eventActions.getEventParticipantById(eventId, participantId)),\r\n handleListAllLegendsApplications: (city, state) => \r\n dispatch(legendsActions.listAllLegendsApplications(city, state)),\r\n handleListEventApplications: eventId => \r\n dispatch(eventActions.listEventParticipants(eventId)),\r\n handleListApplicationStatuses: (eventId, participantId) => \r\n dispatch(eventActions.listEventParticipantStatuses(eventId, participantId)),\r\n handleListLegendTeams: (legendId) => \r\n dispatch(legendsActions.listTeamsForLegend(legendId)),\r\n handleListApplicationTransactions: (eventId, personId) => \r\n dispatch(eventActions.listApplicationTransactions(eventId, personId)),\r\n listEventComponents: eventId => \r\n dispatch(eventActions.listEventComponents(eventId)),\r\n handleIssueRefund: (eventId, participantId) => \r\n dispatch(eventActions.postCreditCardRefund(eventId, participantId)),\r\n handleIssueVoid: (eventId, participantId) => \r\n dispatch(eventActions.postCreditCardVoid(eventId, participantId)),\r\n handleRemoveApplication: (eventId, participantId) => \r\n dispatch(eventActions.removeEventApplicant(eventId, participantId)),\r\n handleResendConfirmationEmail: (eventId, participantId) => \r\n dispatch(eventActions.resendEmail(eventId, participantId)),\r\n handleResetParticipantDeleted: () => dispatch(eventActions.resetParticipantDeleted()),\r\n handleResetParticipantRefunded: () => dispatch(eventActions.resetParticipantRefunded()),\r\n handleResetParticipantRefundedTx: () => dispatch(eventActions.resetParticipantRefundedTX()),\r\n handleUpdateLegendWithPlayerId: (eventId, personId, playerId) => \r\n dispatch(legendsActions.updateLegendWithPlayerId(eventId, personId, playerId)), \r\n handleUpdatePersonWithPlayerId: (eventId, personId, playerId) => \r\n dispatch(eventActions.updatePersonWithPlayerId(eventId, personId, playerId)),\r\n showDialog: (dialogProps, dialogType) => {\r\n dispatch(dialogActions.showDialog(dialogProps, dialogType));\r\n }\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps)(EventParticipantForm);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport IntlMessages from '../../../util/IntlMessages'\r\nimport {\r\n Button,\r\n Row,\r\n Card,\r\n CardBody,\r\n Input,\r\n FormGroup,\r\n Label,\r\n Form\r\n } from \"reactstrap\";\r\n\r\nimport Select from 'react-select';\r\n\r\nimport PropTypes from 'prop-types';\r\n\r\nconst DEFAULT_LABEL_WIDTH = 5;\r\nconst DEFAULT_FIELD_WIDTH = 7;\r\nconst COMPONENT_ID = '57deecd5-9072-411e-b226-4d60d52d5f44';\r\n\r\nconst formfields = [\r\n { \r\n fields: [\r\n { type: 'text', id: 'legendsOwnershipPercent', name: 'legendsOwnershipPercent', placeHolder: 'Legends Ownership %:', fieldWidth: 2, labelWidth: 4 }]\r\n },\r\n { \r\n fields: [\r\n {\r\n type: 'legendInvolvedDayToDay', \r\n id: 'legendInvolvedDayToDay', \r\n name: 'legendInvolvedDayToDay', \r\n placeHolder: '', \r\n fieldWidth: 2,\r\n labelWidth: 4,\r\n options: [\r\n { text: 'Yes', value: 'yes' }, \r\n { text: 'No', value: 'no' }\r\n ]\r\n }\r\n ]\r\n }\r\n];\r\n\r\nconst OtherOwnersInformation = config => {\r\n const { \r\n additionalOwners,\r\n addOwnerHandler,\r\n changeHandler, \r\n removeOwnerHandler,\r\n state \r\n } = config;\r\n\r\n const numOwners = additionalOwners.length;\r\n\r\n let table = [];\r\n\r\n if(additionalOwners.length === 0) {\r\n table.push(| No 'Other Owners' Specified |
)\r\n } else {\r\n for(let i = 0; i <= numOwners - 1; i++) {\r\n table.push({getChildTableRow(additionalOwners[i], removeOwnerHandler)}
)\r\n }\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nconst getChildTableRow = (otherOwner, changeHandler) => {\r\n\r\n let children = [];\r\n children.push(\r\n \r\n {otherOwner.ownerName} | \r\n {otherOwner.ownerTitle} | \r\n {otherOwner.ownerPercent} | \r\n | \r\n \r\n )\r\n\r\n return children;\r\n}\r\n\r\nclass EditBusinessOwnershipInformation extends Component {\r\n state = {\r\n otherOwners: [],\r\n event: null\r\n }\r\n\r\n convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n return `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;\r\n }\r\n\r\n\r\n resolveFieldValue = field => {\r\n \r\n const { dataType, name } = field;\r\n const { event } = this.state;\r\n\r\n if(event === null) return '';\r\n\r\n if (dataType === 'date') \r\n return this.convertFromISODate(event[name]);\r\n\r\n return event[name];\r\n }\r\n\r\n getConfigurationForComponent = () => {\r\n const {\r\n programComponents,\r\n programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n const configComp = programComponents.filter(pc => pc.componentId === COMPONENT_ID)[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n if(configText.trim().length > 0)\r\n return JSON.parse(configText);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n getFormInput = event => {\r\n const { id, name, value } = event.target;\r\n const myKey = typeof id === 'undefined' ? name : id;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState[myKey] = value;\r\n return newState;\r\n });\r\n }\r\n\r\n addOtherOwnerHandler = event => {\r\n \r\n if((typeof this.state.ownerName === 'undefined' || this.state.ownerName.trim().length === 0) || \r\n (typeof this.state.ownerTitle === 'undefined' || this.state.ownerTitle.trim().length === 0) || \r\n (typeof this.state.ownerPercent === 'undefined' || this.state.ownerPercent.trim().length === 0)) { \r\n \r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n if(typeof newState.ownerName === 'undefined' || newState.ownerName.trim().length === 0)\r\n newState.lblOwnerNameStatus = \"'Owner Name' required\";\r\n\r\n if(typeof newState.ownerTitle === 'undefined' || newState.ownerTitle.trim().length === 0)\r\n newState.lblOwnerTitleStatus = \"'Owner Title' required\";\r\n\r\n if(typeof newState.ownerPercent === 'undefined' || newState.ownerPercent.trim().length === 0)\r\n newState.lblOwnerPercentStatus = \"'Owner %' required\";\r\n\r\n return newState;\r\n })\r\n } else {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.otherOwners = [\r\n ...newState.otherOwners,\r\n {\r\n ownerNumber: newState.otherOwners.length + 1,\r\n ownerName: newState.ownerName,\r\n ownerTitle: newState.ownerTitle,\r\n ownerPercent: newState.ownerPercent,\r\n }\r\n ]\r\n\r\n newState.lblOwnerNameStatus = null;\r\n newState.lblOwnerTitleStatus = null;\r\n newState.lblOwnerPercentStatus = null;\r\n\r\n newState.ownerName = null;\r\n newState.ownerTitle = null;\r\n newState.ownerPercent = null;\r\n\r\n return newState;\r\n }, () => {\r\n // CLEAR THE TEXT BOXES\r\n var txtOwner = document.getElementById('ownerName');\r\n var txtTitle = document.getElementById('ownerTitle');\r\n var txtPercent = document.getElementById('ownerPercent');\r\n var lblOwnerNameStatus = document.getElementById('lblOwnerNameStatus');\r\n var lblOwnerTitleStatus = document.getElementById('lblOwnerTitleStatus');\r\n var lblOwnerPercentStatus = document.getElementById('lblOwnerPercentStatus');\r\n\r\n txtOwner.value = '';\r\n txtTitle.value = '';\r\n txtPercent.value = '';\r\n\r\n lblOwnerNameStatus.value = '';\r\n lblOwnerTitleStatus.value = '';\r\n lblOwnerPercentStatus.value = '';\r\n this.props.additionalOwnerChangeHandler(this.state.otherOwners);\r\n\r\n if (typeof this.props.additionalBusinessOwners !== 'undefined' &&\r\n this.props.additionalBusinessOwners !== null && this.props.additionalBusinessOwners.length > 0 && this.props.additionalBusinessOwners.length !== this.state.otherOwners.length) {\r\n //this.setState(prevState => {\r\n // const newState = Object.assign({}, prevState);\r\n // newState.otherOwners = this.props.additionalBusinessOwners\r\n // return newState;\r\n //});\r\n }\r\n });\r\n }\r\n }\r\n\r\n removeOtherOwner = event => {\r\n const { name } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.otherOwners = newState.otherOwners.filter(o => o.ownerNumber !== parseInt(name));\r\n\r\n return newState;\r\n }, () => this.props.additionalOwnerChangeHandler(this.state.otherOwners));\r\n }\r\n\r\n render() {\r\n // retrieve the component's customizations ... if any\r\n const { programComponentsLoading } = this.props;\r\n if(typeof programComponentsLoading == 'undefined' || programComponentsLoading) return null;\r\n\r\n if (typeof this.props.additionalOwners !== 'undefined' && this.props.additionalOwners !== null) \r\n {\r\n if (this.props.additionalOwners.length !== this.state.otherOwners.length) \r\n {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.otherOwners = this.props.additionalOwners\r\n return newState;\r\n });\r\n }\r\n }\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n Ownership Information
\r\n {\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n
);\r\n }\r\n};\r\n\r\n\r\n\r\n\r\nEditBusinessOwnershipInformation.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.forms.formDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(EditBusinessOwnershipInformation);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { injectIntl } from 'react-intl';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\nimport IntlMessages from \"../../util/IntlMessages\";\r\nimport {\r\n Row,\r\n Card,\r\n CardBody,\r\n Input,\r\n FormGroup,\r\n Label,\r\n Form \r\n} from \"reactstrap\"; \r\n\r\nimport Select from 'react-select';\r\n\r\nimport DatePicker from \"react-datepicker\";\r\nimport NumericInput from 'react-numeric-input';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport PlayerDbCollegeSearch from \"../Shared/PlayerDbCollegeSearch/PlayerDbCollegeSearch\";\r\n\r\nimport businessCertifications from '../../data/BusinessCertifications';\r\nimport businessIndustryList from '../../data/BusinessDirectoryIndustryList';\r\nimport businessDirectoryServiceArea from '../../data/BusinessDirectoryServiceArea';\r\nimport data from '../../data/Counties';\r\nimport footballAreas from '../../data/FootballAreas';\r\n\r\nconst DEFAULT_LABEL_WIDTH = 2;\r\nconst DEFAULT_FIELD_WIDTH = 10;\r\nconst COMPONENT_ID = '62E7D3B6-0F57-4C3C-B303-C7B8C2EB7B8D';\r\nconst FOOTBALL_OPS_SUBMISSION_ID = '31D531E9-1094-424C-9665-597A6B2F018B';\r\n\r\nlet formfields = [\r\n { \r\n fields: [\r\n { type: 'text', id: 'companyName', name: 'companyName' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'address1', name: 'address1' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'address2', name: 'address2' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'city', name: 'city', fieldWidth:2 },\r\n { type: 'text', id: 'stateCode', name: 'stateCode', fieldWidth:2 },\r\n { type: 'text', id: 'postalCode', name: 'postalCode', fieldWidth:2 }\r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'countrySelect', \r\n id: 'country', \r\n name: 'country', \r\n placeHolder: 'Country', \r\n fieldWidth:2,\r\n supportsOtherOption: false,\r\n options: data \r\n }\r\n ]\r\n }, \r\n {\r\n fields: [\r\n { type: 'text', id: 'companyPhone', name: 'companyPhone', placeHolder: 'example: 1(234)456-7890', fieldWidth: 4 },\r\n { type: 'text', id: 'companyEmailAddress', name: 'companyEmailAddress', fieldWidth:4 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'companyWebsite', name: 'companyWebsite', placeHolder: 'Company Website', fieldWidth: 4 },\r\n { type: 'text', id: 'numEmployees', name: 'numEmployees', placeHolder: 'Number of Employees', fieldWidth: 4, maxLength: 6 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'yearFormed', name: 'yearFormed', placeHolder: 'Year Formed', fieldWidth: 4, maxLength: 4 },\r\n { type: 'text', id: 'fedTaxId', name: 'fedTaxId', placeHolder: 'Federal Tax ID', fieldWidth:4 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessCertifications', \r\n id: 'businessCertifications', \r\n name: 'businessCertifications', \r\n placeHolder: 'Current Certifications (SELECT ALL THAT APPLY)', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: businessCertifications\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessIndustryList', \r\n id: 'businessIndustryList', \r\n name: 'businessIndustryList', \r\n placeHolder: 'Industry (SELECT ALL THAT APPLY)', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: businessIndustryList\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessDirectoryServiceArea', \r\n id: 'businessDirectoryServiceArea', \r\n name: 'businessDirectoryServiceArea', \r\n placeHolder: 'Service Area', \r\n fieldWidth:2,\r\n supportsOtherOption: false,\r\n options: businessDirectoryServiceArea\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'footballAreas', \r\n id: 'footballAreas', \r\n name: 'footballAreas', \r\n placeHolder: 'Area of Football', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: footballAreas\r\n } \r\n ]\r\n }\r\n \r\n];\r\n\r\nconst PEDropDown = configuration => {\r\n const { \r\n isMulti,\r\n items, \r\n name, \r\n onChange, \r\n props,\r\n selectedOptions,\r\n supportsOtherOption,\r\n textOnChange } = configuration;\r\n\r\n\r\n // 8(a) Business Development,Other\r\n\r\n const hasOtherOption = supportsOtherOption && \r\n typeof props[`${name}`] !== 'undefined' && \r\n props[`${name}`] !== null &&\r\n props[`${name}`].split(',').includes('Other');\r\n \r\n return (\r\n \r\n \r\n | \r\n | \r\n
\r\n {/* {supportsOtherOption && typeof props[`${name}`] !== 'undefined' && (props[`${name}`].toUpperCase() === 'OTHER') ? */}\r\n { hasOtherOption ?\r\n \r\n | \r\n \r\n\r\n | \r\n
: null}\r\n
);\r\n}\r\n\r\nclass EditCompanyInformationForm extends Component {\r\n state = {\r\n businessCertificationsOpen: false,\r\n tooltipOpen: true,\r\n errors: []\r\n }\r\n\r\n resolveFieldValue = field => {\r\n if(typeof this.props[field.id] === 'undefined' || this.props[field.id] === null) return '';\r\n return new Date(this.props[field.id]);\r\n }\r\n\r\n validateForm = field => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n let { errors } = newState;\r\n\r\n // DO WE HAVE A VALUE FOR THIS FIELD?\r\n if(typeof this.props[field] === 'undefined' || \r\n this.props[field] === null) {\r\n // NO. PUT THE FIELD IN THE ERROR COLLECTION\r\n if(errors.filter(f => f === field).length === 0) {\r\n errors.push(field);\r\n }\r\n } else {\r\n // YES. REMOVE THE FIELD FROM THE ERROR LIST\r\n if(errors.filter(f => f === field).length > 0) {\r\n errors = errors.filter(f => f !== field);\r\n }\r\n }\r\n\r\n return newState;\r\n });\r\n }\r\n\r\n getConfigurationForComponent = () => {\r\n const {\r\n programComponents,\r\n programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n const configComp = programComponents.filter(pc => pc.componentId.toUpperCase() === COMPONENT_ID)[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n if(configText.trim().length > 0)\r\n return JSON.parse(configText);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n isFieldDisabled = field => {\r\n const { playerDbRef } = this.props;\r\n \r\n if(typeof playerDbRef === 'undefined' || playerDbRef == null || typeof field === 'undefined') return false;\r\n return (typeof playerDbRef !== 'undefined' || playerDbRef !== null) && typeof playerDbRef[field.name] !== 'undefined'\r\n }\r\n\r\n render() {\r\n const {messages} = this.props.intl;\r\n const { programComponentsLoading } = this.props;\r\n\r\n if(typeof programComponentsLoading === 'undefined' || programComponentsLoading) return null;\r\n\r\n const condensedFormFields = formfields.map(ff => ff.fields[0])\r\n\r\n if(condensedFormFields.filter(ff => ff.name === 'college').length === 0)\r\n formfields = [...formfields ];\r\n\r\n const renderedFields = this.props.eventId.toUpperCase() === FOOTBALL_OPS_SUBMISSION_ID ? \r\n formfields : \r\n formfields.map((r, rKey) => {\r\n return {\r\n fields: r.fields.filter(f => !f.id.toLowerCase().includes(\"footballareas\")).map((field, fieldKey) => field)\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
)\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n\r\n };\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.forms.formDef;\r\n const { \r\n playerDbRef, \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n playerDbRef,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(injectIntl(EditCompanyInformationForm))","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { injectIntl } from 'react-intl';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\nimport IntlMessages from \"../../util/IntlMessages\";\r\nimport {\r\n Row,\r\n Card,\r\n CardBody,\r\n Input,\r\n FormGroup,\r\n Label,\r\n Form \r\n} from \"reactstrap\"; \r\n\r\nimport Select from 'react-select';\r\n\r\nimport DatePicker from \"react-datepicker\";\r\nimport NumericInput from 'react-numeric-input';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport PlayerDbCollegeSearch from \"../Shared/PlayerDbCollegeSearch/PlayerDbCollegeSearch\";\r\n\r\nimport businessCertifications from '../../data/BusinessCertifications';\r\nimport businessIndustryList from '../../data/BusinessDirectoryIndustryList';\r\nimport businessDirectoryServiceArea from '../../data/BusinessDirectoryServiceArea';\r\nimport data from '../../data/Counties';\r\nimport usstates from '../../data/USStates';\r\nimport footballAreas from '../../data/FootballAreas';\r\n\r\nconst DEFAULT_LABEL_WIDTH = 2;\r\nconst DEFAULT_FIELD_WIDTH = 10;\r\nconst COMPONENT_ID = '62E7D3B6-0F57-4C3C-B303-C7B8C2EB7B8D';\r\nconst FOOTBALL_OPS_SUBMISSION_ID = '31D531E9-1094-424C-9665-597A6B2F018B';\r\n\r\nlet formfields = [\r\n { \r\n fields: [\r\n { type: 'text', id: 'companyName', name: 'companyName' }] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'countrySelect', \r\n id: 'country', \r\n name: 'country', \r\n placeHolder: 'Country', \r\n fieldWidth:1,\r\n supportsOtherOption: false,\r\n options: data \r\n }\r\n ]\r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'address1', name: 'address1' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'address2', name: 'address2' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'city', name: 'city', fieldWidth:2 },\r\n { \r\n type: 'stateSelect', \r\n id: 'stateCode', \r\n name: 'stateCode', \r\n placeHolder: 'State', \r\n fieldWidth: 2, \r\n supportsOtherOption: false, \r\n options: usstates \r\n },\r\n { type: 'text', id: 'postalCode', name: 'postalCode', fieldWidth:2 }\r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'countrySelect', \r\n id: 'country', \r\n name: 'country', \r\n placeHolder: 'Country', \r\n fieldWidth:2,\r\n supportsOtherOption: false,\r\n options: data \r\n }\r\n ]\r\n }, \r\n {\r\n fields: [\r\n { type: 'text', id: 'companyPhone', name: 'companyPhone', placeHolder: 'example: 1(234)456-7890', fieldWidth: 4 },\r\n { type: 'text', id: 'companyEmailAddress', name: 'companyEmailAddress', fieldWidth:4 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'companyWebsite', name: 'companyWebsite', placeHolder: 'Company Website', fieldWidth: 4 },\r\n { type: 'text', id: 'numEmployees', name: 'numEmployees', placeHolder: 'Number of Employees', fieldWidth: 4, maxLength: 6 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'yearFormed', name: 'yearFormed', placeHolder: 'Year Formed', fieldWidth: 4, maxLength: 4 },\r\n { type: 'text', id: 'fedTaxId', name: 'fedTaxId', placeHolder: 'Federal Tax ID', fieldWidth:4 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessCertifications', \r\n id: 'businessCertifications', \r\n name: 'businessCertifications', \r\n placeHolder: 'Current Certifications (SELECT ALL THAT APPLY)', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: businessCertifications\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessIndustryList', \r\n id: 'businessIndustryList', \r\n name: 'businessIndustryList', \r\n placeHolder: 'Industry (SELECT ALL THAT APPLY)', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: businessIndustryList\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'businessDirectoryServiceArea', \r\n id: 'businessDirectoryServiceArea', \r\n name: 'businessDirectoryServiceArea', \r\n placeHolder: 'Service Area', \r\n fieldWidth:2,\r\n supportsOtherOption: false,\r\n options: businessDirectoryServiceArea\r\n } \r\n ]\r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'footballAreas', \r\n id: 'footballAreas', \r\n name: 'footballAreas', \r\n placeHolder: 'Area of Football', \r\n fieldWidth:4,\r\n supportsOtherOption: true,\r\n options: footballAreas\r\n } \r\n ]\r\n }\r\n \r\n];\r\n\r\nconst StateDropDown = configuration => {\r\n const { \r\n isMulti,\r\n items, \r\n name,\r\n currentCountry, \r\n onChange, \r\n props,\r\n selectedOptions,\r\n textOnChange } = configuration;\r\n\r\n\r\n // 8(a) Business Development,Other\r\n\r\n const isUSCountry = (typeof currentCountry !== 'undefined' && \r\n currentCountry !== null &&\r\n currentCountry.value != 'undefined' && \r\n currentCountry.value === 'United States of America') || \r\n (typeof currentCountry !== 'undefined' && \r\n currentCountry !== null &&\r\n currentCountry.length > 0 && \r\n currentCountry[0].value === 'United States of America');\r\n\r\n return ();\r\n}\r\n\r\nconst PEDropDown = configuration => {\r\n const { \r\n isMulti,\r\n items, \r\n name, \r\n onChange, \r\n props,\r\n selectedOptions,\r\n supportsOtherOption,\r\n textOnChange } = configuration;\r\n\r\n\r\n // 8(a) Business Development,Other\r\n\r\n const hasOtherOption = supportsOtherOption && \r\n typeof props[`${name}`] !== 'undefined' && \r\n props[`${name}`] !== null &&\r\n props[`${name}`].split(',').includes('Other');\r\n \r\n return (\r\n \r\n \r\n | \r\n | \r\n
\r\n {/* {supportsOtherOption && typeof props[`${name}`] !== 'undefined' && (props[`${name}`].toUpperCase() === 'OTHER') ? */}\r\n { hasOtherOption ?\r\n \r\n | \r\n \r\n\r\n | \r\n
: null}\r\n
);\r\n}\r\n\r\nclass EditLegendCompanyInformationForm extends Component {\r\n state = {\r\n businessCertificationsOpen: false,\r\n tooltipOpen: true,\r\n errors: []\r\n }\r\n\r\n resolveFieldValue = field => {\r\n if(typeof this.props[field.id] === 'undefined' || this.props[field.id] === null) return '';\r\n return new Date(this.props[field.id]);\r\n }\r\n\r\n validateForm = field => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n let { errors } = newState;\r\n\r\n // DO WE HAVE A VALUE FOR THIS FIELD?\r\n if(typeof this.props[field] === 'undefined' || \r\n this.props[field] === null) {\r\n // NO. PUT THE FIELD IN THE ERROR COLLECTION\r\n if(errors.filter(f => f === field).length === 0) {\r\n errors.push(field);\r\n }\r\n } else {\r\n // YES. REMOVE THE FIELD FROM THE ERROR LIST\r\n if(errors.filter(f => f === field).length > 0) {\r\n errors = errors.filter(f => f !== field);\r\n }\r\n }\r\n\r\n return newState;\r\n });\r\n }\r\n\r\n getConfigurationForComponent = () => {\r\n const {\r\n programComponents,\r\n programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n const configComp = programComponents.filter(pc => pc.componentId.toUpperCase() === COMPONENT_ID)[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n if(configText.trim().length > 0)\r\n return JSON.parse(configText);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n isFieldDisabled = field => {\r\n const { playerDbRef } = this.props;\r\n \r\n if(typeof playerDbRef === 'undefined' || playerDbRef == null || typeof field === 'undefined') return false;\r\n return (typeof playerDbRef !== 'undefined' || playerDbRef !== null) && typeof playerDbRef[field.name] !== 'undefined'\r\n }\r\n\r\n render() {\r\n const {messages} = this.props.intl;\r\n const { programComponentsLoading } = this.props;\r\n\r\n if(typeof programComponentsLoading === 'undefined' || programComponentsLoading) return null;\r\n\r\n const condensedFormFields = formfields.map(ff => ff.fields[0])\r\n\r\n if(condensedFormFields.filter(ff => ff.name === 'college').length === 0)\r\n formfields = [...formfields ];\r\n\r\n const renderedFields = this.props.eventId.toUpperCase() === FOOTBALL_OPS_SUBMISSION_ID ? \r\n formfields : \r\n formfields.map((r, rKey) => {\r\n return {\r\n fields: r.fields.filter(f => !f.id.toLowerCase().includes(\"footballareas\")).map((field, fieldKey) => field)\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
)\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n\r\n };\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.forms.formDef;\r\n const { \r\n playerDbRef, \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n playerDbRef,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(injectIntl(EditLegendCompanyInformationForm))","import React , { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { injectIntl } from 'react-intl';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\nimport IntlMessages from \"../../util/IntlMessages\";\r\nimport {\r\n Row,\r\n Card,\r\n CardBody,\r\n Input,\r\n FormGroup,\r\n Label,\r\n Form,\r\n Tooltip \r\n} from \"reactstrap\"; \r\n\r\nimport DatePicker from \"react-datepicker\";\r\nimport NumericInput from 'react-numeric-input';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport PlayerDbCollegeSearch from \"../Shared/PlayerDbCollegeSearch/PlayerDbCollegeSearch\";\r\n\r\nconst DEFAULT_LABEL_WIDTH = 2;\r\nconst DEFAULT_FIELD_WIDTH = 10;\r\nconst COMPONENT_ID = '62E7D3B6-0F57-4C3C-B303-C7B8C2EB7B8D';\r\n\r\nlet formfields = [\r\n { \r\n fields: [\r\n { type: 'text', id: 'firstName', name: 'firstName', placeHolder: 'Legal First Name' }] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'lastName', name: 'lastName', placeHolder: 'Legal Last Name' }] \r\n }, \r\n {\r\n fields: [\r\n { type: 'date', id: 'birthDate', name: 'birthDate', placeHolder: 'Birthdate', fieldWidth: 2 }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'college-select', id: 'college', name: 'college', placeHolder: 'College' }\r\n ]\r\n }\r\n];\r\n\r\nclass PlayerDbInfoForEdit extends Component {\r\n state = {\r\n tooltipOpen: true,\r\n errors: []\r\n }\r\n\r\n resolveFieldValue = field => {\r\n if(typeof this.props[field.id] === 'undefined' || this.props[field.id] === null) return '';\r\n return new Date(this.props[field.id]);\r\n }\r\n\r\n validateForm = field => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n let { errors } = newState;\r\n\r\n // DO WE HAVE A VALUE FOR THIS FIELD?\r\n if(typeof this.props[field] === 'undefined' || \r\n this.props[field] === null) {\r\n // NO. PUT THE FIELD IN THE ERROR COLLECTION\r\n if(errors.filter(f => f === field).length === 0) {\r\n errors.push(field);\r\n }\r\n } else {\r\n // YES. REMOVE THE FIELD FROM THE ERROR LIST\r\n if(errors.filter(f => f === field).length > 0) {\r\n errors = errors.filter(f => f !== field);\r\n }\r\n }\r\n\r\n return newState;\r\n });\r\n }\r\n\r\n getConfigurationForComponent = () => {\r\n const {\r\n programComponents,\r\n programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n const configComp = programComponents.filter(pc => pc.componentId.toUpperCase() === COMPONENT_ID)[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n if(configText.trim().length > 0)\r\n return JSON.parse(configText);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n isFieldDisabled = field => {\r\n if (typeof this.props[\"applicationId\"] === 'undefined' || this.props[\"applicationId\"] === null) return false;\r\n if (this.props[\"applicationId\"] === 0) return false;\r\n return this.props[\"applicationId\"] > 0;\r\n }\r\n\r\n render() {\r\n const {messages} = this.props.intl;\r\n const { programComponentsLoading } = this.props;\r\n\r\n if(typeof programComponentsLoading === 'undefined' || programComponentsLoading) return null;\r\n\r\n const condensedFormFields = formfields.map(ff => ff.fields[0])\r\n\r\n if(condensedFormFields.filter(ff => ff.name === 'college').length === 0)\r\n formfields = [...formfields ];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Please complete the following section with information on who should be listed as the company contact in the public NFL Legends Business Directory
\r\n \r\n \r\n \r\n \r\n
)\r\n }\r\n}\r\n\r\nexport default PlayerDbInfoForEdit;","import React from 'react';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport {\r\n Card,\r\n CardBody,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Row \r\n} from \"reactstrap\";\r\n\r\nconst EditMultilineTextbox = props => {\r\n return (\r\n \r\n \r\n \r\n \r\n {props.legend}
\r\n \r\n \r\n \r\n \r\n
);\r\n}\r\n\r\nexport default EditMultilineTextbox;","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { formsActions } from '../../../_actions';\r\n\r\nimport ContactListQuestion from '../../Shared/ContactListQuestion/ContactListQuestion';\r\nimport OptionDropDown from '../../Shared/OptionDropdown/OptionDropdown';\r\nimport OptionSingleSelect from '../../Shared/OptionSingleSelect/OptionSingleSelect';\r\nimport OptionMultiSelect from '../../Shared/OptionMultiSelect/OptionMultiSelect';\r\nimport MultilineText from '../../Shared/EditMultilineTextBox/EditMultilineTextBox';\r\n\r\n\r\nclass EditQuestions extends Component {\r\n\r\n getFormSectionByName(name) {\r\n return !this.props.formDef ? null : this.props.formDef.sections.filter(sect => sect.sectionName === name)[0];\r\n }\r\n \r\n getFormControlByType(question, qKey) {\r\n\r\n const { \r\n questionTypeDescription, \r\n questionText, \r\n questionName, \r\n questionId, \r\n characterLimit,\r\n configuration \r\n } = question;\r\n \r\n const options = question.questionOptions && \r\n question.questionOptions !== null ? \r\n question\r\n .questionOptions\r\n .map((opt, optKey) => {\r\n return { \r\n isTextBox: opt.isTextBox,\r\n label: opt.optionDescription,\r\n name: opt.optionName,\r\n questionId: opt.questionId,\r\n value: opt.optionId\r\n };\r\n }) : null;\r\n \r\n // make an entry to the parent's validator collection\r\n this.props.handleValidationAdd({\r\n questionId, \r\n questionText,\r\n questionTypeDescription\r\n });\r\n\r\n switch(questionTypeDescription) {\r\n case \"ContactList\":\r\n return ;\r\n\r\n case \"DropDown\":\r\n return \r\n\r\n case \"MultiSelect\":\r\n return ; \r\n\r\n case \"Radio\":\r\n\r\n return ;\r\n\r\n case \"Text\": \r\n return this.props.changeHandler({\r\n type: 'textbox',\r\n questionId: e.id,\r\n id: e.id,\r\n value: e.value,\r\n text: e.value\r\n })}\r\n name={questionName}\r\n maxLength={typeof characterLimit !== 'undefined' && characterLimit > 0 ? characterLimit : 524288}\r\n />;\r\n default:\r\n return null;\r\n } \r\n }\r\n\r\n render() {\r\n return typeof this.props.businessDesc === 'undefined' || this.props.businessDesc === null? null : (\r\n \r\n {\r\n this.props\r\n .questions \r\n .filter(q => q.questionId !== 5) \r\n .map((question, qKey) => { \r\n return (this.getFormControlByType(question, qKey));\r\n })\r\n }\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { questions } = state.forms.formDef;\r\n return {\r\n questions\r\n };\r\n} \r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateRequiredsCollection: rules => dispatch(formsActions.updateRequiredsCollection(rules))\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EditQuestions);\r\n","import _, { isError } from 'lodash';\r\nimport React, { Component } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport { formsActions, eventActions, legendsActions } from '../../../_actions';\r\nimport { injectIntl } from 'react-intl';\r\n\r\nimport axios from '../../../axios-pea';\r\n\r\nimport { getAxiosHeaders } from '../../../_helpers';\r\n\r\nimport { GET_APPLICATION_DOCUMENT, GET_LEGEND_APPLICATION, SAVE_EVENT_DATA, SAVE_EVENT_ADMINDATA } from '../../../endpoints/ServiceEndpoints';\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n FormText,\r\n Popover,\r\n PopoverBody,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport BusinessInformation from '../../BusinessInformationForm/BusinessInformationForm';\r\nimport BusinessOwnershipInformation from '../../Shared/EditBusinessOwnershipInformation/EditBusinessOwnershipInformation';\r\nimport CascadingDropDown from '../../Shared/CascadingDropDown/CascadingDropDown';\r\nimport CompanyInformation from '../../EditCompanyInformationForm/EditCompanyInformationForm';\r\nimport LegendsCompanyInformation from '../../EditLegendsCompanyInformationForm/EditLegendsCompanyInformationForm';\r\nimport FOPSCompanyInformationForm from '../../FOPSCompanyInformationForm/FOPSCompanyInformationForm';\r\nimport CompanyContactInformation from '../../CompanyContactInformationForm/CompanyContactInformationForm';\r\nimport ContactListQuestion from '../../Shared/ContactListQuestion/ContactListQuestion';\r\nimport DigitalSignature from '../../DigitalSignature/DigitalSignature';\r\nimport EventDescription from '../../EventDescription/EventDescription';\r\nimport FamilyInformation from '../../Shared/FamilyInformation/FamilyInformation';\r\nimport FileUpload from '../../FileUpload/FileUpload';\r\nimport FootballBackground from '../../Shared/FootballBackground/FootballBackground';\r\nimport FootballExperience from '../../Shared/FootballExperience/FootballExperience';\r\nimport Footer from '../../Footer/Footer';\r\nimport Header from '../../Header/Header';\r\nimport NCAAExperience from '../../Shared/NCAAExperience/NCAAExperience';\r\nimport PanelList from '../../Shared/PanelList/PanelList';\r\nimport PersonInformation from '../../PersonalInformationForm/PersonalInformationForm';\r\nimport PlayerDbInfo from '../../PlayerDbInfoForEdit/PlayerDbInfoForEdit';\r\nimport PreferredTeams from '../../Shared/PreferredTeamsDualList/PreferredTeamsDualList';\r\nimport ProposalHeader from '../../ProposalHeader/ProposalHeader';\r\n\r\nimport Questions from '../../QuestionsList/EditQuestions/EditQuestions';\r\n \r\nimport Spinner from '../../Spinner/Spinner';\r\nimport appRoutes from 'appRoutes';\r\n//import { url } from 'inspector';\r\n\r\nimport AlertMessage from '../../Shared/AlertMessage/AlertMessage';\r\n\r\nconst ALPHA_REGEX = '^[A-Za-z\\\\,\\\\.\\\\_\\\\(\\\\)\\\\-\\\\\\'\\\\s]+$';\r\nconst ALPHA_NUMERIC_REGEX = '[a-zA-Z0-9-,]+';\r\nconst COLLEGENAME_REGEX = '^[A-Za-z\\\\,\\\\.\\\\_\\\\-\\\\\\'\\\\s]+$';\r\nconst DATE_REGEX = '^(0?[1-9]|1[0-2])/(0?[1-9]|1[0-9]|2[0-9]|3[01])/\\d{4}$';\r\nconst EMAIL_REGEX = '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$';\r\nconst FILENAME_REGEX = '([a-zA-Z0-9\\s_\\\\.\\\\-\\\\(\\\\):])+(.doc|.docx|.pdf|.txt)$';\r\nconst FOOTBALL_BACKGROUND_REGEX = '^formerNFLPlayer|formerCollegePlayer|currentCollegePlayer$';\r\n// const NCAA_COLLEGE_DIVISION_REGEX = '^(?!\\s*$).+'\r\n// const NCAA_COLLEGE_CONFERENCE_REGEX = '^(?!\\s*$).+'\r\n\r\nconst NCAA_COLLEGE_DIVISION_REGEX = '^((?!select).)*$';\r\nconst NCAA_COLLEGE_CONFERENCE_REGEX = '^(?!\\s*$).';\r\n\r\nconst NOT_BLANK_REGEX = '^(?!\\s*$).+';\r\n\r\nconst PHONE_REGEX = '([+]?\\\\d{1,2}[\\\\d(.-\\\\s]?)?(\\\\d{3}[\\\\d).-]?){2}\\\\d{4}';\r\n\r\nconst NOT_EQUAL_TO_SELECT_REGEX = '^((?!select).)*$';\r\nconst NUMBER_ONLY_REGEX = '[0-9-,]+$';\r\nconst YEAR_ONLY_REGEX = '^[0-9-,]{4}?$';\r\nconst POSTAL_CODE_REGEX = '^[0-9]{5}(?:-[0-9]{4})?$';\r\nconst YES_NO_REGEX = '^yes|no$';\r\n\r\n\r\n// COMPONENT_IDS\r\nconst BUSINESS_OWNERSHIP_INFORMATION_COMPONENT_NAME = 'BusinessOwnershipInformation'\r\nconst CASCADING_DROPDOWN_INFORMATION = 'Multi Drop Down'\r\nconst COMPANY_CONTACT_INFORMATION_COMPONENT_NAME = 'CompanyContactInformation';\r\nconst COMPANY_INFORMATION_COMPONENT_NAME = 'CompanyInformation';\r\nconst FOPSCOMPANY_INFORMATION_COMPONENT_NAME = 'FOPSCompanyInformation';\r\nconst CONTACT_LIST_QUESTION = 'ContactListQuestion';\r\nconst FILE_UPLOAD_COMPONENT_NAME = 'FileUpload';\r\nconst FOOTBALL_BACKGROUND_COMPONENT_NAME = 'FootballBackground'\r\nconst FOOTBALL_EXPERIENCE_COMPONENT_NAME = 'FootballExperience'\r\nconst FAMILY_INFORMATION_COMPONENT_NAME = 'FamilyInformation'\r\nconst PERSONAL_INFORMATION = 'PersonalInformation'\r\nconst PLAYER_DB_COMPONENT_NAME = 'PlayerDbInfo'\r\nconst PLAYER_SEGMENT_COMPONENT_NAME = 'PlayerSegment'\r\nconst NCAA_EXPERIENCE_COMPONENT_NAME ='NCAAExperience'\r\n\r\nconst BUSINESS_OWNERSHIP_INFORMATION_COMPONENT_ID = 'BusinessOwnershipInformation'\r\nconst COMPANY_CONTACT_INFORMATION_COMPONENT_ID = 'CompanyContactInformation';\r\nconst COMPANY_INFORMATION_COMPONENT_ID = 'CompanyInformation';\r\nconst FAMILY_INFORMATION_COMPONENT_ID = 50000;\r\nconst FILE_UPLOAD_COMPONENT_ID = 'dc6d1cca-6df3-4b76-8e12-bc2ccf4616e6';\r\nconst PLAYING_HISTORY_COMPONENT_ID = 50005;\r\nconst LEGENDS_BUSINESS_DIRECTORY_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96';\r\nconst FOOTBALL_OPS_SUBMISSION_ID = '31D531E9-1094-424C-9665-597A6B2F018B';\r\n\r\nconst convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n}\r\n\r\nconst personalInfoRequireds = [\r\n { name: 'firstName', friendlyName: 'First Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'lastName', friendlyName: 'Last Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'emailAddress', friendlyName: 'Email', isValid: false, regex: EMAIL_REGEX },\r\n { name: 'birthDate', friendlyName: 'Birth Date', isValid: false, regex: DATE_REGEX },\r\n { name: 'primaryPhone', friendlyName: 'Primary Phone', isValid: false, regex: PHONE_REGEX },\r\n { name: 'address1', friendlyName: 'Address 1', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'city', friendlyName: 'City', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'stateCode', friendlyName: 'State', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'postalCode', friendlyName: 'Zip Code', isValid: false, regex: POSTAL_CODE_REGEX },\r\n { name: 'country', friendlyName: 'Country', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX },\r\n { name: 'college', friendlyName: 'College', isValid: false, regex: NOT_BLANK_REGEX } \r\n];\r\n\r\nconst companyInformationRequireds = [\r\n { name: 'companyName', friendlyName: 'Company Name', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'address1', friendlyName: 'Address 1', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'city', friendlyName: 'City', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'stateCode', friendlyName: 'State', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'countrySelect', friendlyName: 'Country', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX },\r\n { name: 'postalCode', friendlyName: 'Zip Code', isValid: false, regex: POSTAL_CODE_REGEX },\r\n { name: 'companyPhone', friendlyName: 'Company Phone Number', isValid: false, regex: PHONE_REGEX },\r\n { name: 'companyEmailAddress', friendlyName: 'Company Email', isValid: false, regex: EMAIL_REGEX },\r\n { name: 'companyWebsite', friendlyName: 'Company Website', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'numEmployees', friendlyName: 'Number of Employees', isValid: false, regex: NUMBER_ONLY_REGEX },\r\n { name: 'yearFormed', friendlyName: 'Year Formed', isValid: false, regex: YEAR_ONLY_REGEX },\r\n { name: 'fedTaxId', friendlyName: 'Fed Tax Id', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'businessCertifications', friendlyName: 'Business Certifications', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'businessIndustryList', friendlyName: 'Business Industry', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'businessDirectoryServiceArea', friendlyName: 'Service Area', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'footballAreas', friendlyName: 'Area of Football', isValid: false, regex: ALPHA_NUMERIC_REGEX }\r\n];\r\n\r\nconst fopsCompanyInformationRequireds = [\r\n { name: 'firstName', friendlyName: 'First Name', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'lastName', friendlyName: 'Last Name', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'address1', friendlyName: 'Address 1', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'city', friendlyName: 'City', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'stateCode', friendlyName: 'State', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'countrySelect', friendlyName: 'Country', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX },\r\n { name: 'postalCode', friendlyName: 'Zip Code', isValid: false, regex: POSTAL_CODE_REGEX },\r\n { name: 'companyPhone', friendlyName: 'Company Phone Number', isValid: false, regex: PHONE_REGEX },\r\n { name: 'companyEmailAddress', friendlyName: 'Company Email', isValid: false, regex: EMAIL_REGEX }\r\n];\r\n\r\nconst companyContactInformationRequireds = [\r\n { name: 'contactFirstName', friendlyName: 'Contact First Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'contactLastName', friendlyName: 'Contact Last Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'contactTitle', friendlyName: 'Contact Title', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'contactPrimaryPhone', friendlyName: 'Contact Phone Number', isValid: false, regex: PHONE_REGEX },\r\n { name: 'contactEmailAddress', friendlyName: 'Contact Email', isValid: false, regex: EMAIL_REGEX },\r\n];\r\n\r\nconst businessOwnershipRequireds = [\r\n { name: 'legendsOwnershipPercent', friendlyName: 'Business Ownership%', isValid: false, regex: NUMBER_ONLY_REGEX },\r\n { name: 'legendInvolvedDayToDay', friendlyName: 'Legend Involved Day-to-Day', isValid: false, regex: ALPHA_NUMERIC_REGEX }, \r\n];\r\n\r\nconst playerDbRequireds = [\r\n { name: 'firstName', friendlyName: 'Legend First Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'lastName', friendlyName: 'Legend Last Name', isValid: false, regex: ALPHA_REGEX },\r\n { name: 'college', friendlyName: 'College', isValid: false, regex: NOT_BLANK_REGEX },\r\n { name: 'birthDate', friendlyName: 'Birth Date', isValid: false, regex: DATE_REGEX }\r\n];\r\n\r\nclass EventParticipantEdit extends Component {\r\n state={\r\n eventRegistrationId: null,\r\n popoverOpen: false,\r\n requiredFields: [],\r\n saveClicked: false,\r\n hasLoadedPlayerDb: false,\r\n configuredValidators: [],\r\n isError: false,\r\n errMessage: \"\",\r\n selectedState: [],\r\n selectedCountry: [],\r\n selectedCertifications: [],\r\n selectedIndustries: [],\r\n selectedBusinessAreas: [],\r\n selectedInvolvedDay: [],\r\n additionalOwners: [],\r\n isInitialValidation: false,\r\n businessCertificationsOther: '',\r\n businessIndustryListOther: ''\r\n }\r\n \r\n componentDidMount() {\r\n const { programId, id } = this.props.match.params;\r\n\r\n const { \r\n getEventForm, \r\n listEventComponents\r\n } = this.props;\r\n\r\n getEventForm(programId);\r\n listEventComponents(programId);\r\n\r\n if(programId === LEGENDS_BUSINESS_DIRECTORY_ID) {\r\n this.loadLegendApplication(id);\r\n } \r\n }\r\n \r\n loadLegendApplication = (id) => {\r\n const { setCollegeInfo, eventId } = this.props;\r\n const { programId } = this.props.match.params;\r\n axios.get( \r\n GET_LEGEND_APPLICATION(id), \r\n getAxiosHeaders()).then((resp) => { \r\n const applicant = resp.data;\r\n console.log(applicant);\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.applicationId = applicant.applicationId;\r\n newState.legendId = applicant.legendId;\r\n newState.playerId = applicant.playerId;\r\n newState.firstName = applicant.firstName;\r\n newState.lastName = applicant.lastName;\r\n newState.birthDate = convertFromISODate(applicant.birthDate);\r\n newState.college = applicant.college;\r\n newState.hasLoadedPlayerDb = true;\r\n newState.companyName = applicant.companyName;\r\n newState.address1 = applicant.address1;\r\n newState.address2 = applicant.address2;\r\n newState.city = applicant.city;\r\n newState.stateCode = applicant.state;\r\n newState.stateCodeSelect = applicant.country === 'United States of America' ? applicant.state : null;\r\n newState.selectedState = applicant.country === 'United States of America' ? applicant.state.split(',').map((i,k) => { return { value: i, label: i}}) : [];\r\n newState.countrySelect = applicant.country;\r\n newState.selectedCountry = applicant.country.split(',').map((i,k) => { return { value: i, label: i}});\r\n newState.postalCode = applicant.zipCode;\r\n newState.companyPhone = applicant.phoneNumber;\r\n newState.companyEmailAddress = applicant.primaryContactEmail;\r\n newState.companyWebsite = applicant.website;\r\n newState.numEmployees = applicant.numberOfEmployees;\r\n newState.yearFormed = applicant.yearFormed;\r\n newState.fedTaxId = applicant.federalTaxId;\r\n newState.businessCertifications = applicant.businessCertifications.split(',').map((i,k) => { return i.includes('Other: ') ? 'Other': i }).join();\r\n newState.selectedCertifications = applicant.businessCertifications.split(',').map((i,k) => { return { value: i.includes('Other: ') ? i.substring(0, 5) : i, label: i.includes('Other: ') ? i.substring(0, 5) : i}});\r\n newState.businessCertificationsOther = applicant.businessCertifications.split(',').filter((certification) => { \r\n return certification.includes('Other: ');}).map((i,k) => { return i.replace(\"Other: \", \"\")}).join();\r\n newState.businessIndustryList = applicant.industry.split(',').map((i,k) => { return i.includes('Other: ')? 'Other': i}).join();\r\n newState.selectedIndustries = applicant.industry.split(',').map((i,k) => { return { value: i.includes('Other: ') ? i.substring(0, 5) : i, label: i.includes('Other: ') ? i.substring(0, 5) : i}});\r\n newState.businessIndustryListOther = applicant.industry.split(',').filter((industry) => { \r\n return industry.includes('Other: ');}).map((i,k) => { return i.replace(\"Other: \", \"\")}).join();\r\n newState.businessDirectoryServiceArea = applicant.serviceArea;\r\n newState.selectedBusinessAreas = applicant.serviceArea.split(',').filter(function(businessarea) { \r\n return businessarea !== businessarea.includes('Other: ');}).map((i,k) => { return { value: i, label: i}});\r\n newState.footballAreas = applicant.footballAreas;\r\n newState.legendsOwnershipPercent = applicant.ownershipPercentageA;\r\n newState.legendInvolvedDayToDay = applicant.legendInvolvedDayToDay;\r\n newState.selectedInvolvedDay = applicant.legendInvolvedDayToDay.split(',').filter(function(legendInvolve) { \r\n return legendInvolve !== legendInvolve.includes('Other: ');}).map((i,k) => { return { value: i, label: i.charAt(0).toUpperCase() + i.slice(1).toLowerCase()}});\r\n newState.additionalOwners = this.getotherOwners(applicant.ownershipPercentageBName, applicant.ownershipPercentageBTitle, applicant.ownershipPercentageB, applicant.ownershipPercentageCName, applicant.ownershipPercentageCTitle, applicant.ownershipPercentageC);\r\n newState.contactFirstName = applicant.primaryContactFirstName;\r\n newState.contactLastName = applicant.primaryContactLastName;\r\n newState.contactTitle = applicant.primaryContactTitle;\r\n newState.contactPrimaryPhone = applicant.primaryContactPhone;\r\n newState.contactEmailAddress = applicant.primaryContactEmail;\r\n newState.businessDescription = applicant.businessDescription;\r\n newState.footballArea = '';\r\n newState.footballAreaOther = '';\r\n return newState; }, () => { \r\n if (typeof this.props.formDef !== 'undefined' && this.props.formDef !== null && (typeof this.props.playerDbRef === 'undefined' || this.props.playerDbRef === null)) {\r\n //this.populatePlayerDbInfo(prevProps.playerDbRef);\r\n this.loadPlayerDbInfo(this.state.playerId, programId, 'na');\r\n }\r\n setCollegeInfo(this.state.college); \r\n });\r\n });\r\n }\r\n\r\n loadPlayerDbInfo = (playerId, eventId, eventYear) => {\r\n const { getPlayerDbInfo } = this.props; \r\n getPlayerDbInfo(playerId, eventId, eventYear);\r\n }\r\n\r\n populatePlayerDbInfo = playerDbRef => {\r\n const { setCollegeInfo } = this.props;\r\n\r\n const playerDbFieldDefs = [\r\n { fieldName: 'playerId', fieldValue: playerDbRef.playerId},\r\n { fieldName: 'footballName', fieldValue: ''},\r\n { fieldName: 'positionAbbr', fieldValue: playerDbRef.footballName},\r\n { fieldName: 'entryYear', fieldValue: playerDbRef.entryYear},\r\n { fieldName: 'currentClubFullName', fieldValue: playerDbRef.currentClubFullName},\r\n { fieldName: 'statusShortDescription', fieldValue: playerDbRef.statusShortDescription},\r\n { fieldName: 'accruedSeasons', fieldValue: playerDbRef.accruedSeasons},\r\n { fieldName: 'nflExperience', fieldValue: playerDbRef.nflExperience},\r\n { fieldName: 'age', fieldValue: playerDbRef.age},\r\n { fieldName: 'firstName', fieldValue: playerDbRef.firstName},\r\n { fieldName: 'lastName', fieldValue: playerDbRef.lastName},\r\n { fieldName: 'birthDate', fieldValue: convertFromISODate(playerDbRef.birthDate)},\r\n { fieldName: 'college', fieldValue: playerDbRef.college},\r\n { fieldName: 'hasLoadedPlayerDb', fieldValue: true},\r\n ];\r\n\r\n // if(typeof playerDbRef !== 'undefined' && playerDbRef !== null && !this.state.hasLoadedPlayerDb ) {\r\n this.updateStateWithPlayerDbValues(playerDbFieldDefs);\r\n setCollegeInfo(playerDbRef.college);\r\n // }\r\n }\r\n\r\n updateFormStat = () => {\r\n if (this.state.requiredFields !== 'undefined' && this.state.requiredFields !== null)\r\n {\r\n const isInvalid = this.state.requiredFields.filter(rf => rf.isValid === false).length > 0;\r\n if (isInvalid)\r\n {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n \r\n const reqFields = this.state.requiredFields.filter(rf => rf.isValid === false);\r\n reqFields.map(field => field.isValid = this.validateField(field.friendlyName === 'Business Overvi...' ? field.friendlyName : field.name.replace(/ /g, '_'), new RegExp(field.regex)));\r\n newState.requiredFields = reqFields;\r\n newState.isInitialValidation = true;\r\n return newState;\r\n });\r\n }\r\n }\r\n }\r\n\r\n validateField = (fieldname, re) => {\r\n return fieldname === 'footballAreas' ? true : (fieldname === 'birthDate' ? this.isValidDate(this.state[fieldname]) : fieldname === 'birthDate' ? true : fieldname === 'collegeDivision' && this.state[fieldname] === 'NA' ? true : fieldname === 'Business Overvi...' ? re.test(this.state['businessDescription']) : re.test(this.state[fieldname]));\r\n }\r\n\r\n getotherOwners = (ownerNameB, ownerTitleB, ownerPercentageB, ownerNameC, ownerTitleC, ownerPercentageC) => {\r\n return ownerNameB !== null && ownerTitleB !== null && ownerPercentageB != null && \r\n ownerNameC !== null && ownerTitleC !== null && ownerPercentageC != null ? ([{\r\n ownerNumber: 1,\r\n ownerName: ownerNameB,\r\n ownerTitle: ownerTitleB,\r\n ownerPercent: ownerPercentageB\r\n }, \r\n {\r\n ownerNumber: 2,\r\n ownerName: ownerNameC,\r\n ownerTitle: ownerTitleC,\r\n ownerPercent: ownerPercentageC\r\n }]) : ownerNameB !== null && ownerTitleB !== null && ownerPercentageB != null ? ([{\r\n ownerNumber: 1,\r\n ownerName: ownerNameB,\r\n ownerTitle: ownerTitleB,\r\n ownerPercent: ownerPercentageB\r\n }]) : ([]);\r\n }\r\n\r\n truncateOther = (s) => {\r\n return s.includes('Other: ') ? (s.substring(0, 5)) : (s)\r\n }\r\n\r\n checkOtherValue = (s) => {\r\n return s;\r\n }\r\n\r\n popoverToggle = () => {\r\n this.setState(prevState => {\r\n const oldState = Object.assign({}, prevState)\r\n oldState.popoverOpen = !oldState.popoverOpen\r\n return oldState;\r\n })\r\n }\r\n\r\n getFormSectionByName(name) {\r\n return !this.props.formDef ? null : this.props.formDef.sections.filter(sect => sect.sectionName === name)[0];\r\n }\r\n\r\n configureValidators = componentName => { \r\n if(componentName === COMPANY_INFORMATION_COMPONENT_NAME)\r\n this.addCompanyInformationToValidator();\r\n \r\n if(componentName === FOPSCOMPANY_INFORMATION_COMPONENT_NAME)\r\n this.addFOPSCompanyInformationToValidator();\r\n\r\n if(componentName === COMPANY_CONTACT_INFORMATION_COMPONENT_NAME)\r\n this.addCompanyContactInformationToValidator();\r\n\r\n if(componentName === BUSINESS_OWNERSHIP_INFORMATION_COMPONENT_NAME)\r\n this.addBusinessOwnershipInformationToValidator();\r\n\r\n if(componentName === PERSONAL_INFORMATION){\r\n this.addPersonalInformationToValidator();\r\n this.addOptionalPersonFieldsToValidator();\r\n }\r\n\r\n if(componentName === PLAYER_DB_COMPONENT_NAME){\r\n this.addPlayerDbToValidator();\r\n }\r\n\r\n if(componentName === FILE_UPLOAD_COMPONENT_NAME)\r\n this.addFileUploadToValidator();\r\n\r\n if(componentName === FOOTBALL_BACKGROUND_COMPONENT_NAME)\r\n this.addFootballBackgroundFieldsToValidator();\r\n\r\n if(componentName === FOOTBALL_EXPERIENCE_COMPONENT_NAME)\r\n this.addFootballExperienceFieldsToValidator();\r\n\r\n if(componentName === NCAA_EXPERIENCE_COMPONENT_NAME)\r\n this.addNCAAExperienceFieldsValidator();\r\n }\r\n\r\n getFormComponentByName(component, componentKey) {\r\n const title = this.props.title || \"NFLLegendsDirectory\";\r\n const { \r\n componentName, \r\n componentText, \r\n startDate, \r\n endDate, \r\n applicationDueDate, \r\n eventName,\r\n programDisplayName } = component;\r\n \r\n const { programId } = this.props.match.params;\r\n const eventId = programId;\r\n \r\n const eventDisplayName = (typeof programDisplayName !== 'undefined' && programDisplayName !== null) && \r\n programDisplayName.trim().length > 0 ? \r\n programDisplayName : \r\n eventName \r\n\r\n const { playerDBRef } = this.props;\r\n\r\n // load validators here\r\n this.configureValidators(componentName);\r\n\r\n switch(componentName) {\r\n case \"Banner\": \r\n return \r\n case \"ContactListQuestion\":\r\n return \r\n case \"Multi Drop Down\":\r\n return \r\n\r\n case \"PlayerDbInfo\":\r\n return \r\n case \"CompanyInformation\":\r\n\r\n return \r\n\r\n case \"FOPSCompanyInformation\":\r\n\r\n return \r\n\r\n case \"CompanyContactInformation\":\r\n\r\n return \r\n\r\n case \"BusinessOwnershipInformation\":\r\n\r\n return \r\n case \"DigitalSignature\":\r\n return \r\n case \"EventDescription\":\r\n return \r\n case \"FileUpload\": \r\n this.addFileUploadToValidator();\r\n\r\n return ;\r\n\r\n case \"FamilyInformation\":\r\n this.addQuestionToValidator({\r\n questionId: component.questionId,\r\n questionText: 'Family Information'\r\n });\r\n return ;\r\n\r\n case \"FootballBackground\": \r\n return ;\r\n\r\n case \"FootballExperience\": \r\n return ;\r\n\r\n case \"MailtoComponent\":\r\n return eventId.toUpperCase() === FOOTBALL_OPS_SUBMISSION_ID && this.props.formDef.footerMessage != \"\" && this.props.formDef.footerMessage !=\"
\" ? : null;\r\n\r\n case \"PlayerSegment\":\r\n this.addQuestionToValidator({\r\n questionId: component.questionId,\r\n questionText: 'Playing History'\r\n });\r\n return this.getPlayerSegmentChange(e)}\r\n key={componentKey} \r\n {...this.state}\r\n />;\r\n \r\n case \"PersonalInformation\":\r\n\r\n return ;\r\n\r\n case \"PreferredTeams\":\r\n return \r\n \r\n case \"ProposalHeader\":\r\n return \r\n\r\n case NCAA_EXPERIENCE_COMPONENT_NAME:\r\n return \r\n\r\n case \"QuestionsComponent\": \r\n return ;\r\n\r\n default:\r\n return null; \r\n } \r\n }\r\n\r\n getRegexByQuestionType = questionTypeDescription => {\r\n\r\n if(typeof questionTypeDescription === 'undefined')\r\n return ALPHA_NUMERIC_REGEX;\r\n\r\n switch(questionTypeDescription.toUpperCase()) {\r\n case \"DROPDOWN\":\r\n return NOT_EQUAL_TO_SELECT_REGEX;\r\n case \"TEXT\":\r\n case \"MULTISELECT\":\r\n case \"RADIO\":\r\n default:\r\n return ALPHA_NUMERIC_REGEX;\r\n }\r\n }\r\n \r\n addCompanyInformationToValidator = () => {\r\n const hasCompInfoProps = this.state.configuredValidators.filter(rf => rf === COMPANY_INFORMATION_COMPONENT_NAME).length > 0\r\n\r\n if(!hasCompInfoProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = companyInformationRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true;\r\n })\r\n\r\n newState.requiredFields = [\r\n ...newState.requiredFields, \r\n ...companyInformationRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(COMPANY_INFORMATION_COMPONENT_NAME)\r\n return newState;\r\n }\r\n // () => console.log(this.state)\r\n );\r\n }\r\n }\r\n\r\n addFOPSCompanyInformationToValidator = () => {\r\n const hasFOPSCompInfoProps = this.state.configuredValidators.filter(rf => rf === FOPSCOMPANY_INFORMATION_COMPONENT_NAME).length > 0\r\n\r\n if(!hasFOPSCompInfoProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = fopsCompanyInformationRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true;\r\n })\r\n\r\n newState.requiredFields = [\r\n ...newState.requiredFields, \r\n ...fopsCompanyInformationRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(FOPSCOMPANY_INFORMATION_COMPONENT_NAME)\r\n return newState;\r\n }\r\n // () => console.log(this.state)\r\n );\r\n }\r\n }\r\n\r\n addCompanyContactInformationToValidator = () => {\r\n const hasCompInfoProps = this.state.configuredValidators.filter(rf => rf === COMPANY_CONTACT_INFORMATION_COMPONENT_NAME).length > 0\r\n\r\n if(!hasCompInfoProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = companyContactInformationRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true \r\n })\r\n\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...companyContactInformationRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(COMPANY_CONTACT_INFORMATION_COMPONENT_NAME)\r\n return newState;\r\n });\r\n } \r\n }\r\n\r\n addBusinessOwnershipInformationToValidator = () => {\r\n const hasBusinessOwnershipProps = this.state.configuredValidators.filter(rf => rf === BUSINESS_OWNERSHIP_INFORMATION_COMPONENT_NAME).length > 0\r\n\r\n if(!hasBusinessOwnershipProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = businessOwnershipRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true \r\n })\r\n\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...businessOwnershipRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(BUSINESS_OWNERSHIP_INFORMATION_COMPONENT_NAME)\r\n return newState;\r\n });\r\n }\r\n }\r\n\r\n addPersonalInformationToValidator = () => {\r\n const hasPiProps = this.state.configuredValidators.filter(rf => rf === PERSONAL_INFORMATION).length > 0\r\n\r\n if(!hasPiProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = personalInfoRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true \r\n })\r\n\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...personalInfoRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(PERSONAL_INFORMATION)\r\n return newState;\r\n });\r\n }\r\n }\r\n\r\n addPlayerDbToValidator = () => {\r\n const hasPlayerDbProps = this.state.configuredValidators.filter(rf => rf === PLAYER_DB_COMPONENT_NAME).length > 0\r\n\r\n if(!hasPlayerDbProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = playerDbRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true \r\n })\r\n\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...playerDbRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(PLAYER_DB_COMPONENT_NAME)\r\n return newState;\r\n });\r\n }\r\n }\r\n\r\n addQuestionToValidator = question => {\r\n const { questionTypeDescription } = question;\r\n const gotField = this.state.requiredFields.filter(rf => rf.name === question.questionId).length === 1;\r\n const newRequireds = [];\r\n\r\n if (!gotField) {\r\n const regexExpForType = this.getRegexByQuestionType(questionTypeDescription);\r\n newRequireds.push(\r\n this.createRequiredFieldRule(\r\n {\r\n name: question.questionId, \r\n friendlyName: `${question.questionText.substring(0,15)}...`,\r\n isValid: false, \r\n regex: regexExpForType\r\n }\r\n ))\r\n };\r\n\r\n if(newRequireds.length > 0){\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState); \r\n\r\n if(typeof newState.requiredFields !== 'undefined' && newState.requiredFields !== null) {\r\n newState.requiredFields = [\r\n ...newState.requiredFields, \r\n ...newRequireds]\r\n }\r\n return newState;\r\n });\r\n }\r\n }\r\n\r\n addFootballExperienceFieldsToValidator = () => {\r\n const hasFBExpProps = this.state.configuredValidators.filter(rf => rf === FOOTBALL_EXPERIENCE_COMPONENT_NAME).length > 0\r\n\r\n const footballExperienceRequireds = [\r\n { name: 'currentFormerFootballPlayer', friendlyName: 'Are You a Current or Former Football Player?', isValid: false, regex: YES_NO_REGEX }\r\n ];\r\n\r\n if(!hasFBExpProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...footballExperienceRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n return newState;\r\n });\r\n }\r\n }\r\n \r\n addNCAAExperienceFieldsValidator = () => {\r\n const hasNCAAExpProps = this.state.configuredValidators.filter(rf => rf === NCAA_EXPERIENCE_COMPONENT_NAME).length > 0\r\n\r\n const ncaaExperienceRequireds = [\r\n { name: 'collegeDivision', friendlyName: 'Division', isValid: false, regex: NCAA_COLLEGE_DIVISION_REGEX },\r\n { name: 'conferenceCurrentlyCoachingIn', friendlyName: 'Conference', isValid: false, regex: NCAA_COLLEGE_CONFERENCE_REGEX }\r\n ];\r\n\r\n if(!hasNCAAExpProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...ncaaExperienceRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n newState.configuredValidators.push(NCAA_EXPERIENCE_COMPONENT_NAME)\r\n return newState;\r\n });\r\n }\r\n }\r\n \r\n addFootballBackgroundFieldsToValidator = () => {\r\n const hasFBExpProps = this.state.configuredValidators.filter(rf => rf === FOOTBALL_BACKGROUND_COMPONENT_NAME).length > 0\r\n\r\n const footballBackgroundRequireds = [\r\n { name: 'currentFormerFootballPlayer', friendlyName: 'Please select Football Background?', isValid: false, regex: FOOTBALL_BACKGROUND_REGEX }\r\n ];\r\n\r\n if(!hasFBExpProps) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.requiredFields = [\r\n ...prevState.requiredFields, \r\n ...footballBackgroundRequireds.map(field => this.createRequiredFieldRule(field))\r\n ];\r\n\r\n newState.configuredValidators.push(FOOTBALL_BACKGROUND_COMPONENT_NAME)\r\n return newState;\r\n },\r\n () => console.log(this.state)\r\n );\r\n }\r\n } \r\n\r\n getFootballBackgroundChange = event => {\r\n\r\n const { name, value, id } = event.target;\r\n\r\n const formerNFLPlayerFields = [\r\n {name:'lastTeamPlayedFor', friendlyName: 'Last NFL Club Played For?', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX},\r\n {name:'lastSeasonPlayedInNFL', friendlyName: 'Last Season Played?', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX},\r\n {name:'numYearsPlayedInNFL', friendlyName: 'Number of Years Played?', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX} \r\n ]\r\n\r\n const formerCollegePlayerFields = [\r\n {name:'schoolPlayedFor', friendlyName: 'School Played For?', isValid: false, regex: ALPHA_REGEX}, \r\n {name:'lastSeasonPlayedInCollege', friendlyName: 'Last Season Played?', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX},\r\n {name:'headCoachPlayedFor', friendlyName: 'Head Coach(es) Played For?', isValid: false, regex: ALPHA_NUMERIC_REGEX}\r\n ];\r\n \r\n const currentlyInCollegeFields = [\r\n {name:'schoolWorkFor', friendlyName: 'School?', isValid: false, regex: ALPHA_REGEX}, \r\n {name:'jobTitle', friendlyName: 'Job Title?', isValid: false, regex: ALPHA_REGEX},\r\n {name:'yearsOfExperience', friendlyName: 'Years of Experience?', isValid: false, regex: NUMBER_ONLY_REGEX}\r\n ];\r\n\r\n // if the user selected 'yes' to currentFormerFootballPlayer, add the whichLeague rule\r\n if(name === 'footballExperience' && value === 'formerNFLPlayer') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = [\r\n ...formerNFLPlayerFields,\r\n ...formerCollegePlayerFields,\r\n ...currentlyInCollegeFields\r\n ].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...formerNFLPlayerFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n\r\n }\r\n\r\n if(name === 'footballExperience' && value === 'formerCollegePlayer') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = [\r\n ...formerNFLPlayerFields,\r\n ...formerCollegePlayerFields,\r\n ...currentlyInCollegeFields\r\n ].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...formerCollegePlayerFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n\r\n }\r\n\r\n if(name === 'footballExperience' && value === 'currentCollegePlayer') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = [\r\n ...formerNFLPlayerFields,\r\n ...formerCollegePlayerFields,\r\n ...currentlyInCollegeFields\r\n ].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...currentlyInCollegeFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n }\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n oldState[id] = value;\r\n\r\n const requiredField = oldState.requiredFields.filter(rf => rf.name === id);\r\n\r\n if(typeof requiredField[0] !== 'undefined' && \r\n requiredField[0] !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n var re = new RegExp(requiredField[0].regex);\r\n requiredField[0].isValid = re.test(value);\r\n }\r\n\r\n return oldState;\r\n });\r\n }\r\n\r\n getFootballExperienceChange = event => {\r\n\r\n const { name, value, id } = event.target;\r\n\r\n const whichLeagueReqFields = [\r\n {name:'whichLeague', friendlyName: 'Which League?', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX}\r\n ]\r\n\r\n const nflRequiredFields = [\r\n {name:'lastTeamPlayedFor', friendlyName: 'Last Team Played For', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX}, \r\n {name:'lastYearPlayedInNFL', friendlyName: 'Last Year Played', isValid: false, regex: NUMBER_ONLY_REGEX},\r\n {name:'numYearsPlayedInNFL', friendlyName: 'Number of Years Played', isValid: false, regex: NUMBER_ONLY_REGEX}\r\n ];\r\n \r\n const otherLeagueRequiredFields = [\r\n {name:'otherLeague', friendlyName: 'Other League?', isValid: false, regex: ALPHA_REGEX}\r\n ];\r\n\r\n // if the user selected 'yes' to currentFormerFootballPlayer, add the whichLeague rule\r\n if(name === 'currentFormerFootballPlayer' && value === 'yes') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = whichLeagueReqFields.map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...whichLeagueReqFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n\r\n }\r\n\r\n // if the user selected 'no' to current football player question, remove the required fields\r\n if(name === 'currentFormerFootballPlayer' && value === 'no') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = [\r\n ...whichLeagueReqFields, \r\n ...nflRequiredFields,\r\n ...otherLeagueRequiredFields\r\n ].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n return oldState;\r\n })\r\n\r\n }\r\n\r\n // if the user selects 'NFL' add the required league fields\r\n if(name === 'whichLeague' && value === 'NFL') {\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...nflRequiredFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n } else if (name === 'whichLeague') {\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = [\r\n ...nflRequiredFields, \r\n ...otherLeagueRequiredFields].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n return oldState;\r\n })\r\n }\r\n\r\n if(name === 'whichLeague' && value === 'other') {\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n const names = nflRequiredFields.map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...otherLeagueRequiredFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return oldState;\r\n })\r\n }\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n oldState[id] = value;\r\n\r\n const requiredField = oldState.requiredFields.filter(rf => rf.name === id);\r\n\r\n if(typeof requiredField[0] !== 'undefined' && \r\n requiredField[0] !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n var re = new RegExp(requiredField[0].regex);\r\n requiredField[0].isValid = re.test(value);\r\n }\r\n\r\n return oldState;\r\n });\r\n }\r\n\r\n\r\n addOptionalPersonFieldsToValidator = () => {\r\n\r\n const { \r\n programComponents,\r\n programComponentsLoading,\r\n } = this.props;\r\n\r\n const hasPersonProps = this.state.requiredFields.filter(rf => rf.name === 'numYearsPlayed').length > 0 || \r\n this.state.requiredFields.filter(rf => rf.name === 'lastYearPlayed').length > 0 ||\r\n this.state.requiredFields.filter(rf => rf.name === 'mensShirtSize').length > 0\r\n \r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n\r\n let config = '';\r\n\r\n const configComp = programComponents.filter(pc => pc.displayName.toUpperCase() === PERSONAL_INFORMATION.toUpperCase())[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n if(configText.trim().length > 0)\r\n config = JSON.parse(configText);\r\n\r\n if((config.requireNumYearsPlayed || config.requireShirtSize) && !hasPersonProps) {\r\n this.setState(prevState => {\r\n\r\n const numYearsPlayedRequireds = [\r\n { name: 'numYearsPlayed', friendlyName: 'Number of Years Played', isValid: false, regex: NUMBER_ONLY_REGEX },\r\n { name: 'lastYearPlayed', friendlyName: 'Last Year Played', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX }\r\n ];\r\n \r\n const shirtSizeRequireds = [\r\n { name: 'mensShirtSize', friendlyName: 'Mens Shirt Size', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX }\r\n ];\r\n \r\n const newState = Object.assign({}, prevState);\r\n\r\n // add optional fields for this component\r\n if(config.requireNumYearsPlayed)\r\n newState.requiredFields = [\r\n ...newState.requiredFields, \r\n ...numYearsPlayedRequireds.map(field => this.createRequiredFieldRule(field))];\r\n\r\n if(config.requireShirtSize && \r\n this.state.requiredFields.filter(rf => rf.name === 'mensShirtSize').length === 0)\r\n newState.requiredFields = [\r\n ...newState.requiredFields, \r\n ...shirtSizeRequireds.map(field => this.createRequiredFieldRule(field))];\r\n\r\n return newState;\r\n })\r\n }\r\n } \r\n } \r\n\r\n addCascadingDropDownToValidator =() => {\r\n const { \r\n programComponents,\r\n programComponentsLoading,\r\n } = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n let config = '';\r\n\r\n\r\n const configComp = programComponents.filter(pc => pc.displayName.toUpperCase() === CASCADING_DROPDOWN_INFORMATION.toUpperCase())[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n\r\n if(configText.trim().length > 0){\r\n config = JSON.parse(configText);\r\n config.labels = JSON.parse(config.labels);\r\n }\r\n\r\n const { labels, numDropDowns } = config;\r\n let hasDropDownProps = false;\r\n\r\n const noDDs = parseInt(numDropDowns);\r\n\r\n for(let i = 0; i <= noDDs - 1; i++) {\r\n // const controlName = `${labels[`label${i}`].replace(/ /g, '_')}_${i}`;\r\n const controlName = `MULTI_DROP_DOWN_${i}`; \r\n hasDropDownProps = this.state.requiredFields.filter(rf => rf.name === controlName).length > 0\r\n }\r\n\r\n if(!hasDropDownProps) {\r\n const newRules = [];\r\n for(let i=0;i<=noDDs-1;i++){\r\n newRules.push({ \r\n // name: `${labels[`label${i}`].replace(/ /g, '_')}_${i}`, \r\n name: `MULTI_DROP_DOWN_${i}`, \r\n friendlyName: `${labels[`label${i}`]}`,\r\n isValid: false, \r\n regex: NOT_EQUAL_TO_SELECT_REGEX })\r\n }\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.requiredFields = [\r\n ...newState.requiredFields,\r\n ...newRules.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return newState;\r\n })\r\n }\r\n \r\n }\r\n }\r\n\r\n addFileUploadToValidator = () => {\r\n\r\n const {\r\n programComponents,\r\n programComponentsLoading\r\n } = this.props;\r\n \r\n let config = {};\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading) {\r\n const configComp = programComponents.filter(pc => pc.componentId === FILE_UPLOAD_COMPONENT_ID)[0];\r\n const configText = typeof configComp === 'undefined' ? '' : configComp.configuration;\r\n \r\n if(configText.trim().length > 0) {\r\n config = JSON.parse(configText);\r\n config.labels = JSON.parse(config.labels);\r\n }\r\n \r\n const {\r\n numUploads,\r\n labels\r\n } = config;\r\n\r\n const noUploads = parseInt(numUploads);\r\n const gotUploads = false;\r\n const uploadNoRefs = []\r\n for(let i=0;i<=noUploads-1;i++){\r\n if(this.state.requiredFields.filter(rf => rf.name === `FILE_UPLOAD_${i}`).length === 0) {\r\n if(typeof labels[`required_label${i}`] !== 'undefined' && labels[`required_label${i}`] === true){\r\n uploadNoRefs.push(i);\r\n }\r\n }\r\n\r\n }\r\n\r\n if(uploadNoRefs.length > 0) {\r\n const fileUploadRequireds = []\r\n for(let i=0;i<=uploadNoRefs.length-1;i++) {\r\n fileUploadRequireds.push({\r\n name:`FILE_UPLOAD_${uploadNoRefs[i]}`,\r\n friendlyName: `${labels[`label${uploadNoRefs[i]}`].substring(0,15)}...`, \r\n isValid: false, \r\n regex: FILENAME_REGEX\r\n })\r\n }\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n const names = fileUploadRequireds.map(i => i.name);\r\n newState.requiredFields = newState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n \r\n newState.requiredFields = [\r\n ...newState.requiredFields,\r\n ...fileUploadRequireds.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n\r\n return newState;\r\n });\r\n \r\n }\r\n }\r\n }\r\n\r\n isValidDate = str => {\r\n return true;\r\n }\r\n \r\n handleFormValid = () => {\r\n //if (this.state.requiredFields.filter(rf => rf.isValid === false).length > 0)\r\n //{\r\n // this.setState(prevState => {\r\n // const newState = Object.assign({}, prevState);\r\n \r\n // const reqFields = this.state.requiredFields;\r\n // reqFields.map(field => field.isValid = this.validateField(field.name.replace(/ /g, '_'), new RegExp(field.regex)));\r\n // newState.requiredFields = reqFields;\r\n // return newState;\r\n // });\r\n //}\r\n //const field = this.state.requiredFields.filter(rf => rf.isValid === false && rf.friendlyName === 'Business Overvi...');\r\n //const er = new RegExp(field.regex);\r\n //const isValidOverview = er.test(this.state[\"businessDescription\"]);\r\n\r\n const isValid = this.state.requiredFields.filter(rf => rf.friendlyName !== 'undefined' && rf.friendlyName !== null && rf.isValid === false && rf.name != \"footballAreas\").length > 0;\r\n return !isValid\r\n }\r\n\r\n validateReqField = (field) => {\r\n this.updateState(field.name, this.state[field.name]);\r\n }\r\n\r\n handleUploadedFile = ( file, label ) => {\r\n // this.updateState('resumeDocPath', file.name);\r\n this.updateState(label, file.name);\r\n }\r\n\r\n getFormInput = event => {\r\n const { id, name, value } = event.target;\r\n const myKey = typeof id === 'undefined' ? name : id;\r\n\r\n this.updateState(myKey, value);\r\n }\r\n\r\n handleAdditionalOwners = arrOwners => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.additionalOwners = arrOwners\r\n return newState;\r\n })\r\n }\r\n\r\n handleAdditionalContactsIsValid = (additionalContacts, requiredFields, distinctQuestions) => {\r\n //console.log(distinctQuestions)\r\n //console.log(additionalContacts)\r\n for(let i=0;i<=distinctQuestions.length-1;i++){\r\n //console.log(distinctQuestions[i].questionId)\r\n let field = requiredFields.filter(rf => rf.name === distinctQuestions[i].questionId)[0];\r\n //console.log(field)\r\n if(typeof field !== 'undefined'){\r\n //console.log(additionalContacts.filter(ac => ac.questionId === distinctQuestions[i].questionId).length)\r\n //console.log(distinctQuestions[i].minContacts)\r\n field.isValid = additionalContacts.\r\n filter(ac => ac.questionId === distinctQuestions[i].questionId).length >= \r\n distinctQuestions[i].minContacts;\r\n }\r\n }\r\n\r\n return requiredFields;\r\n }\r\n\r\n handleAdditionalContacts = (arrContacts,removeRef) => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n if(typeof newState.additionalContacts === 'undefined') {\r\n newState.additionalContacts = arrContacts;\r\n\r\n newState.requiredFields = this.handleAdditionalContactsIsValid(\r\n newState.additionalContacts, \r\n newState.requiredFields, \r\n [{ \r\n questionId: arrContacts[0].questionId, \r\n minContacts: arrContacts[0].minContacts\r\n }]); \r\n }\r\n else if(typeof removeRef !== 'undefined'){\r\n newState.additionalContacts = \r\n newState.additionalContacts.\r\n filter(ac => !(ac.questionId == removeRef.questionId && \r\n ac.itemNumber == removeRef.itemNumber));\r\n\r\n newState.requiredFields = this.handleAdditionalContactsIsValid(\r\n newState.additionalContacts, \r\n newState.requiredFields, \r\n [{ questionId: removeRef.questionId, minContacts: removeRef.minContacts}]);\r\n } else{\r\n //newState.additionalContacts = [ \r\n // ...newState.additionalContacts, \r\n // ...arrContacts];\r\n newState.additionalContacts = [...new Set([...newState.additionalContacts, \r\n ...arrContacts])];\r\n\r\n let distinctQuestions = newState.additionalContacts.\r\n map(i => {\r\n return {\r\n questionId: i.questionId,\r\n minContacts: i.minContacts\r\n }\r\n });\r\n\r\n distinctQuestions = _.uniqBy(distinctQuestions, e => e.questionId);\r\n\r\n newState.requiredFields = this.handleAdditionalContactsIsValid(\r\n newState.additionalContacts, \r\n newState.requiredFields, \r\n distinctQuestions);\r\n }\r\n\r\n return newState;\r\n }, () => console.log(this.state))\r\n }\r\n\r\n handlePreferredTeamsChanged = selected => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.PreferredTeams = selected; \r\n return newState;\r\n });\r\n }\r\n\r\n updateStateWithPlayerDbValues = updateValues => {\r\n if(typeof updateValues === 'undefined' || \r\n (typeof this.state.playerDBRefLoaded !== 'undefined' || \r\n this.state.playerDBRefLoaded) ) \r\n return;\r\n \r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n for(let i=0;i rf.name === updateValues[i].fieldName)[0];\r\n if(typeof field !== 'undefined') \r\n field.isValid = true; \r\n }\r\n\r\n newState.playerDBRefLoaded = true;\r\n return newState;\r\n }, \r\n () => console.log(this.state)\r\n )\r\n\r\n } \r\n\r\n updateState = (name, value) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState); \r\n newState[name] = value;\r\n\r\n // DO FIELD VALIDATION CHECK HERE\r\n if(typeof name === 'string' && name.indexOf(' ') > 0)\r\n name = name.replace(/ /g, '_');\r\n\r\n const filtername = name === 'stateCodeSelect' ? 'stateCode' : name;\r\n const requiredField = newState.requiredFields.filter(rf => rf.name === filtername)[0];\r\n //const requiredField = newState.requiredFields.filter(rf => rf.name === name)[0];\r\n\r\n if(typeof requiredField !== 'undefined' && requiredField !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n if(name === 'birthDate') {\r\n requiredField.isValid = this.isValidDate(value)\r\n } else if(name === 'resumeDocPath') {\r\n requiredField.isValid = true;\r\n } else if (name === 'collegeDivision' && value === 'NA'){\r\n requiredField.isValid = true;\r\n newState.requiredFields.filter(rf => rf.name === 'conferenceCurrentlyCoachingIn')[0].isValid = true;\r\n } else if (name === \"stateCodeSelect\") {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value.value);\r\n } else if (name === \"postalCode\") {\r\n if (typeof newState.countrySelect !== 'undefined' && \r\n newState.countrySelect !== null && \r\n newState.countrySelect.value !== 'United States of America')\r\n {\r\n var re = new RegExp(ALPHA_NUMERIC_REGEX);\r\n requiredField.isValid = re.test(value);\r\n }\r\n else\r\n {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value);\r\n }\r\n } else { \r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value);\r\n \r\n if (name === 'countrySelect' && typeof prevState.countrySelect !== 'undefined' && \r\n prevState.countrySelect !== null && prevState.countrySelect.value != '' && prevState.countrySelect.value != value.value && (prevState.countrySelect.value !== 'United States of America' || value.value !== 'United States of America'))\r\n {\r\n newState.requiredFields.filter(rf => rf.name === 'stateCode')[0].isValid = false;\r\n //newState.requiredFields.filter(rf => rf.name === 'postalCode')[0].isValid = false;\r\n }\r\n }\r\n }\r\n\r\n return newState;\r\n }, \r\n () => console.log(this.state)\r\n );\r\n }\r\n\r\n multiUpdateState = (name, value, selOptions) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState); \r\n newState[name] = value;\r\n\r\n if (name ==='businessCertifications')\r\n {\r\n newState['selectedCertifications'] = selOptions === null ? [] : selOptions;\r\n if (!value.includes('Other')) {\r\n newState['businessCertificationsOther'] = '';\r\n }\r\n } else if (name ==='businessIndustryList') {\r\n newState['selectedIndustries'] = selOptions === null ? [] : selOptions;\r\n if (!value.includes('Other')) {\r\n newState['businessIndustryListOther'] = '';\r\n }\r\n } else if (name === 'selectedState') {\r\n newState['selectedState'] = selOptions === null ? [] : selOptions;\r\n } else if (name ==='countrySelect') {\r\n newState['selectedCountry'] = selOptions === null ? [] : selOptions;\r\n } else if (name ==='stateCodeSelect') {\r\n newState['selectedState'] = selOptions === null ? [] : selOptions;\r\n } else if (name ==='businessDirectoryServiceArea') {\r\n newState['selectedBusinessAreas'] = selOptions === null ? [] : selOptions;\r\n } else if (name ==='legendInvolvedDayToDay') {\r\n newState['selectedInvolvedDay'] = selOptions === null ? [] : selOptions;\r\n } \r\n\r\n // DO FIELD VALIDATION CHECK HERE\r\n if(typeof name === 'string' && name.indexOf(' ') > 0)\r\n name = name.replace(/ /g, '_');\r\n\r\n const filtername = name === 'stateCodeSelect' ? 'stateCode' : name;\r\n const requiredField = newState.requiredFields.filter(rf => rf.name === filtername)[0];\r\n //const requiredField = newState.requiredFields.filter(rf => rf.name === name)[0];\r\n\r\n if(typeof requiredField !== 'undefined' && requiredField !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n if(name === 'birthDate') {\r\n requiredField.isValid = this.isValidDate(value)\r\n } else if(name === 'resumeDocPath') {\r\n requiredField.isValid = true;\r\n } else if (name === 'collegeDivision' && value === 'NA'){\r\n requiredField.isValid = true;\r\n newState.requiredFields.filter(rf => rf.name === 'conferenceCurrentlyCoachingIn')[0].isValid = true;\r\n } else if (name === \"stateCodeSelect\") {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value.value);\r\n } else if (name === \"postalCode\") {\r\n if (typeof newState.countrySelect !== 'undefined' && \r\n newState.countrySelect !== null && \r\n newState.countrySelect.value !== 'United States of America')\r\n {\r\n var re = new RegExp(ALPHA_NUMERIC_REGEX);\r\n requiredField.isValid = re.test(value);\r\n }\r\n else\r\n {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value);\r\n }\r\n } \r\n else { \r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value);\r\n\r\n if (name === 'countrySelect' && typeof prevState.countrySelect !== 'undefined' && \r\n prevState.countrySelect !== null && prevState.countrySelect.value != '' && prevState.countrySelect.value != value.value && (prevState.countrySelect.value !== 'United States of America' || value.value !== 'United States of America'))\r\n {\r\n newState.requiredFields.filter(rf => rf.name === 'stateCode')[0].isValid = false;\r\n if (typeof newState.postalCode !== 'undefined' &&\r\n newState.postalcode !== null && newState.postalCode !== '' &&\r\n typeof newState.countrySelect !== 'undefined' && \r\n newState.countrySelect !== null &&\r\n newState.countrySelect.value !== 'United States of America')\r\n {\r\n var re = new RegExp(ALPHA_NUMERIC_REGEX);\r\n newState.requiredFields.filter(rf => rf.name === 'postalCode')[0].isValid = re.test(newState.postalCode);\r\n }\r\n else if (typeof newState.postalCode !== 'undefined' &&\r\n newState.postalcode !== null && newState.postalCode !== '' &&\r\n typeof newState.countrySelect !== 'undefined' && \r\n newState.countrySelect !== null &&\r\n newState.countrySelect.value === 'United States of America')\r\n {\r\n var re = new RegExp(requiredField.regex);\r\n newState.requiredFields.filter(rf => rf.name === 'postalCode')[0].isValid = re.test(newState.postalCode);\r\n }\r\n else if (typeof newState.postalCode !== 'undefined' &&\r\n newState.postalcode !== null && newState.postalCode === '')\r\n {\r\n newState.requiredFields.filter(rf => rf.name === 'postalCode')[0].isValid = false;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return newState;\r\n }, \r\n () => console.log(this.state)\r\n );\r\n }\r\n\r\n getSelectInput = checkDetails => {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n if (!oldState.hasOwnProperty('questions')){\r\n oldState.questions = [];\r\n }\r\n\r\n if (checkDetails.type === 'teamDropdown') {\r\n oldState[checkDetails.id] = checkDetails.value;\r\n }\r\n\r\n const optionsWithId = oldState.questions.filter(q => q.questionId === checkDetails.questionId);\r\n\r\n if(typeof optionsWithId !== 'undefined' && optionsWithId.length > 0 && checkDetails.type === 'textbox') {\r\n\r\n var textBox = oldState.questions.filter(q => q.questionId === checkDetails.questionId && \r\n q.id === checkDetails.id)[0]\r\n\r\n if(typeof textBox !== 'undefined') {\r\n if(checkDetails.hasOwnProperty('otherValue'))\r\n textBox.otherValue = checkDetails.value;\r\n else{\r\n textBox.value = checkDetails.value;\r\n oldState.businessDescription = checkDetails.value;\r\n }\r\n }\r\n }\r\n else if(typeof optionsWithId !== 'undefined' && \r\n optionsWithId.length > 0 && checkDetails.type === 'radio') {\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes(optionsWithId.map(y => y.id) , x.id));\r\n oldState.questions.push(checkDetails);\r\n\r\n }\r\n else if(typeof optionsWithId !== 'undefined' && \r\n optionsWithId.length > 0 && \r\n checkDetails.type === 'checkbox') {\r\n const questionOptions = optionsWithId.filter(qo => qo.id === checkDetails.id);\r\n // does this option exist in the collection?\r\n\r\n if(questionOptions.length > 0){\r\n // yes. remove it from the colection\r\n let checkDetails = questionOptions[0];\r\n if(typeof checkDetails !== 'undefined' && checkDetails.hasOwnProperty('otherValue'))\r\n checkDetails.otherValue = '';\r\n else{\r\n checkDetails.value = '';\r\n }\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes([checkDetails.id], x.id));\r\n } else {\r\n // no. add it\r\n oldState.questions.push(checkDetails);\r\n }\r\n\r\n }\r\n else if(typeof optionsWithId !== 'undefined' && optionsWithId.length > 0){\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes(optionsWithId.map(y => y.id) , x.id));\r\n oldState.questions.push(checkDetails);\r\n }\r\n //else if(typeof optionsWithId !== 'undefined' && optionsWithId.length > 0)\r\n // oldState.questions = _.filter(oldState.questions, x => !_.includes(optionsWithId.map(y => y.id) , x.id));\r\n else {\r\n oldState.questions.push(checkDetails);\r\n }\r\n\r\n\r\n // DO FIELD VALIDATION CHECK HERE\r\n const requiredField = oldState.requiredFields.filter(rf => rf.name == checkDetails.questionId)[0];\r\n\r\n if(typeof requiredField !== 'undefined' && \r\n requiredField !== null) { \r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n\r\n if(checkDetails.type === 'textbox') {\r\n requiredField.isValid = checkDetails.value.length > 0 ? true : false\r\n } else if(checkDetails.type === 'dropdown') {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(checkDetails.value)\r\n } else if(checkDetails.type === 'radio' && checkDetails.hasOwnProperty('otherValue') && typeof checkDetails.otherValue !== 'undefined'){\r\n requiredField.isValid = checkDetails.otherValue.length > 0 ? true : false;\r\n } else {\r\n requiredField.isValid = oldState.questions.filter(q => q.questionId === checkDetails.questionId).length > 0;\r\n }\r\n }\r\n\r\n return oldState;\r\n });\r\n }\r\n\r\n dropDownMultiSelectHandler = event => {\r\n // console.log(\"MultiSelectHandler\")\r\n }\r\n\r\n selectChangeHandler = event => {\r\n const { id, name, value } = event.target;\r\n const myKey = typeof id === 'undefined' ? name : id;\r\n\r\n this.updateState(myKey, value);\r\n }\r\n \r\n reactSelectChangeHandler = (value, action) => {\r\n const { name } = action; \r\n const concatValues = Array.isArray(value) ? value.map((i,k) => i.label).join() : value;\r\n\r\n this.updateState(name, concatValues);\r\n }\r\n\r\n multiselChangeHandler = (value, action) => {\r\n const { name } = action; \r\n //const nValue = value.value !== null ? value.value : null;\r\n const concatValues = Array.isArray(value) ? value.map((i,k) => i.label).join() : value !== null ? typeof value.value !== 'undefined' ? value.value : value : value;\r\n const selOptions = value;\r\n this.multiUpdateState(name, concatValues, selOptions);\r\n }\r\n\r\n getDateInput = (date, dateString, id) => {\r\n this.updateState(id, date);\r\n }\r\n\r\n getNumberInput = (numberAsValue, numberAsString, input) => {\r\n const { id } = input;\r\n this.updateState(id, numberAsValue);\r\n }\r\n\r\n getPlayerSegmentChange = event => {\r\n\r\n const { formDef } = this.props;\r\n const section = formDef.sections.filter(s => s.sectionName === 'Body')[0];\r\n const { questionId } = section.components.filter(c => c.componentName === PLAYER_SEGMENT_COMPONENT_NAME)[0];\r\n\r\n const { name, value, segment, id } = event.target;\r\n const currentPlayerReqFields = [\r\n {name:'teamSelect', friendlyName: 'Current Team', isValid: false, regex: NOT_EQUAL_TO_SELECT_REGEX}, \r\n ];\r\n\r\n const playerSegmentFields = [\r\n {name: 50005, friendlyName: \"Playing History...\", isValid: true, regex: \"[a-zA-Z0-9-,]+\"}\r\n ];\r\n\r\n const legendsReqFields = [\r\n {name:'yearsPlayedInNFL', friendlyName: 'How may years did you play in the NFL?', isValid: false, regex: NUMBER_ONLY_REGEX }, \r\n {name: 'mostRecentTeam', friendlyName: 'What is the most recent team you played for?', isValid: false, regex: ALPHA_REGEX }, \r\n ];\r\n \r\n\r\n // if this is a segemt change then set the requireds rule and get out\r\n if(name === 'segmentYouFallUnderRadio') {\r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n\r\n // remove the legends & current player requireds if they exist\r\n const names = [\r\n ...currentPlayerReqFields, \r\n ...legendsReqFields].map(i => i.name);\r\n\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n\r\n if(value === 'currentNFLPlayer') {\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...currentPlayerReqFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n } else {\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...legendsReqFields.map(field => this.createRequiredFieldRule(field))\r\n ]\r\n }\r\n\r\n document.getElementById('yearsPlayedInNFL').value = '';\r\n document.getElementById('mostRecentTeam').value = '';\r\n document.getElementById('teamSelect').value = 'select';\r\n\r\n // get rid of any question references...\r\n if(oldState.hasOwnProperty('questions')) {\r\n const xx1 = oldState.questions.filter(q => q.questionId === questionId);\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes(xx1.map(y => y.questionId) , x.questionId));\r\n }\r\n\r\n return oldState;\r\n })\r\n\r\n return;\r\n }\r\n\r\n let teamName = '';\r\n\r\n if (event.target.id === 'teamSelect') {\r\n let index = event.nativeEvent.target.selectedIndex;\r\n teamName = event.nativeEvent.target[index].text\r\n } else if(event.target.id === 'mostRecentTeam')\r\n teamName = event.target.value\r\n \r\n\r\n this.setState(prevState => {\r\n let oldState = Object.assign({}, prevState);\r\n if (!oldState.hasOwnProperty('questions')){\r\n oldState.questions = [];\r\n }\r\n\r\n const newValue = {\r\n id: questionId,\r\n idString: name,\r\n questionId,\r\n type: 'component',\r\n teamName,\r\n value,\r\n segment: typeof segment === 'undefined' ? \r\n 'Current NFL Player' : \r\n segment\r\n };\r\n\r\n\r\n const xx = oldState.questions.filter(q => q.questionId === questionId);\r\n\r\n if (typeof xx[0] === 'undefined') {\r\n // question does not exist\r\n if (name === 'yearsPlayedInNFL' || name === 'mostRecentTeam') {\r\n newValue.yearsPlayedInNFL = value;\r\n newValue.teamName = value;\r\n } \r\n\r\n oldState.questions.push(newValue);\r\n\r\n } else {\r\n // we have the question. is it 'teamSelect'?\r\n if (name === 'teamSelect') {\r\n // yes. replace what's there\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes(xx.map(y => y.questionId) , x.questionId));\r\n oldState.questions.push(newValue); \r\n } else {\r\n // no. update what's there\r\n name === 'yearsPlayedInNFL' ? \r\n xx[0].yearsPlayedInNFL = value : \r\n xx[0].teamName = value;\r\n }\r\n\r\n }\r\n\r\n const requiredField = oldState.requiredFields.filter(rf => rf.name === id);\r\n\r\n if(typeof requiredField[0] !== 'undefined' && \r\n requiredField[0] !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n var re = new RegExp(requiredField[0].regex);\r\n requiredField[0].isValid = re.test(value);\r\n\r\n const playingHistoryRequired = oldState.requiredFields.filter(rf => rf.name === 50005)[0];\r\n if(typeof playingHistoryRequired !== 'undefined')\r\n playingHistoryRequired.isValid = re.test(value);\r\n }\r\n\r\n return oldState;\r\n }, \r\n // () => console.log(this.state)\r\n );\r\n }\r\n\r\n createRequiredFieldRule = field => {\r\n return { \r\n name: field.name,\r\n friendlyName: field.friendlyName, \r\n isValid: false, \r\n regex: field.regex };\r\n }\r\n\r\n getOtherBusinessInfo = event => {\r\n // this.setState(prevState => {\r\n // const newState = Object.assign({}, prevState);\r\n // newState.otherOwner = [...event]\r\n // return newState;\r\n // })\r\n }\r\n\r\n getFamilyInfoInput = event => {\r\n\r\n this.setState(prevState => {\r\n const { id, name, value } = event.target;\r\n\r\n const { formDef, programComponents } = this.props;\r\n\r\n const section = formDef.sections.filter(s => s.sectionName === 'Body')[0];\r\n const { questionId, componentId } = section.components.filter(c => c.componentName === FAMILY_INFORMATION_COMPONENT_NAME)[0];\r\n const componentConfigJson = programComponents.filter(c => c.componentId === componentId)[0].configuration;\r\n const componentConfig = JSON.parse(componentConfigJson)\r\n\r\n let oldState = Object.assign({}, prevState);\r\n if (!oldState.hasOwnProperty('questions')){\r\n oldState.questions = [];\r\n }\r\n\r\n // if this is a checkbox then look for the question AND optionId, else for radios, just the questionId\r\n const newValue = {\r\n id: questionId,\r\n idString: name,\r\n questionId,\r\n type: 'component',\r\n value \r\n };\r\n\r\n // if significantotherattend == 'yes' then we must require the other fields\r\n const signifOtherFields = [\r\n {name:'sigOtherName', friendlyName: 'Significant Other Name', isValid: false, regex: ALPHA_REGEX}, \r\n {name: 'sigOtherEmail', friendlyName: 'Significant Other Email', isValid: false, regex: EMAIL_REGEX}, \r\n {name: 'sigOtherCell', friendlyName: 'Significant Other Cell Number', isValid: false, regex: PHONE_REGEX}];\r\n\r\n if(componentConfig.spouseShirtSize === true)\r\n signifOtherFields.push({name: 'sigOtherTShirt', friendlyName: 'Significant Other T-Shirt Size', isValid: false, regex: ALPHA_NUMERIC_REGEX})\r\n\r\n if(name === 'SignificantOtherAttend' && value === 'yes') {\r\n oldState.requiredFields = [\r\n ...oldState.requiredFields, \r\n ...signifOtherFields.map(field => this.createRequiredFieldRule(field))]\r\n } else if (name === 'SignificantOtherAttend' && value === 'no') {\r\n const names = signifOtherFields.map(s => s.name);\r\n oldState.requiredFields = oldState.requiredFields.filter(function(item){\r\n for(let key = 0; key < names.length; key++) {\r\n if(item.name === names[key])\r\n return false;\r\n }\r\n return true\r\n });\r\n }\r\n\r\n const xx = oldState.questions.filter(q => q.questionId === questionId && q.idString === name);\r\n\r\n if(typeof xx !== 'undefined' && xx.length > 0)\r\n oldState.questions = _.filter(oldState.questions, x => !_.includes(xx.map(y => y.idString) , x.idString));\r\n\r\n oldState.questions.push(newValue);\r\n\r\n // DO FIELD VALIDATION CHECK HERE\r\n const requiredField = name === 'SignificantOtherAttend' ? \r\n oldState.requiredFields.filter(rf => rf.name === questionId)[0] : \r\n oldState.requiredFields.filter(rf => rf.name === name)[0];\r\n\r\n if(typeof requiredField !== 'undefined' && \r\n requiredField !== null) {\r\n\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n //var re = new RegExp(requiredField.regex);\r\n if(requiredField.name === \"SignificantOtherAttend\"){\r\n requiredField.isValid = true \r\n } else {\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value)\r\n }\r\n }\r\n\r\n return oldState;\r\n }, \r\n () => console.log(this.state)\r\n ); \r\n }\r\n\r\n formatRequiredFieldsMsg = () => {\r\n let lis = [];\r\n let message = 'All required fields have values';\r\n const missingFields = this.props.programId === FOOTBALL_OPS_SUBMISSION_ID ? _.orderBy(this.state.requiredFields.filter(rf => rf.isValid === false), ['friendlyName'], ['asc']) : _.orderBy(this.state.requiredFields.filter(rf => rf.isValid === false && rf.name != \"footballAreas\"), ['friendlyName'], ['asc']);\r\n\r\n\r\n if(typeof missingFields !== 'undefined' && missingFields.length > 0) {\r\n for(let i=0; i <= missingFields.length -1; i++) {\r\n lis.push({this.props.programId === FOOTBALL_OPS_SUBMISSION_ID && missingFields[i].friendlyName === \"Company Phone Number\" ? \"Phone Number\" : this.props.programId === FOOTBALL_OPS_SUBMISSION_ID && missingFields[i].friendlyName === \"Company Email\" ? \"Email Address\" : missingFields[i].friendlyName});\r\n }\r\n }\r\n\r\n return lis.length === 0 ? \r\n : \r\n (\r\n
Please supply values for:
\r\n
\r\n
\" + error.request !== null && error.request.responseText !== null && error.request.responseText !== '' ? error.request.responseText : error.message !== null && error.message !== '' ? error.message : error.response !== null ? error.response.request.response : 'Unknown Error';\r\n return newState;\r\n });\r\n });\r\n }\r\n\r\n handleDoAlertBtnClicked = () => {\r\n this.setState(prevState => { return { isError: !prevState.isError }});\r\n }\r\n \r\n handleDoAgreeBtnClicked = () => {\r\n this.setState(prevState => { return { Agree: 1, legalDisclaimerModal: !prevState.legalDisclaimerModal }});\r\n }\r\n\r\n handleDoDeclineBtnClicked = () => {\r\n this.setState(prevState => { return { Agree: 2, legalDisclaimerModal: !prevState.legalDisclaimerModal }});\r\n }\r\n\r\n isFormClosed = () => {\r\n const { activeEvent, applicationDueDate } = this.props.formDef;\r\n const jsAppDueDate = new Date(applicationDueDate);\r\n const jsTodayDate = Date.now();\r\n \r\n return activeEvent ? (jsTodayDate > jsAppDueDate.setDate(jsAppDueDate.getDate() + 1)) : !activeEvent;\r\n }\r\n\r\n isDisclaimerRequired = () => {\r\n const { showLegalDisclaimer } = this.props.formDef;\r\n\r\n return showLegalDisclaimer !== null ? showLegalDisclaimer : false;\r\n }\r\n \r\n render() {\r\n const { programId, id } = this.props.match.params;\r\n\r\n if (this.state.isInitialValidation === false && this.state.requiredFields.length > 1 && this.state.requiredFields.filter(rf => rf.isValid === false).length > 0)\r\n {\r\n if ( this.state.requiredFields.filter(rf => rf.friendlyName === 'Business Overvi...').length > 0) {\r\n this.updateFormStat();\r\n }\r\n }\r\n return this.props.loading && \r\n this.props.loading === true && \r\n !this.props.formDef ? \r\n : \r\n this.props.formDef !== null && !this.state.saveClicked ?\r\n (\r\n \r\n \r\n \r\n \r\n {['Body'].map((sectionName, sectionKey) => {\r\n const section = this.getFormSectionByName(sectionName);\r\n if (section !== null) {\r\n return section.components.map((component, componentKey) => {\r\n return this.getFormComponentByName(component, componentKey);\r\n })\r\n }\r\n })\r\n }\r\n \r\n \r\n
\r\n \r\n Please note: Submit button will not activate until all required fields are filled out
\r\n \r\n \r\n
\r\n
\r\n {this.formatRequiredFieldsMsg()}\r\n \r\n \r\n
\r\n
\r\n ) : null;\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n generateNewGuid: () => dispatch(eventActions.generateNewGuid()),\r\n getEventForm: programId => dispatch(formsActions.getFormDefinition(programId)),\r\n handleGetLegendApplication: applicationId => \r\n dispatch(legendsActions.getLegendApplication(applicationId)),\r\n getIsPlayerEnrolledInEvent: \r\n (playerId, programId, eventYear) => dispatch(eventActions.getIsPlayerEnrolledInEvent(playerId, programId, eventYear)),\r\n getPlayerDbInfo: (playerId, programId, eventYear) => dispatch(eventActions.getPlayerDbInfo(playerId, programId, eventYear)),\r\n setCollegeInfo: college => dispatch(eventActions.setCollegeInfo(college)),\r\n listEventComponents: programId => dispatch(eventActions.listEventComponents(programId)),\r\n saveEventForm: (programId, eventData) => {\r\n dispatch(formsActions.saveFormData(programId, eventData))\r\n }\r\n };\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { formDef, loading, saveSuccess } = state.forms;\r\n const { \r\n newGuid,\r\n playerDbRef, \r\n playerDbRefLoading,\r\n selectedPlayerDb,\r\n programComponents, \r\n programComponentsLoading\r\n } = state.programComponents;\r\n\r\n const { \r\n participant, \r\n participantsLoading\r\n } = state.eventParticipants;\r\n\r\n const {\r\n legendApplication,\r\n legendApplicationLoading\r\n } = state.legendApplication\r\n\r\n const { user } = state.auth;\r\n\r\n return {\r\n formDef,\r\n loading,\r\n newGuid,\r\n playerDbRef, \r\n playerDbRefLoading,\r\n legendApplication,\r\n legendApplicationLoading,\r\n participant: participant || legendApplication,\r\n participantsLoading,\r\n programDef: formDef,\r\n programComponents,\r\n programComponentsLoading,\r\n loading: participantsLoading || legendApplicationLoading,\r\n saveSuccess,\r\n selectedPlayerDb,\r\n user \r\n };\r\n}\r\n\r\nexport default injectIntl(connect(\r\n mapStateToProps, \r\n mapDispatchToProps\r\n)(EventParticipantEdit));","import React, { Component, Fragment } from 'react';\r\nimport { BrowserRouter as Router, Route, Link } from \"react-router-dom\";\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../_actions';\r\n\r\nimport { Colxx } from \"../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Row \r\n} from \"reactstrap\";\r\nimport ReactTable from \"react-table\";\r\nimport Spinner from '../Spinner/Spinner';\r\n\r\nconst dataTableColumns = [\r\n {\r\n Header: \"Name\",\r\n accessor: \"qLink\",\r\n Cell: props => (\r\n \r\n {props.value.text}\r\n )\r\n },\r\n {\r\n Header: \"Start Date\",\r\n accessor: \"startDate\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"End Date\",\r\n accessor: \"endDate\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"Due Date\",\r\n accessor: \"dueDate\",\r\n Cell: props => {props.value}
\r\n }];\r\n\r\nclass EventList extends Component {\r\n\r\n componentDidMount() {\r\n this.props.listEvents();\r\n }\r\n\r\n convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n }\r\n\r\n render() {\r\n const { loading, events } = this.props;\r\n\r\n const transformEvents = typeof events !== 'undefined' && events !== null ?\r\n events.map((evnt, kEvnt) => {\r\n return {\r\n id: evnt.eventId,\r\n qLink: {\r\n id: evnt.eventId,\r\n text: evnt.eventName,\r\n url: this.props.match.url,\r\n handleEventEditClicked: e => this.handleEventEditClicked(e)\r\n }, \r\n link: {\r\n id: evnt.eventId,\r\n text: evnt.eventName,\r\n handleEventEditClicked: e => this.handleEventEditClicked(e)\r\n },\r\n startDate: this.convertFromISODate(evnt.startDate),\r\n endDate: this.convertFromISODate(evnt.endDate),\r\n dueDate: this.convertFromISODate(evnt.applicationDueDate)\r\n }\r\n }) : null;\r\n\r\n return typeof loading !== 'undefined' && !loading ? (\r\n \r\n \r\n \r\n \r\n \r\n Please Select Program to Edit\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : \r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n eventsLoading,\r\n events\r\n } = state.eventParticipants;\r\n \r\n return {\r\n loading: eventsLoading,\r\n events\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleEventEditClicked: (eventId) => \r\n dispatch(eventActions.getEventDetails(eventId)),\r\n listEvents: () => dispatch(eventActions.listEvents())\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EventList)\r\n","import _ from 'lodash';\r\nimport React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../_actions';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter, \r\n Row \r\n} from \"reactstrap\";\r\n\r\nclass AddComponent extends Component {\r\n state = {\r\n\r\n }\r\n\r\n render() {\r\n const { \r\n components, \r\n programComponents, \r\n programComponentsLoading, \r\n } = this.props;\r\n\r\n const filteredComponents = components;\r\n\r\n return (\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Component
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const {\r\n components,\r\n programComponents,\r\n programComponentsLoading\r\n } = state.programComponents;\r\n\r\n return {\r\n components, \r\n programComponents,\r\n eventId: state.programApplications.programDef.eventId,\r\n loading: programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n listComponents: eventId => {\r\n dispatch(eventActions.listComponents(eventId))\r\n },\r\n toggleAppSectionComponent: (eventId, componentId) => {\r\n dispatch(eventActions.toggleAppSectionComponent(eventId, componentId))\r\n }\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(AddComponent);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../../_actions';\r\n\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Input,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport data from '../../../../data/TeamData';\r\n\r\nclass CascadingDropDownAdmin extends Component {\r\n\r\n state ={\r\n multiDropDown: {\r\n controlCaption:'', \r\n numDropDowns: 1,\r\n importTeams: false,\r\n content: null,\r\n labels: {}\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { multiDropDown } = this.state;\r\n\r\n multiDropDown.content = JSON.stringify(multiDropDown.content);\r\n multiDropDown.labels = JSON.stringify(multiDropDown.labels);\r\n\r\n this.props.updateAppSectionComponent(eventId, componentId, multiDropDown);\r\n } \r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.multiDropDown = JSON.parse(pcs[0].configuration);\r\n newState.multiDropDown.content = JSON.parse(newState.multiDropDown.content);\r\n newState.multiDropDown.labels = JSON.parse(newState.multiDropDown.labels);\r\n\r\n return newState;\r\n })\r\n }\r\n }\r\n }\r\n\r\n\r\n handleformUpdated = event => {\r\n const { id, value, type } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n // if the user selects \"import team\" get the list of teams\r\n if(id === 'importTeams' && value === 'true'){\r\n newState.multiDropDown.content = data.map((team, tKey) => {\r\n return {\r\n clubKey: team.clubKey,\r\n clubName: team.clubName\r\n }\r\n });\r\n } else if(id === 'importTeams' && value === 'false') {\r\n newState.multiDropDown.content = null;\r\n }\r\n\r\n if(id === 'numDropDowns'){\r\n const mySavedLabels = Object.assign({}, prevState.multiDropDown.labels)\r\n const mySavedLabelsKeys = Object.keys(mySavedLabels);\r\n\r\n newState['multiDropDown']['labels'] = {};\r\n\r\n for(let i = 0; i<=mySavedLabelsKeys.length-1;i++){\r\n newState['multiDropDown']['labels'][mySavedLabelsKeys[i]]=mySavedLabels[mySavedLabelsKeys[i]];\r\n }\r\n }\r\n\r\n if(type === 'textbox' ) {\r\n newState['multiDropDown']['labels'][id] = value;\r\n } else {\r\n newState['multiDropDown'][id] = value\r\n }\r\n\r\n return newState\r\n } \r\n // () => console.log(this.state)\r\n )\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst LabelsInformation = (config) => {\r\n\r\n const { numLabels, changeHandler, labels } = config\r\n\r\n let table = [];\r\n\r\n for(let i = 0; i <= numLabels - 1; i++) {\r\n table.push({getChildTableRow(i, changeHandler, labels[`label${i}`])}
)\r\n }\r\n\r\n return (\r\n \r\n \r\n {table}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst getChildTableRow = (num, changeHandler, label) => {\r\n\r\n let children = [];\r\n children.push( changeHandler({\r\n target: {\r\n name: e.target.name, \r\n id: e.target.id, \r\n value: e.target.value,\r\n type: 'textbox'\r\n }})} /> | \r\n )\r\n \r\n return children;\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CascadingDropDownAdmin)\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../../_actions';\r\n\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport data from '../../../../data/TeamData';\r\n\r\nclass CascadingInformationAdmin extends Component {\r\n\r\n state ={\r\n dropDownItems: [],\r\n editListItems: [],\r\n selectedDropDownItem: null,\r\n selectedText: '',\r\n selectedValue: ''\r\n }\r\n \r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { multiDropDown } = this.state;\r\n\r\n multiDropDown.content = JSON.stringify(multiDropDown.content);\r\n multiDropDown.labels = JSON.stringify(multiDropDown.labels);\r\n\r\n this.props.updateAppSectionComponent(eventId, componentId, multiDropDown);\r\n } \r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n const configObj = JSON.parse(pcs[0].configuration)\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.configuration = configObj;\r\n newState.dropDownItems = Object.keys(configObj).map((i,k) => {\r\n return {\r\n text: configObj[i][\"dropDownText\"],\r\n value: configObj[i][\"dropDownValue\"]\r\n }\r\n })\r\n \r\n return newState;\r\n })\r\n }\r\n }\r\n }\r\n\r\n handleTextChanged = event => {\r\n const { id, value } = event.target;\r\n \r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState[id] = value;\r\n return newState\r\n }) \r\n }\r\n\r\n handleformUpdated = event => {\r\n const { id, value } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n // if the user selects \"selectListType\" populate the list items\r\n newState.editListItems = newState.configuration[value][\"dropDownItems\"]\r\n newState.selectedDropDownItem = value\r\n\r\n return newState\r\n } \r\n // () => console.log(this.state)\r\n )\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n {\r\n [{ text: 'Select', value: '' }, ...this.state.dropDownItems].map((i,k) => {\r\n return ()\r\n })\r\n }\r\n \r\n \r\n
\r\n
|
\r\n \r\n \r\n \r\n \r\n
\r\n
|
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nconst LabelsInformation = (config) => {\r\n\r\n const { numEditListItems, changeHandler, editListItems } = config\r\n\r\n let table = [];\r\n\r\n if(numEditListItems === 0) {\r\n table.push(| Please select an item to edit |
)\r\n } else {\r\n for(let i = 0; i <= numEditListItems - 1; i++) {\r\n table.push({getChildTableRow(i, changeHandler, editListItems[i])}
)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n {table}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst getChildTableRow = (num, changeHandler, editListItem) => {\r\n\r\n let children = [];\r\n children.push({editListItem.text} | ) \r\n return children;\r\n}\r\n\r\n/*\r\nconst getChildTableRow = (num, changeHandler, editListItem) => {\r\n\r\n let children = [];\r\n children.push( changeHandler({\r\n target: {\r\n name: e.target.name, \r\n id: e.target.id, \r\n value: e.target.value,\r\n type: 'textbox'\r\n }})} /> | \r\n )\r\n \r\n return children;\r\n}\r\n*/\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CascadingInformationAdmin)\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../../_actions';\r\n\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Input,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass FamilyInformationAdmin extends Component {\r\n\r\n state ={\r\n spouseInfo: false,\r\n kidsInfo: false,\r\n familyInformation: {\r\n childrenAge: false,\r\n // childrenName: true,\r\n childrenShirtSize: false,\r\n spouseShirtSize: false\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n const { familyInformation } = this.state;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.familyInformation = JSON.parse(pcs[0].configuration);\r\n newState.spouseInfo = newState.familyInformation.spouseInfo === \"true\";\r\n newState.kidsInfo = newState.familyInformation.kidsInfo === \"true\";\r\n \r\n return newState;\r\n } \r\n // () => console.log(this.state)\r\n )\r\n }\r\n }\r\n }\r\n\r\n handleformUpdated = event => {\r\n const { id, value, type } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n if(id === 'spouseInfo' || id === 'kidsInfo')\r\n newState[id] = (value === 'true');\r\n\r\n if(type === 'checkbox')\r\n newState['familyInformation'][id] = !prevState['familyInformation'][id];\r\n else\r\n newState['familyInformation'][id] = value\r\n\r\n return newState\r\n }\r\n // () => console.log(this.state)\r\n )\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { familyInformation } = this.state;\r\n\r\n this.props.updateAppSectionComponent(eventId, componentId, familyInformation);\r\n } \r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {\r\n !this.state.spouseInfo ? \r\n null :\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {\r\n !this.state.kidsInfo ?\r\n null : \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FamilyInformationAdmin)\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../../_actions';\r\n\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass FileUploadAdmin extends Component {\r\n\r\n state ={\r\n fileUpload: {\r\n sectionTitle:'',\r\n numUploads: 1,\r\n labels: {}\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { fileUpload } = this.state;\r\n\r\n fileUpload.labels = JSON.stringify(fileUpload.labels);\r\n\r\n this.props.updateAppSectionComponent(eventId, componentId, fileUpload);\r\n } \r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.fileUpload = JSON.parse(pcs[0].configuration);\r\n newState.fileUpload.labels = JSON.parse(newState.fileUpload.labels);\r\n\r\n return newState;\r\n })\r\n }\r\n }\r\n }\r\n\r\n\r\n handleformUpdated = event => {\r\n const { id, value, type, checked } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n if(id === 'numUploads'){\r\n const mySavedLabels = Object.assign({}, prevState.fileUpload.labels)\r\n const mySavedLabelsKeys = Object.keys(mySavedLabels);\r\n\r\n newState['fileUpload']['labels'] = {};\r\n\r\n for(let i = 0; i<=mySavedLabelsKeys.length-1;i++){\r\n newState['fileUpload']['labels'][mySavedLabelsKeys[i]]=mySavedLabels[mySavedLabelsKeys[i]];\r\n }\r\n newState['fileUpload'][id] = value;\r\n }\r\n\r\n if(type === 'textbox') {\r\n newState['fileUpload']['labels'][id] = value;\r\n } else if(type === 'checkbox') {\r\n newState['fileUpload']['labels'][id] = checked;\r\n } else {\r\n newState['fileUpload'][id] = value\r\n }\r\n\r\n return newState\r\n } \r\n // () => console.log(this.state)\r\n )\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst LabelsInformation = (config) => {\r\n\r\n const { numLabels, changeHandler, labels } = config\r\n\r\n let table = [];\r\n\r\n for(let i = 0; i <= numLabels - 1; i++) {\r\n // table.push({getChildTableRow(i, changeHandler, labels[`label${i}`])}
)\r\n table.push(getChildTableRow(i, changeHandler, labels[`label${i}`], labels[`required_label${i}`]))\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n | Name | \r\n Req? | \r\n
\r\n \r\n \r\n {table}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst getChildTableRow = (num, changeHandler, label, chkLabel) => {\r\n\r\n let children = [];\r\n children.push(\r\n \r\n | \r\n changeHandler({\r\n target: {\r\n name: e.target.name, \r\n id: e.target.id, \r\n value: e.target.value,\r\n type: 'textbox'\r\n }})} />\r\n | \r\n \r\n changeHandler({\r\n target: {\r\n name: e.target.name, \r\n id: e.target.id, \r\n checked: e.target.checked,\r\n type: 'checkbox'\r\n }})}/>\r\n | \r\n
\r\n )\r\n \r\n return children;\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FileUploadAdmin)\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../../_actions';\r\n\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass PersonalInformationAdmin extends Component {\r\n state ={\r\n personalInformation: {\r\n requireShirtSize: false,\r\n requireNumYearsPlayed: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.personalInformation = JSON.parse(pcs[0].configuration);\r\n \r\n return newState;\r\n })\r\n }\r\n }\r\n }\r\n\r\n handleformUpdated = event => {\r\n const { id, value, type } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n if(type === 'checkbox')\r\n newState['personalInformation'][id] = !prevState['personalInformation'][id];\r\n else\r\n newState['personalInformation'][id] = value\r\n\r\n return newState\r\n })\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { personalInformation } = this.state;\r\n\r\n this.props.updateAppSectionComponent(eventId, componentId, personalInformation);\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonalInformationAdmin)\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { authActions, eventActions } from '../../../../_actions';\r\n\r\nimport { Colxx } from \"../../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Col,\r\n Container,\r\n Input,\r\n Label,\r\n Row\r\n} from \"reactstrap\";\r\nimport ReactQuill from \"react-quill\";\r\n\r\nconst quillModules = {\r\n toolbar: [\r\n [{ 'header': [1,2,3,4,5,6, false]}],\r\n [ \"bold\", \"italic\", \"underline\", \"strike\", \"blockquote\"],\r\n [\r\n { list: \"ordered\" },\r\n { list: \"bullet\" },\r\n { indent: \"-1\" },\r\n { indent: \"+1\" }\r\n ],\r\n [\"link\", \"image\"]\r\n ]\r\n };\r\n \r\n const quillFormats = [\r\n \"header\",\r\n \"bold\",\r\n \"italic\",\r\n \"underline\",\r\n \"strike\",\r\n \"blockquote\",\r\n \"list\",\r\n \"bullet\",\r\n \"indent\",\r\n \"link\",\r\n \"image\"\r\n ];\r\n\r\nclass PreferredTeamsAdmin extends Component {\r\n\r\n state ={\r\n preferredTeams: {\r\n controlCaption:''\r\n }\r\n }\r\n \r\n componentDidMount() {\r\n this.updateComponentStateFromDb();\r\n }\r\n\r\n componentSaved = events => {\r\n const { eventId, componentId } = this.props;\r\n const { preferredTeams } = this.state;\r\n\r\n let newContent = JSON.stringify(preferredTeams);\r\n this.props.updateAppSectionComponent(eventId, componentId, newContent);\r\n } \r\n\r\n updateComponentStateFromDb() {\r\n const { programComponents, programComponentsLoading} = this.props;\r\n\r\n if(typeof programComponentsLoading !== 'undefined' && !programComponentsLoading){\r\n const pcs = programComponents.filter(pc => pc.componentId === this.props.componentId);\r\n\r\n if(pcs.length > 0 && \r\n pcs[0].configuration.trim().length > 0) {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.preferredTeams = JSON.parse(pcs[0].configuration);\r\n\r\n return newState;\r\n })\r\n }\r\n }\r\n }\r\n\r\n\r\n handleformUpdated = event => {\r\n const { id, value, type } = event.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState[\"preferredTeams\"][id] = value;\r\n return newState\r\n }, () => this.props.formHasChanged())\r\n }\r\n\r\n handleRichTextChange = (name, value) => {\r\n// console.log(name, value)\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.preferredTeams.controlCaption = name;\r\n return newState;\r\n }, \r\n () => {\r\n // BUBBLE-UP A FORM CHANGED EVENT FOR THE AUTH REFRESH\r\n this.props.formHasChanged();\r\n });\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n {/* */}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { \r\n programComponents, \r\n programComponentsLoading } = state.programComponents; \r\n\r\n return {\r\n eventId,\r\n programComponents,\r\n programComponentsLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n formHasChanged: () => dispatch(authActions.formHasChanged()), \r\n updateAppSectionComponent: (eventId, componentId, component) => \r\n dispatch(eventActions.updateAppSectionComponent(eventId, componentId, component))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PreferredTeamsAdmin)\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport {\r\n Card,\r\n CardBody,\r\n Form\r\n} from \"reactstrap\";\r\n\r\nimport CascadingDropDownAdmin from './CascadingDropDownAdmin/CascadingDropDownAdmin';\r\nimport CompanyInformationAdmin from './CompanyInformationAdmin/CompanyInformationAdmin';\r\nimport FamilyInformationAdmin from './FamilyInformationAdmin/FamilyInformationAdmin';\r\nimport FileUploadAdmin from './FileUploadAdmin/FileUploadAdmin';\r\nimport PersonalInformationAdmin from './PersonalInformationAdmin/PersonalInformationAdmin';\r\nimport PreferredTeamsAdmin from './PreferredTeamsAdmin/PreferredTeamsAdmin';\r\n\r\nclass ComponentAdmin extends Component {\r\n\r\n handleComponentAdminSave = event => {}\r\n\r\n resolveComponentAdmin = component => {\r\n const { displayName, componentId } = component;\r\n const noAdmin = (No Admin for this Component
);\r\n \r\n switch(displayName) {\r\n case 'CompanyInformation':\r\n return \r\n case 'FamilyInformation':\r\n return \r\n case 'FileUpload':\r\n return \r\n case 'Multi Drop Down':\r\n return \r\n case 'PersonalInformation':\r\n return \r\n case 'PlayerSegment':\r\n return noAdmin;\r\n case 'PreferredTeams':\r\n return \r\n case 'QuestionsComponent':\r\n return noAdmin;\r\n default:\r\n return noAdmin;\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { component } = this.props;\r\n const { displayName, componentId } = component;\r\n\r\n return typeof displayName === 'undefined' || displayName === null ? \r\n Please Select a Component
: \r\n (\r\n \r\n Component Details
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStatesToProps = state => {\r\n const { eventId } = state.programApplications.programDef;\r\n const { programComponents } = state.programComponents;\r\n\r\n return {\r\n eventId,\r\n programComponents\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStatesToProps,\r\n null)\r\n (ComponentAdmin);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../_actions';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Row \r\n} from \"reactstrap\";\r\n\r\nimport ReactTable from \"react-table\";\r\nimport 'react-table/react-table.css'\r\n\r\nimport AddComponent from './AddComponent/AddComponent';\r\nimport ComponentAdmin from './ComponentAdmin/ComponentAdmin';\r\nimport Spinner from '../Spinner/Spinner';\r\n\r\nconst LEGENDS_DIR_EVENT_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96'\r\n\r\nconst EditTableCell = ({ \r\n value: initialValue, \r\n row: { index }, \r\n original: { id, updateMyData } \r\n}) => {\r\n const [value, setValue] = React.useState(initialValue)\r\n\r\n const onChange = e => {\r\n setValue(e.target.value)\r\n }\r\n\r\n const onBlur = () => {\r\n updateMyData(id,value)\r\n }\r\n\r\n React.useEffect(() => {\r\n setValue(initialValue)\r\n },[initialValue])\r\n\r\n return \r\n}\r\n\r\nconst dataTableColumns = [\r\n {\r\n Header: \"Name\",\r\n accessor: \"qLink\",\r\n Cell: props => (\r\n props.value.handleComponentEditClicked(e)}\r\n >\r\n {props.value.text}\r\n )\r\n },\r\n // {\r\n // Header: \"Order\",\r\n // accessor: \"order\",\r\n // Cell: props => {props.value}
\r\n // },\r\n {\r\n Header: \"Order\",\r\n accessor: \"order\",\r\n Cell: props => EditTableCell(props)\r\n },\r\n {\r\n Header: \"Action\",\r\n accessor: \"link\",\r\n Cell: props => (\r\n \r\n props.value.handleComponentEditClicked(e)}\r\n >\r\n Edit\r\n \r\n \r\n )\r\n }\r\n\r\n\r\n];\r\n\r\n\r\nclass EventComponentsList extends Component {\r\n state={\r\n addComponentModal: false,\r\n selectedComponent: {},\r\n selectedComponents: []\r\n }\r\n\r\n componentDidMount(){\r\n const { loading, eventId, listProgramComponents } = this.props;\r\n\r\n if(typeof loading !== 'undefined' && !loading)\r\n listProgramComponents(eventId);\r\n }\r\n\r\n selectComponent = componentId => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n const { components } = this.props;\r\n newState.selectedComponent = \r\n components.filter(c => c.componentId === componentId)[0];\r\n return newState;\r\n })\r\n }\r\n\r\n handleToggleComponentsModal = () => {\r\n const { eventId, listComponents } = this.props;\r\n listComponents(eventId);\r\n this.setState(prevState => { return { addComponentModal: !prevState.addComponentModal }});\r\n }\r\n\r\n handleComponentAddClicked = (e, name, value) => {\r\n this.handleToggleComponentsModal();\r\n }\r\n\r\n handleComponentSelected = event => {\r\n const { target } = event;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n if(newState.selectedComponents.filter(sc => sc === target.value).length > 0){\r\n newState.selectedComponents = newState.selectedComponents.filter(sc => sc !== target.value)\r\n } else {\r\n newState.selectedComponents.push(target.value)\r\n }\r\n return newState;\r\n })\r\n }\r\n\r\n handleComponentOrderChanged = (id,value) => {\r\n const { eventId } = this.props;\r\n\r\n const { changeComponentDisplayOrder } = this.props;\r\n changeComponentDisplayOrder({ eventId, id, value });\r\n }\r\n\r\n handleComponentAddSaved = event => {\r\n const { eventId, toggleAppSectionComponent } = this.props;\r\n const { selectedComponents } = this.state;\r\n\r\n selectedComponents.forEach(c => {\r\n toggleAppSectionComponent(eventId, c);\r\n });\r\n\r\n this.handleToggleComponentsModal();\r\n this.setState({selectedComponents: []});\r\n }\r\n\r\n handleComponentEditClicked = event => {\r\n this.selectComponent(event.target.id)\r\n }\r\n\r\n render() {\r\n const { components } = this.props;\r\n const { loading } = this.props;\r\n\r\n const filteredComponents = components;\r\n\r\n const transformedComponents = \r\n typeof filteredComponents === 'undefined' || \r\n filteredComponents === null ? \r\n null : \r\n filteredComponents.map((component, cKey) => {\r\n return {\r\n id: component.componentId,\r\n qLink: {\r\n id: component.componentId,\r\n text: component.componentText === null ? \r\n component.displayName :\r\n component.componentText,\r\n handleComponentEditClicked: e => this.handleComponentEditClicked(e)\r\n }, \r\n link: {\r\n id: component.componentId,\r\n text: component.displayName,\r\n handleComponentEditClicked: e => this.handleComponentEditClicked(e)\r\n },\r\n order: component.displayOrder,\r\n name: component.componentText === null ? \r\n component.displayName : \r\n component.componentText,\r\n updateMyData: (id,value) => this.handleComponentOrderChanged(id,value) \r\n }\r\n })\r\n\r\n return typeof loading === 'undefined' || loading === true ?\r\n (|
) : \r\n components === null || components.length === 0 ?\r\n \r\n No Components\r\n \r\n \r\n
:\r\n (\r\n \r\n \r\n \r\n \r\n \r\n Program Components\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n listComponents: eventId => \r\n dispatch(eventActions.listComponents(eventId)),\r\n listProgramComponents: eventId => \r\n dispatch(eventActions.listEventComponents(eventId)),\r\n toggleAppSectionComponent: (eventId, componentId) => \r\n dispatch(eventActions.toggleAppSectionComponent(eventId, componentId))\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const {\r\n programComponents,\r\n programComponentsLoading\r\n } = state.programComponents;\r\n\r\n return {\r\n components: programComponents,\r\n eventId: state.programApplications.programDef.eventId,\r\n loading: programComponentsLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EventComponentsList);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../_actions';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter, \r\n Row \r\n} from \"reactstrap\";\r\n\r\nconst questionTypes = {\r\n\tText: 1,\r\n\tRadio: 2,\r\n\tMultiSelect: 3,\r\n\tDropDown: 4,\r\n\tComponent: 5\r\n}\r\n\r\nclass EditOption extends Component {\r\n state = {\r\n optionDescription: '',\r\n displayOrder: ''\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Edit Option
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n {this.props.optionId > 0 ? \r\n : null}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n programDef, \r\n programLoading \r\n } = state.programApplications;\r\n\r\n return {\r\n questions: typeof programDef === 'undefined' || \r\n programDef === null ? \r\n null : \r\n programDef.questions,\r\n loading: programLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n updateOption: (questionId, optionId, option) => {\r\n dispatch(eventActions.updateQuestionOption(questionId, optionId, option))\r\n }\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EditOption);\r\n","export const QuestionTypes = [\r\n {\r\n id: 1,\r\n description: 'Text Box'\r\n },\r\n {\r\n id: 2,\r\n description: 'Radio Button'\r\n },\r\n {\r\n id: 3,\r\n description: 'Multi-Select'\r\n },\r\n {\r\n id: 4,\r\n description: 'Drop-Down'\r\n },\r\n {\r\n id: 6,\r\n description: 'ContactList'\r\n }\r\n];\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../_actions';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport Select from \"react-select\";\r\nimport * as questionTypes from '../../../_constants/QuestionTypes';\r\n\r\nclass EditOption extends Component {\r\n state = {\r\n optionDescription: ''\r\n }\r\n\r\n render() {\r\n const { QuestionTypes } = questionTypes;\r\n const SELECT_QUESTION_TYPES = QuestionTypes.map((q, qk) => {\r\n return {\r\n label: q.description,\r\n value: q.id.toString(),\r\n key: qk\r\n }\r\n });\r\n\r\n const selectQuestionTypeById = typeId => {\r\n return SELECT_QUESTION_TYPES.filter(qt => qt.value === typeId)[0];\r\n }\r\n\r\n return (\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Create Question
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n programDef, \r\n programLoading \r\n } = state.programApplications;\r\n\r\n return {\r\n questions: typeof programDef === 'undefined' || \r\n programDef === null ? \r\n null : \r\n programDef.questions,\r\n loading: programLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n addQuestion: (questionId, optionId, option) => {\r\n dispatch(eventActions.addQuestion(questionId, optionId, option))\r\n } \r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EditOption);\r\n","import React from 'react';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n ListGroup,\r\n ListGroupItem \r\n} from \"reactstrap\";\r\nimport Select from \"react-select\";\r\n\r\nimport * as questionTypes from '../../../_constants/QuestionTypes';\r\n\r\nconst OptionsGroup = props => {\r\n\r\n if(props.options === null || typeof props.options === 'undefined')\r\n return null;\r\n\r\n if(props.options.length === 0 || (props.options.length === 1 && props.options[0].optionId === null))\r\n return No options for this question
;\r\n\r\n return (\r\n {\r\n props.options.map((o,ok) => {\r\n return (\r\n props.clicked(o.optionId)}\r\n >\r\n {o.optionDescription}\r\n \r\n );\r\n })\r\n }\r\n )\r\n}\r\n\r\nconst SELECT_QUESTION_TYPES = questionTypes.QuestionTypes.map((q, qk) => {\r\n return {\r\n label: q.description,\r\n value: q.id.toString(),\r\n key: qk\r\n }\r\n});\r\n\r\nconst selectQuestionTypeById = typeId => {\r\n return SELECT_QUESTION_TYPES.filter(qt => qt.value === typeId)[0];\r\n}\r\n\r\nconst questionDetail = props => {\r\n const { selectedQuestion } = props;\r\n\r\n return (\r\n \r\n \r\n Question Details
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default questionDetail;\r\n","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { authActions, dialogActions, eventActions } from '../../_actions';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Row \r\n} from \"reactstrap\";\r\n\r\nimport ReactTable from \"react-table\";\r\n\r\nimport EditOption from './OptionsList/EditOption';\r\nimport EditQuestion from './EditQuestion/EditQuestion';\r\nimport QuestionDetail from './EditQuestion/QuestionDetails';\r\n\r\nimport Spinner from '../Spinner/Spinner';\r\n\r\nimport 'react-table/react-table.css'\r\n\r\nimport * as questionTypes from '../../_constants/QuestionTypes';\r\n\r\nconst EditTableCell = ({ \r\n value: initialValue, \r\n row: { index }, \r\n original: { id, updateMyData } \r\n}) => {\r\n const [value, setValue] = React.useState(initialValue)\r\n\r\n const onChange = e => {\r\n setValue(e.target.value)\r\n }\r\n\r\n const onBlur = () => {\r\n updateMyData(id,value)\r\n }\r\n\r\n React.useEffect(() => {\r\n setValue(initialValue)\r\n },[initialValue])\r\n\r\n return \r\n}\r\n\r\nconst dataTableColumns = [\r\n {\r\n Header: \"Question Text\",\r\n accessor: \"qLink\",\r\n Cell: props => (\r\n props.value.handleQuestionEditClicked(e)}\r\n >\r\n {props.value.text}\r\n )\r\n },\r\n {\r\n Header: \"Type\",\r\n accessor: \"type\",\r\n Cell: props => {props.value}
\r\n },\r\n // {\r\n // Header: \"Order\",\r\n // accessor: \"order\",\r\n // Cell: props => {props.value}
\r\n // },\r\n {\r\n Header: \"Order\",\r\n accessor: \"order\",\r\n Cell: props => EditTableCell(props)\r\n },\r\n {\r\n Header: \"Action\",\r\n accessor: \"link\",\r\n Cell: props => (\r\n \r\n props.value.handleQuestionEditClicked(e)}\r\n >\r\n Edit\r\n , \r\n props.value.handleQuestionDeleteClicked(e)}\r\n >\r\n Delete\r\n \r\n \r\n )\r\n }\r\n\r\n\r\n];\r\n \r\n\r\nclass QuestionsList extends Component {\r\n state={\r\n editOptionModal: false,\r\n editQuestionModal: false,\r\n addedQuestion: null,\r\n selectedQuestion: null,\r\n selectedOptions:[],\r\n selectedOption: null,\r\n displayOrder:[]\r\n }\r\n\r\n handleToggleOptionModal = () => {\r\n this.setState(prevState => { return { editOptionModal: !prevState.editOptionModal }}, () => this.props.formHasChanged());\r\n }\r\n\r\n handleToggleQuestionModal = () => {\r\n this.setState(prevState => { return { editQuestionModal: !prevState.editQuestionModal }}, () => this.props.formHasChanged());\r\n }\r\n\r\n handleOptionClicked = e => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.selectedOption = prevState\r\n .selectedQuestion\r\n .questionOptions\r\n .filter(o => o.optionId === e)[0]\r\n\r\n newState.editOptionModal = !prevState.editOptionModal;\r\n return newState;\r\n }, () => {\r\n this.props.formHasChanged();\r\n });\r\n }\r\n\r\n handleOptionAddClicked = e => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedOption = {\r\n optionId: 0,\r\n optionName: '',\r\n optionDescription: '',\r\n displayOrder: 0\r\n }\r\n\r\n newState.editOptionModal = !prevState.editOptionModal;\r\n return newState;\r\n }, () => {\r\n this.props.formHasChanged();\r\n });\r\n }\r\n\r\n handleOptionFormUpdated = (e, name, value) => {\r\n const { type } = e.target;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n if(type === 'checkbox' )\r\n newState.selectedOption[name] = !prevState.selectedOption[name];\r\n else\r\n newState.selectedOption[name] = value;\r\n return newState;\r\n }, () => {\r\n this.props.formHasChanged();\r\n })\r\n }\r\n \r\n handleQuestionFormAddClicked = (e, name, value) => {\r\n\r\n const { eventId } = this.props.programDef;\r\n this.props.addQuestion(eventId, this.state.selectedQuestion);\r\n this.handleToggleQuestionModal();\r\n }\r\n\r\n handleQuestionOrderChanged = (id,value) => {\r\n const { eventId } = this.props.programDef;\r\n const { changeQuestionDisplayOrder } = this.props;\r\n\r\n changeQuestionDisplayOrder({ eventId, id, value });\r\n }\r\n\r\n handleQuestionFormAdded = (e, name, value) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedQuestions = {}\r\n\r\n if(newState.addedQuestion === null)\r\n newState.addedQuestion = { displayOrder: 0 };\r\n\r\n newState.addedQuestion[name] = value;\r\n return newState;\r\n }, \r\n () => this.props.formHasChanged()\r\n )\r\n }\r\n\r\n handleQuestionAddTypeChanged = event => {\r\n\r\n const { QuestionTypes } = questionTypes;\r\n const typeDesc = QuestionTypes.filter(qt => qt.id === parseInt(event.value))[0].description;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n if(newState.addedQuestion === null)\r\n newState.addedQuestion = {};\r\n\r\n newState.addedQuestion.questionTypeId = parseInt(event.value);\r\n return newState;\r\n });\r\n }\r\n\r\n handleQuestionFormAddClicked = (e, name, value) => {\r\n const { eventId } = this.props.programDef;\r\n const {questionName, questionDescription, questionTypeId} = this.state.addedQuestion;\r\n \r\n this.props.addQuestion(eventId, {\r\n questionName,\r\n questionText: questionDescription,\r\n questionTypeId\r\n });\r\n\r\n this.handleToggleQuestionModal();\r\n }\r\n\r\n handleOptionFormSaveClicked = () => {\r\n const { eventId } = this.props.programDef;\r\n const { questionId } = this.state.selectedQuestion;\r\n const { selectedOption } = this.state;\r\n\r\n selectedOption.questionId = questionId;\r\n \r\n selectedOption.optionId === 0 ? \r\n this.props.addQuestionOption(eventId, questionId, selectedOption) : \r\n this.props.updateQuestionOption(questionId, selectedOption.optionId, selectedOption);\r\n\r\n this.handleToggleOptionModal();\r\n }\r\n\r\n handleOptionDeleted = () => {\r\n const { eventId } = this.props.programDef;\r\n const { questionId } = this.state.selectedQuestion;\r\n const { selectedOption } = this.state;\r\n\r\n selectedOption.questionId = questionId;\r\n \r\n this.props.removeQuestionOption(eventId, questionId, selectedOption.optionId);\r\n this.handleToggleOptionModal();\r\n }\r\n\r\n handleQuestionClicked = event => {\r\n const { id } = event.target;\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.selectedOptions = \r\n prevState.questions.filter(q => q.id === parseInt(id,10))[0].options\r\n \r\n return newState;\r\n }, () => this.props.formHasChanged())\r\n }\r\n\r\n handleQuestionEditClicked = event => {\r\n const { id } = event.target;\r\n const { questions } = this.props;\r\n\r\n // Get the selected question from REDUX\r\n const question = questions.filter(q => q.questionId === parseInt(id))[0];\r\n this.setState(prevState =>{\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedQuestion = question;\r\n return newState;\r\n }, () => this.props.formHasChanged())\r\n }\r\n\r\n handleQuestionDeleteClicked = event => {\r\n const { id } = event.target;\r\n const { eventId } = this.props.programDef;\r\n\r\n // remove the selected question from REDUX\r\n this.props.removeQuestion(eventId, id);\r\n }\r\n \r\n handleQuestionTypeChanged = event => {\r\n\r\n const { QuestionTypes } = questionTypes;\r\n const typeDesc = QuestionTypes.filter(qt => qt.id === parseInt(event.value))[0].description;\r\n \r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedQuestion.questionTypeId = parseInt(event.value);\r\n newState.selectedQuestion.questionTypeDescription = typeDesc;\r\n return newState;\r\n });\r\n }\r\n\r\n handleQuestionAdd = e => {\r\n const { programDef } = this.props;\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.addedQuestion = { displayOrder: programDef.questions.length + 1 };\r\n\r\n newState.editQuestionModal = !prevState.editQuestionModal;\r\n return newState;\r\n }, () => this.props.formHasChanged());\r\n }\r\n\r\n handleQuestionSave = e => {\r\n e.preventDefault();\r\n\r\n const { eventId } = this.props.programDef;\r\n const { updateQuestion } = this.props;\r\n const { selectedQuestion } = this.state;\r\n\r\n updateQuestion(eventId, selectedQuestion.questionId, selectedQuestion);\r\n }\r\n\r\n handleFormUpdated = (event, name, value) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedQuestion[name] = value;\r\n return newState;\r\n }, () => {\r\n this.props.formHasChanged()\r\n });\r\n }\r\n\r\n\r\n render() {\r\n const { questions } = this.props;\r\n const { QuestionTypes } = questionTypes;\r\n const { loading, questionsLoading } = this.props;\r\n\r\n const transformedQuestions = \r\n typeof questions === 'undefined' || \r\n questions === null ? \r\n null : \r\n questions.map((question, qKey) => {\r\n return {\r\n id: question.questionId,\r\n qLink: {\r\n id: question.questionId,\r\n text: question.questionText,\r\n handleQuestionEditClicked: e => this.handleQuestionEditClicked(e)\r\n }, \r\n link: {\r\n id: question.questionId,\r\n text: question.questionText,\r\n handleQuestionEditClicked: e => this.handleQuestionEditClicked(e),\r\n handleQuestionDeleteClicked: e => this.handleQuestionDeleteClicked(e)\r\n },\r\n order: question.displayOrder,\r\n typeId: question.questionTypeId,\r\n type: question.questionTypeDescription,\r\n options: question.questionOptions === null ? null : question.questionOptions.map((option, oKey) => {\r\n return {\r\n id: option.optionId,\r\n name: option.optionName\r\n }\r\n }),\r\n updateMyData: (id,value) => this.handleQuestionOrderChanged(id,value) \r\n }\r\n })\r\n\r\n return ((typeof loading === 'undefined' || loading === true) || \r\n (typeof questionsLoading === 'undefined' || questionsLoading === true)) ?\r\n (|
) : \r\n questions === null || questions.length === 0 ?\r\n \r\n \r\n No Questions\r\n \r\n
:\r\n (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Program Questions\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {this.state.selectedQuestion === null ? \r\n Please Select a Question
:\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n addQuestion: (eventId, question) => \r\n dispatch(eventActions.addQuestion(eventId, question)),\r\n addQuestionOption: (eventId, questionId, option) => \r\n dispatch(eventActions.addQuestionOption(eventId, questionId, option)),\r\n formHasChanged: () => dispatch(authActions.formHasChanged()),\r\n removeQuestion: (eventId, questionId) => \r\n dispatch(eventActions.removeQuestion(eventId, questionId)),\r\n removeQuestionOption: (eventId, questionId, optionId) => \r\n dispatch(eventActions.removeQuestionOption(eventId, questionId, optionId)),\r\n getEventQuestion: (eventId, questionId) => \r\n dispatch(eventActions.getEventQuestion(eventId, questionId)),\r\n showDialog: (dialogType, dialogProps) => \r\n dispatch(dialogActions.showDialog(dialogProps, dialogType)), \r\n updateQuestion: (eventId, questionId, question) => \r\n dispatch(eventActions.updateQuestion(eventId, questionId, question)),\r\n updateQuestionOption: (questionId, optionId, option) => \r\n dispatch(eventActions.updateQuestionOption(questionId, optionId, option))\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n programDef,\r\n programLoading,\r\n programQuestionsLoading\r\n } = state.programApplications;\r\n\r\n return {\r\n programDef,\r\n questions: typeof programDef === 'undefined' || \r\n programDef === null ? \r\n null : \r\n programDef.questions,\r\n loading: programLoading,\r\n questionsLoading: programQuestionsLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(QuestionsList);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { eventActions } from '../../../_actions';\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Col,\r\n Container,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nclass EditContactNumber extends Component {\r\n state = {\r\n eventId: null,\r\n contactId: null,\r\n contactName: '',\r\n officeNumber: '',\r\n mobileNumber: '',\r\n contactEmail: ''\r\n }\r\n \r\n render() {\r\n\r\n return (\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n Create Contact
\r\n \r\n \r\n \r\n {/* \r\n
*/}\r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n programDef, \r\n eventLoading \r\n } = state.programApplications;\r\n\r\n return {\r\n contacts: typeof programDef === 'undefined' || \r\n programDef === null ? \r\n null : \r\n programDef.contacts,\r\n loading: eventLoading\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n addContact: (eventId, contact) => {\r\n dispatch(eventActions.addEventContact(eventId, contact))\r\n }\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps)(EditContactNumber);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { dialogActions, eventActions } from '../../_actions';\r\nimport { Colxx } from \"../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Row \r\n} from \"reactstrap\";\r\n\r\nimport ReactTable from \"react-table\";\r\n\r\nimport EditContactNumber from './EditContactNumber/EditContactNumber';\r\n\r\nimport Spinner from '../Spinner/Spinner';\r\n\r\nimport 'react-table/react-table.css'\r\n\r\nconst dataTableColumns = [\r\n {\r\n Header: \"Name\",\r\n accessor: \"qLink\",\r\n Cell: props => (\r\n props.value.handleContactEditClicked(e)}\r\n >\r\n {props.value.text}\r\n )\r\n },\r\n {\r\n Header: \"Office Number\",\r\n accessor: \"officeNumber\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"Mobile Number\",\r\n accessor: \"mobileNumber\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"Email\",\r\n accessor: \"contactEmail\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"Action\",\r\n accessor: \"aLink\",\r\n Cell: props => (\r\n props.value.handleContactDeleteClicked(e)}\r\n >\r\n Remove\r\n )\r\n }];\r\n\r\n\r\nclass EventContactsList extends Component {\r\n state={\r\n editOptionModal: false,\r\n editContactModal: false,\r\n addedContact: null\r\n }\r\n\r\n handleToggleContactModal = () => {\r\n this.setState(prevState => { return { editContactModal: !prevState.editContactModal }});\r\n }\r\n \r\n handleContactFormAddClicked = (e, name, value) => {\r\n\r\n const { eventId } = this.props.programDef;\r\n\r\n this.props.addContactNumber(eventId, this.state.selectedContact);\r\n this.handleToggleContactModal();\r\n }\r\n\r\n handleContactFormAdded = (e, name, value) => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n if(newState.addedContact === null)\r\n newState.addedContact = {};\r\n\r\n newState.addedContact[name] = value;\r\n return newState;\r\n }) \r\n // () => { console.log(this.state) })\r\n }\r\n\r\n handleOptionDeleted = () => {\r\n const { questionId } = this.state.selectedQuestion;\r\n const { selectedOption } = this.state;\r\n\r\n selectedOption.questionId = questionId;\r\n \r\n this.props.removeQuestionOption(questionId, selectedOption.optionId);\r\n this.handleToggleOptionModal();\r\n }\r\n\r\n handleQuestionClicked = event => {\r\n const { id } = event.target;\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n\r\n newState.selectedOptions = \r\n prevState.questions.filter(q => q.id === parseInt(id,10))[0].options\r\n \r\n return newState;\r\n })\r\n }\r\n\r\n handleContactEditClicked = event => {\r\n const { id } = event.target;\r\n const { contacts } = this.props;\r\n\r\n // Get the selected contact from REDUX\r\n const contact = contacts.filter(q => q.contactId === id)[0];\r\n this.setState(prevState =>{\r\n const newState = Object.assign({}, prevState);\r\n newState.addedContact = contact;\r\n newState.addedContact['isNew'] = false;\r\n return newState;\r\n }, () => {\r\n this.handleToggleContactModal();\r\n })\r\n }\r\n\r\n handleContactDeleteClicked = event => {\r\n const { id } = event.target;\r\n const { contacts, removeEventContact } = this.props;\r\n const { eventId } = this.props.programDef;\r\n\r\n // Get the selected contact from REDUX\r\n const contact = contacts.filter(q => q.contactId === id)[0];\r\n removeEventContact(eventId, contact.contactId);\r\n }\r\n\r\n handleContactNumberAdd = e => {\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n \r\n newState.addedContact = {};\r\n newState.editContactModal = !prevState.editContactModal;\r\n return newState;\r\n });\r\n }\r\n\r\n handleContactNumberSave = e => {\r\n e.preventDefault();\r\n\r\n const { \r\n updateEventContact, \r\n addEventContact \r\n } = this.props;\r\n\r\n const { addedContact } = this.state;\r\n const { eventId } = this.props.programDef;\r\n \r\n typeof addedContact.contactId === 'undefined' || addedContact.contactId === '' ? \r\n addEventContact(eventId, addedContact) :\r\n updateEventContact(eventId, addedContact.contactId, addedContact);\r\n\r\n this.handleToggleContactModal();\r\n }\r\n\r\n handleFormUpdated = (event, name, value) => {\r\n\r\n this.setState(prevState => {\r\n const newState = Object.assign({}, prevState);\r\n newState.selectedContact[name] = value;\r\n return newState;\r\n }, () => {\r\n // console.log(this.state);\r\n });\r\n }\r\n\r\n render() {\r\n const { contacts } = this.props;\r\n const { loading, programDef } = this.props;\r\n\r\n const transformedContacts = \r\n typeof contacts === 'undefined' || \r\n contacts === null ? \r\n null : \r\n contacts.map((contact, qKey) => {\r\n return {\r\n id: contact.contactId,\r\n qLink: {\r\n id: contact.contactId,\r\n text: contact.contactName,\r\n handleContactEditClicked: e => this.handleContactEditClicked(e)\r\n }, \r\n link: {\r\n id: contact.contactId,\r\n text: contact.contactName,\r\n handleContactEditClicked: e => this.handleContactEditClicked(e)\r\n },\r\n officeNumber: contact.officeNumber,\r\n mobileNumber: contact.mobileNumber,\r\n contactEmail: contact.contactEmail,\r\n aLink: {\r\n id: contact.contactId,\r\n text: contact.contactName,\r\n handleContactDeleteClicked: e => this.handleContactDeleteClicked(e) \r\n }\r\n }\r\n })\r\n\r\n return ((typeof loading === 'undefined' && loading === true) && programDef === null) ?\r\n (|
) : \r\n contacts === null || contacts.length === 0 ?\r\n \r\n \r\n No Program Contacts\r\n \r\n
:\r\n (\r\n \r\n \r\n \r\n \r\n \r\n Program Contacts\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n addEventContact: (eventId, contact) => \r\n dispatch(eventActions.addEventContact(eventId, contact)),\r\n listEventContacts: eventId => \r\n dispatch(eventActions.listEventContacts(eventId)),\r\n getEventContact: (eventId, contactId) => \r\n dispatch(eventActions.getEventQuestion(eventId, contactId)),\r\n showDialog: (dialogType, dialogProps) => \r\n dispatch(dialogActions.showDialog(dialogProps, dialogType)),\r\n removeEventContact: (eventId, contactId) => \r\n dispatch(eventActions.removeEventContact(eventId, contactId)),\r\n updateEventContact: (eventId, contactId, contact) => \r\n dispatch(eventActions.updateEventContact(eventId, contactId, contact))\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n programDef,\r\n programLoading,\r\n programContactNumberLoading\r\n } = state.programApplications;\r\n\r\n return {\r\n programDef,\r\n contacts: typeof programDef === 'undefined' || \r\n programDef === null ? \r\n null : \r\n programDef.contacts,\r\n loading: programLoading,\r\n contactsLoading: programContactNumberLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EventContactsList);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Colxx } from \"../../CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n FormText,\r\n Col,\r\n Container,\r\n Form,\r\n Input,\r\n Modal,\r\n ModalHeader, \r\n ModalBody,\r\n ModalFooter,\r\n Row\r\n} from \"reactstrap\";\r\n\r\nimport ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';\r\n\r\nclass ProgramYearAlert extends Component {\r\n render() {\r\n\r\n const { \r\n isOpen,\r\n doSaveBtnClicked,\r\n doCancelBtnCliked\r\n } = this.props;\r\n \r\n return (\r\n \r\n \r\n Program Year Conflict Notification\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n | \r\n \r\n | \r\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 ProgramYearAlert;","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { authActions, eventActions } from '../../_actions';\r\n\r\nimport { Colxx } from \"../CustomBootstrap\";\r\nimport IntlMessages from \"../../util/IntlMessages\";\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n Dropdown,\r\n DropdownToggle,\r\n DropdownMenu,\r\n DropdownItem,\r\n Form,\r\n FormGroup, \r\n Input,\r\n Label,\r\n Row,\r\n Tooltip \r\n} from \"reactstrap\";\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faInfoCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport DatePicker from \"react-datepicker\";\r\nimport DropzoneComponent from 'react-dropzone-component';\r\nimport ReactQuill from \"react-quill\";\r\nimport \"react-quill/dist/quill.snow.css\";\r\nimport 'react-quill/dist/quill.bubble.css';\r\nimport NumericInput from 'react-numeric-input';\r\nimport InputMask from 'react-input-mask'; \r\nimport Cleave from 'cleave.js/react';\r\n\r\nimport ComponentsList from '../EventComponentsList/EventComponentsList';\r\nimport QuestionsList from '../QuestionsList/QuestionsList';\r\nimport Spinner from '../Spinner/Spinner';\r\nimport EventContactsList from '../EventContactsList/EventContactsList';\r\nimport ProgramYearAlert from '../Shared/ProgramYearAlert/ProgramYearAlert';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport svg from 'external-svg-loader';\r\nimport appRoutes from 'appRoutes';\r\nimport { stubFalse } from 'lodash';\r\n\r\nvar ReactDOMServer = require('react-dom/server');\r\n\r\nconst LEGENDS_DIR_EVENT_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96'\r\n\r\nconst EMAIL_REGEX = '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$';\r\nconst ALPHA_REGEX = '^[A-Za-z\\\\s]+$';\r\nconst ALPHA_NUMERIC_REGEX = '[a-zA-Z0-9-,]+';\r\nconst PHONE_REGEX = '^(\\\\+\\\\d{1,2}\\\\s)?\\\\(?\\\\d{3}\\\\)?[\\\\s.-]?\\\\d{3}[\\\\s.-]?\\\\d{4}$';\r\nconst NUMBER_ONLY_REGEX = '[0-9]+';\r\n\r\nconst DEFAULT_LABEL_WIDTH = 2;\r\nconst DEFAULT_FIELD_WIDTH = 10;\r\n\r\nconst dateStyle = {\r\n color: 'red'\r\n}\r\n\r\nconst quillModules = {\r\n toolbar: [\r\n [{ 'header': [1,2,3,4,5,6, false]}],\r\n [ \"bold\", \"italic\", \"underline\", \"strike\", \"blockquote\"],\r\n [\r\n { list: \"ordered\" },\r\n { list: \"bullet\" },\r\n { indent: \"-1\" },\r\n { indent: \"+1\" }\r\n ],\r\n [\"link\", \"image\"]\r\n ]\r\n };\r\n \r\n const quillFormats = [\r\n \"header\",\r\n \"bold\",\r\n \"italic\",\r\n \"underline\",\r\n \"strike\",\r\n \"blockquote\",\r\n \"list\",\r\n \"bullet\",\r\n \"indent\",\r\n \"link\",\r\n \"image\"\r\n ];\r\n \r\nconst formfields = [\r\n { \r\n fields: [\r\n { type: 'text', id: 'eventName', name: 'eventName', placeHolder: 'Program Name', fieldWidth: 4, isLegendsAdmin: true },\r\n { \r\n type: 'dropdown', \r\n id: 'eventYear', \r\n name: 'eventYear', \r\n placeHolder: 'Program Year', \r\n fieldWidth: 2, \r\n items: [\r\n {key: '2025',\tdescription: '2025-2026'},\r\n {key: '2024',\tdescription: '2024-2025'},\r\n {key: '2023',\tdescription: '2023-2024'},\r\n {key: '2022',\tdescription: '2022-2023'},\r\n {key: '2021',\tdescription: '2021-2022'},\r\n {key: '2020',\tdescription: '2020-2021'},\r\n {key: '2019', description: '2019-2020'}\r\n ], \r\n isLegendsAdmin: false}\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'programDisplayName', name: 'programDisplayName', placeHolder: 'Program Display Name', fieldWidth: 4, isLegendsAdmin: true }\r\n ]\r\n },\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'activeEvent', name: 'activeEvent', placeHolder: 'Active', fieldWidth:4, isLegendsAdmin: true },\r\n { type: 'date', dataType: 'date', id: 'applicationDueDate', name: 'applicationDueDate', placeHolder: 'App Due Date', fieldWidth:4, isLegendsAdmin: false }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'date', dataType: 'date', id: 'startDate', name: 'startDate', placeHolder: 'Program Start Date', fieldWidth: 4, isLegendsAdmin: false },\r\n { type: 'date', dataType: 'date', id: 'endDate', name: 'endDate', placeHolder: 'Program End Date', fieldWidth: 4, isLegendsAdmin: false }\r\n ] \r\n },\r\n\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'eventDescription', name: 'eventDescription', placeHolder: 'Program Description', fieldWidth: 10, isLegendsAdmin: false }\r\n ] \r\n },\r\n\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'showFacebookLink', name: 'showFacebookLink', placeHolder: 'Facebook Link?', fieldWidth: 2, isLegendsAdmin: true },\r\n { type: 'text', id: 'facebookAddress', name: 'facebookAddress', placeHolder: 'Facebook', fieldWidth: 6, dependsOnFieldId: 'showFacebookLink', isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'showInstagramLink', name: 'showInstagramLink', placeHolder: 'Instagram Link?', fieldWidth: 2, isLegendsAdmin: true },\r\n { type: 'text', id: 'instagramAddress', name: 'instagramAddress', placeHolder: 'Instagram', fieldWidth: 6, dependsOnFieldId: 'showInstagramLink', isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'showTwitterLink', name: 'showTwitterLink', placeHolder: 'Twitter Link?', fieldWidth: 2, isLegendsAdmin: true },\r\n { type: 'text', id: 'twitterAddress', name: 'twitterAddress', placeHolder: 'Twitter', fieldWidth: 6, dependsOnFieldId: 'showTwitterLink', isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'applicationsRequiresAccept', name: 'applicationsRequiresAccept', placeHolder: 'Require Approval?', fieldWidth: 2, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'requireProgramFee', name: 'requireProgramFee', placeHolder: 'Require Fee', fieldWidth: 2, isLegendsAdmin: false },\r\n { \r\n type: 'masked-input', \r\n id: 'programFee', \r\n name: 'programFee', \r\n placeHolder: 'Program Fee', \r\n fieldWidth: 2, \r\n dependsOnFieldId: 'requireProgramFee', \r\n isLegendsAdmin: false \r\n }\r\n ] \r\n },\r\n\r\n {\r\n fields: [\r\n { type: 'checkbox', id: 'showLegalDisclaimer', name: 'showLegalDisclaimer', placeHolder: 'Show Legal Disclaimer?', fieldWidth: 2, isLegendsAdmin: false }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'legalDisclaimerMessage', name: 'legalDisclaimerMessage', placeHolder: 'Legal Disclaimer', fieldWidth: 10, dependsOnFieldId: 'showLegalDisclaimer', isLegendsAdmin: false }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'footerMessage', name: 'footerMessage', placeHolder: 'Footer Message', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'submissionMessage', name: 'submissionMessage', placeHolder: 'Submission Message', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'richtext', \r\n id: 'submissionConfirmatiomEmail', \r\n name: 'submissionConfirmatiomEmail', \r\n placeHolder: 'Submission Confirmation Email', \r\n fieldWidth: 10, \r\n showTestButton: true,\r\n showPaymentLink: true, \r\n isLegendsAdmin: true\r\n }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'richtext', \r\n id: 'acceptanceEmail', \r\n name: 'acceptanceEmail', \r\n placeHolder: 'Approval Email', \r\n fieldWidth: 10, \r\n showTestButton: true,\r\n showPaymentLink: true, \r\n isLegendsAdmin: true \r\n }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { \r\n type: 'richtext', \r\n id: 'denyEmail', \r\n name: 'denyEmail', \r\n placeHolder: 'Deny Email', \r\n fieldWidth: 10, \r\n showTestButton: true,\r\n showPaymentLink: true, \r\n isLegendsAdmin: true \r\n }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'eventClosedMessage', name: 'eventClosedMessage', placeHolder: 'Program Closed Message', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'eventAcceptModalMessage', name: 'eventAcceptModalMessage', placeHolder: 'Event Accept Modal Message', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'richtext', id: 'eventDenyModalMessage', name: 'eventDenyModalMessage', placeHolder: 'Event Deny Modal Message', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n },\r\n {\r\n fields: [\r\n { type: 'text', id: 'applicationUrl', name: 'applicationUrl', placeHolder: 'Application Url', fieldWidth: 10, isLegendsAdmin: true }\r\n ] \r\n } \r\n];\r\n\r\nvar dropzoneConfig = {\r\n thumbnailHeight: 160,\r\n maxFilesize: 2,\r\n renameFile: function(file) {\r\n var fileextesion = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length);\r\n fileextesion = fileextesion.replace(/[^a-zA-Z0-9]/g,'_');\r\n var filename = file.name.substring(0, file.name.lastIndexOf('.'));\r\n if (filename.length > 250) {\r\n filename = filename.substring(0, 250);\r\n }\r\n var newFileName = filename.replace(/[^a-zA-Z0-9]/g,'_') + \".\" + fileextesion;\r\n return newFileName;\r\n },\r\n init: function () {\r\n this.on(\"error\", function (file, message) {\r\n if(message.indexOf('File is too big') > -1)\r\n alert(\"The file that you are uploading is too large. Please upload a file that is less than 10 Megabytes\")\r\n else\r\n alert(message);\r\n this.removeFile(file);\r\n });\r\n this.on(\"addedfile\", function (file) {\r\n file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;\r\n });\r\n },\r\n previewTemplate: ReactDOMServer.renderToStaticMarkup(\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
![]()
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n | \r\n \r\n | \r\n
);\r\n\r\n handleMouseMove = e => {\r\n this.props.formHasChanged();\r\n }\r\n\r\n handleComponentDisplayOrderChanged = obj => {\r\n\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n let component = newState.componentDisplayOrder.filter(q => q.id === obj.id);\r\n if(component.length === 0)\r\n newState.componentDisplayOrder.push(obj);\r\n else\r\n component[0].value = obj.value;\r\n\r\n return newState;\r\n })\r\n }\r\n\r\n handleQuestionDisplayOrderChanged = obj => {\r\n\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n let question = newState.questionsDisplayOrder.filter(q => q.id === obj.id);\r\n if(question.length === 0)\r\n newState.questionsDisplayOrder.push(obj);\r\n else\r\n question[0].value = obj.value;\r\n\r\n return newState;\r\n })\r\n }\r\n\r\n render() {\r\n const { isLegendsAdmin, isFootballOpsAdmin, programDef, loading } = this.props;\r\n \r\n let isAdmin = false;\r\n let hasLegendsAdminRole = false;\r\n let hasFOPSAdminRole = false;\r\n\r\n if (typeof this.props.user !== 'undefined' && this.props.user !== null){\r\n isAdmin = this.props.user.isAdmin;\r\n hasLegendsAdminRole = this.props.user.hasLegendsAdminRole;\r\n hasFOPSAdminRole = this.props.user.hasFOPSAdminRole;\r\n }\r\n\r\n const renderedFields = isLegendsAdmin ? \r\n formfields.map((r, rKey) => {\r\n return {\r\n fields: r.fields.filter(f => f.isLegendsAdmin === true).map((field, fieldKey) => field)\r\n }\r\n }) : \r\n isFootballOpsAdmin ? formfields :\r\n formfields.map((r, rKey) => {\r\n return {\r\n fields: r.fields.filter(f => !f.placeHolder.toLowerCase().includes(\"legal disclaimer\")).map((field, fieldKey) => field)\r\n }\r\n });\r\n\r\n // console.log(renderedFields)\r\n\r\n return typeof loading !== 'undefined' && loading === false && programDef !== null ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Program Information for ${programDef.eventName}`}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : \r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { isLegendsDirectory, isFootballOpsSubmission, programDef, programLoading } = state.programApplications;\r\n const { user } = state.auth;\r\n\r\n return {\r\n isLegendsAdmin: isLegendsDirectory,\r\n isFootballOpsAdmin: isFootballOpsSubmission,\r\n programDef,\r\n loading: programLoading,\r\n user\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n formHasChanged: () => dispatch(authActions.formHasChanged()),\r\n getProgramDefinition: programId => dispatch(eventActions.getEventDefinition(programId)),\r\n saveProgramDef: (programId, program) => dispatch(eventActions.saveEventDetails(programId, program)),\r\n sendTestEmail: (eventId, eventRequest) => dispatch(eventActions.sendTestMessage(eventId, eventRequest)),\r\n updateQuestionOrder: (eventId, questionId, order) =>\r\n dispatch(eventActions.updateQuestionOrder(eventId, questionId, order)),\r\n updateComponentOrder: (eventId, componentId, order) =>\r\n dispatch(eventActions.updateComponentOrder(eventId, componentId, order))\r\n }\r\n}\r\nexport default connect(\r\n mapStateToProps, \r\n mapDispatchToProps\r\n)\r\n(FormBuilder);\r\n","import React, { useEffect, useRef } from 'react';\r\nimport { useOktaAuth } from '@okta/okta-react';\r\nimport * as OktaSignIn from '@okta/okta-signin-widget';\r\nimport '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';\r\n\r\nimport appRoutes from 'appRoutes';\r\n\r\n// import config from './config';\r\n\r\nconst Login = ({ setCorsErrorModalOpen }) => {\r\n const { oktaAuth } = useOktaAuth();\r\n const widgetRef = useRef();\r\n\r\n useEffect(() => {\r\n if (!widgetRef.current) {\r\n return false;\r\n }\r\n\r\n // const { issuer, clientId, redirectUri, scopes, useInteractionCode } = config.oidc;\r\n const widget = new OktaSignIn({\r\n /**\r\n * Note: when using the Sign-In Widget for an OIDC flow, it still\r\n * needs to be configured with the base URL for your Okta Org. Here\r\n * we derive it from the given issuer for convenience.\r\n */\r\n // baseUrl: issuer.split('/oauth2')[0],\r\n baseUrl: 'https://login.nfl.net',\r\n clientId: '0oabqtrfa6Jc6v9kY2p7',\r\n // redirectUri: window.location.origin + '/login/callback',\r\n redirectUri: 'https://ww2.nfl.info/nflprograms/login/callback',\r\n logo: 'images/nfl-logo.png',\r\n i18n: {\r\n en: {\r\n 'primaryauth.title': 'Sign in to NFL Programs',\r\n },\r\n },\r\n authParams: {\r\n // To avoid redirect do not set \"pkce\" or \"display\" here. OKTA-335945\r\n issuer: 'https://login.nfl.net/oauth2/aus8e24vvhMTJNjSw2p7',\r\n scopes: ['openid', 'profile', 'email'],\r\n },\r\n useInteractionCodeFlow: false, // Set to true, if your org is OIE enabled\r\n });\r\n\r\n // const widget = new OktaSignIn({\r\n // /**\r\n // * Note: when using the Sign-In Widget for an OIDC flow, it still\r\n // * needs to be configured with the base URL for your Okta Org. Here\r\n // * we derive it from the given issuer for convenience.\r\n // */\r\n // // baseUrl: issuer.split('/oauth2')[0],\r\n // baseUrl: process.env.REACT_APP_OKTA_BASE_URL,\r\n // clientId: process.env.REACT_APP_OKTA_CLIENT_ID,\r\n // redirectUri: window.location.origin + process.env.REACT_APP_OKTA_REDIRECT_URI,\r\n // logo: '/react.svg',\r\n // i18n: {\r\n // en: {\r\n // 'primaryauth.title': 'Sign in to NFL Programs',\r\n // },\r\n // },\r\n // authParams: {\r\n // // To avoid redirect do not set \"pkce\" or \"display\" here. OKTA-335945\r\n // // issuer: 'https://login.nfl.net/oauth2/aus8e24vvhMTJNjSw2p7',\r\n // issuer: process.env.REACT_APP_OKTA_ISSUER_ID,\r\n // scopes: ['openid', 'profile', 'email'],\r\n // },\r\n // useInteractionCodeFlow: false, // Set to true, if your org is OIE enabled\r\n // });\r\n widget.renderEl(\r\n { el: widgetRef.current },\r\n (res) => {\r\n console.log(res);\r\n oktaAuth.handleLoginRedirect(res.tokens);\r\n },\r\n (err) => {\r\n throw err;\r\n },\r\n );\r\n\r\n // Note: Can't distinguish CORS error from other network errors\r\n const isCorsError = (err) => (err.name === 'AuthApiError' && !err.statusCode);\r\n\r\n widget.on('afterError', (_context, error) => {\r\n if (isCorsError(error)) {\r\n setCorsErrorModalOpen(true);\r\n }\r\n });\r\n\r\n return () => widget.remove();\r\n }, [oktaAuth]);\r\n\r\n return (\r\n \r\n );\r\n};\r\nexport default Login;\r\n\r\n// import _ from 'lodash';\r\n// import React, { Component, Fragment } from \"react\";\r\n// import { connect } from \"react-redux\";\r\n// import { Redirect } from 'react-router-dom'\r\n\r\n// import { withOktaAuth } from '@okta/okta-react';\r\n// import { OktaAuth } from '@okta/okta-auth-js';\r\n\r\n// import { authActions } from '../../../_actions';\r\n// import { Colxx } from \"../../CustomBootstrap\";\r\n\r\n// import {\r\n// Button,\r\n// Card,\r\n// CardBody,\r\n// CardHeader,\r\n// Form,\r\n// FormGroup,\r\n// Input,\r\n// Label,\r\n// Popover,\r\n// PopoverBody,\r\n// Row\r\n// } from \"reactstrap\";\r\n\r\n// import appRoutes from 'appRoutes';\r\n// import * as AuthenticationManager from '../../../util/AuthenticationManager';\r\n\r\n// import SmallSpinner from '../../SmallSpinner/SmallSpinner';\r\n\r\n// const ALPHA_REGEX = '^[A-Za-z\\\\s]+$';\r\n// const ALPHA_NUMERIC_REGEX = '[a-zA-Z0-9-,]+';\r\n\r\n// // \\((?!2001)[0-9a-zA-z _\\.\\-:]*\\)\r\n\r\n// const DEFAULT_LABEL_WIDTH = 4;\r\n// const DEFAULT_FIELD_WIDTH = 8;\r\n\r\n// class OktaLogin extends Component {\r\n// constructor(props) {\r\n// super(props);\r\n\r\n// this.state = {\r\n// username: '',\r\n// password: '',\r\n// popoverOpen: false,\r\n// showMessagePanel: false,\r\n// requiredFields: [\r\n// { name: 'username', friendlyName: 'User Name', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n// { name: 'password', friendlyName: 'Password', isValid: false, regex: ALPHA_NUMERIC_REGEX }\r\n// ],\r\n// returnUrl: null\r\n// };\r\n \r\n// this.oktaAuth = new OktaAuth({ \r\n// issuer: 'https://login.nfl.net/oauth2/default',\r\n// url: 'https://login.nfl.net/' \r\n// })\r\n// }\r\n\r\n// onUserLogin() {\r\n// if (this.state.username !== \"\" && this.state.password !== \"\") {\r\n// // this.props.loginUser(this.state, this.props.history);\r\n// }\r\n// }\r\n\r\n// componentDidMount() {\r\n// document.body.classList.add(\"background\");\r\n// }\r\n \r\n// componentWillUnmount() {\r\n// document.body.classList.remove(\"background\");\r\n// }\r\n\r\n// getFormInput = event => {\r\n// const { id, name, value } = event.target;\r\n// const myKey = typeof id === 'undefined' ? name : id;\r\n// this.updateState(myKey, value);\r\n// }\r\n\r\n// updateState = (name, value) => {\r\n\r\n// this.setState(prevState => {\r\n// let newState = Object.assign({}, prevState);\r\n// newState[name] = value;\r\n\r\n// // DO FIELD VALIDATION CHECK HERE\r\n// const requiredField = newState.requiredFields.filter(rf => rf.name === name)[0];\r\n\r\n// if(typeof requiredField !== 'undefined' && \r\n// requiredField !== null) {\r\n// // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n// var re = new RegExp(requiredField.regex);\r\n// requiredField.isValid = re.test(value);\r\n// }\r\n\r\n// return newState;\r\n// }, \r\n// //() => console.log(this.state)\r\n// );\r\n// }\r\n\r\n// handleFormValid = () => {\r\n// const isValid = this.state.requiredFields.filter(rf => rf.isValid === false).length > 0;\r\n// return !isValid\r\n// }\r\n\r\n// handleSignIn = event => {\r\n// event.preventDefault();\r\n\r\n// this.props.oktaAuth.signIn({\r\n// username: this.state.username,\r\n// password: this.state.password\r\n// }).then(res => {\r\n// const sessionToken = res.sessionToken;\r\n// this.setState(\r\n// { sessionToken },\r\n// // sessionToken is a one-use token, so make sure this is only called once\r\n// () => this.props.oktaAuth.signInWithRedirect({sessionToken})\r\n// );\r\n// })\r\n// .catch(err => console.log('Found an error', err));\r\n// }\r\n\r\n// formatRequiredFieldsMsg = () => {\r\n// let lis = [];\r\n// let message = 'All required fields have values';\r\n// const missingFields = this.state.requiredFields.filter(rf => rf.isValid === false);\r\n\r\n// if(typeof missingFields !== 'undefined' && missingFields.length > 0) {\r\n// for(let i=0; i <= missingFields.length -1; i++) {\r\n// lis.push({missingFields[i].friendlyName});\r\n// }\r\n// }\r\n\r\n// return lis.length === 0 ? \r\n// : \r\n// (\r\n//
Please supply values for:
\r\n//
\r\n//
\r\n// \r\n// \r\n// NFL Programs
\r\n// \r\n// \r\n//
\r\n\r\n// \r\n// \r\n// \r\n// \r\n// Please Enter Login Credentials
\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n//
\r\n \r\n// {typeof userAuthenticating !== 'undefined' && userAuthenticating ? \r\n// : \r\n// \r\n//
\r\n// {this.formatRequiredFieldsMsg()}\r\n// \r\n// \r\n// {props.value}
\r\n },\r\n {\r\n Header: \"End Date\",\r\n accessor: \"endDate\",\r\n Cell: props => {props.value}
\r\n },\r\n {\r\n Header: \"Due Date\",\r\n accessor: \"dueDate\",\r\n Cell: props => {props.value}
\r\n }];\r\n\r\nconst EventList = props => {\r\n const { authState, oktaAuth } = useOktaAuth();\r\n const { loading, events } = props;\r\n\r\n useEffect(() => {\r\n if (authState && authState.isAuthenticated) {\r\n const accessToken = oktaAuth.getAccessToken();\r\n props.listEvents();\r\n }\r\n }, [authState]);\r\n\r\n const convertFromISODate = strDate => {\r\n const date = new Date(strDate);\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n }\r\n\r\n const transformEvents = typeof events !== 'undefined' && events !== null ?\r\n events.filter(event => event.eventId !== LEGENDS_BUSINESS_DIRECTORY_ID.toLowerCase() && event.eventId !== FOOTBALLOPS_SUBMISSION_ID.toLowerCase()).map((evnt, kEvnt) => {\r\n return {\r\n id: evnt.eventId,\r\n qLink: {\r\n id: evnt.eventId,\r\n text: evnt.eventName,\r\n url: props.match.url,\r\n handleEventEditClicked: e => this.handleEventEditClicked(e)\r\n }, \r\n link: {\r\n id: evnt.eventId,\r\n text: evnt.eventName,\r\n handleEventEditClicked: e => this.handleEventEditClicked(e)\r\n },\r\n startDate: convertFromISODate(evnt.startDate),\r\n endDate: convertFromISODate(evnt.endDate),\r\n dueDate: convertFromISODate(evnt.applicationDueDate)\r\n }\r\n }) : null;\r\n\r\n return !authState.isAuthenticated ? : \r\n typeof loading !== 'undefined' && !loading ? (\r\n \r\n \r\n \r\n \r\n \r\n Please Select Program:\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : \r\n}\r\n\r\nconst mapStateToProps = state => {\r\n const { \r\n eventsLoading,\r\n events\r\n } = state.eventParticipants;\r\n \r\n return {\r\n loading: eventsLoading,\r\n events\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n handleEventEditClicked: (eventId) => \r\n dispatch(eventActions.getEventDetails(eventId)),\r\n listEvents: () => dispatch(eventActions.listEvents())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps)(EventList)\r\n","import React, { useEffect } from 'react';\r\nimport { Redirect, Route, Switch, useHistory } from \"react-router-dom\";\r\nimport { connect } from 'react-redux';\r\nimport { useOktaAuth, SecureRoute, LoginCallback } from '@okta/okta-react';\r\n\r\nimport EventParticipants from \"../../components/EventParticipants/EventParticipants\";\r\nimport EventParticipant from \"../../components/EventParticipants/EventParticipantForm/EventParticipantForm\";\r\nimport EventParticipantEdit from \"../../components/EventParticipants/EventParticipantEdit/EventParticipantEdit\";\r\nimport EventsList from '../../components/EventList/EventList';\r\nimport FormsBuilder from '../../components/FormBuilder/FormBuilder';\r\n\r\n// import LoginForm from '../../components/Login/Login';\r\nimport OktaLogin from '../../components/Okta/Login/OktaLogin';\r\n\r\nimport ParticipantsEventList from '../../components/EventParticipants/EventList/EventList';\r\nimport Spinner from '../../components/Spinner/Spinner';\r\n\r\n// import PrivateRoute from '../PrivateRoute';\r\n// import AuthLayer from '../../components/Shared/AuthLayer/AuthLayer'\r\n\r\nimport appRoutes from 'appRoutes';\r\n \r\nconst Admin = (props) => {\r\n const { match, loading } = props;\r\n const { authState, oktaAuth } = useOktaAuth();\r\n\r\n const history = useHistory();\r\n\r\n const onAuthResume = async () => { \r\n history.push(appRoutes.baseRoute + '/login');\r\n }\r\n\r\n useEffect(() => {\r\n if (authState && authState.isAuthenticated) {\r\n const accessToken = oktaAuth.getAccessToken();\r\n }\r\n }, [authState])\r\n\r\n return typeof loading === 'undefined' || loading === 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\nconst mapStateToProps = state => {\r\n\r\n const { user, loading } = state.auth;\r\n\r\n return {\r\n loading,\r\n user\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(Admin);\r\n","import React, { useEffect } from 'react';\r\nimport { Redirect, Route, Switch, useHistory } from \"react-router-dom\";\r\nimport { connect } from 'react-redux';\r\nimport { useOktaAuth, SecureRoute, LoginCallback } from '@okta/okta-react';\r\n\r\nimport OktaLogin from '../../components/Okta/Login/OktaLogin';\r\n\r\nimport EventParticipants from \"../../components/EventParticipants/EventParticipants\";\r\nimport EventParticipant from \"../../components/EventParticipants/EventParticipantForm/EventParticipantForm\";\r\nimport EventParticipantEdit from \"../../components/EventParticipants/EventParticipantEdit/EventParticipantEdit\";\r\n\r\nimport FormsBuilder from '../../components/FormBuilder/FormBuilder';\r\n\r\nimport Spinner from '../../components/Spinner/Spinner';\r\nimport appRoutes from 'appRoutes';\r\n \r\nconst NflLegends = (props) => {\r\n const { match, loading } = props;\r\n const { authState, oktaAuth } = useOktaAuth();\r\n\r\n const LEGENDS_EVENT_ID = '490F2883-C927-4120-9D1E-3DB1AEEC5A96';\r\n \r\n const history = useHistory();\r\n\r\n const onAuthResume = async () => { \r\n history.push(appRoutes.baseRoute + '/login');\r\n }\r\n\r\n useEffect(() => {\r\n if (authState && authState.isAuthenticated) {\r\n const accessToken = oktaAuth.getAccessToken(); \r\n }\r\n }, [authState])\r\n\r\n return typeof loading === 'undefined' || loading === 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\nconst mapStateToProps = state => {\r\n const { user, loading } = state.auth;\r\n\r\n return {\r\n loading,\r\n user\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(NflLegends);\r\n","import React, { useEffect } from 'react';\r\nimport { Redirect, Route, Switch, useHistory } from \"react-router-dom\";\r\nimport { connect } from 'react-redux';\r\nimport { useOktaAuth, SecureRoute, LoginCallback } from '@okta/okta-react';\r\n\r\nimport OktaLogin from '../../components/Okta/Login/OktaLogin';\r\n\r\nimport EventParticipants from \"../../components/EventParticipants/EventParticipants\";\r\nimport EventParticipant from \"../../components/EventParticipants/EventParticipantForm/EventParticipantForm\";\r\nimport EventParticipantEdit from \"../../components/EventParticipants/EventParticipantEdit/EventParticipantEdit\";\r\n\r\nimport FormsBuilder from '../../components/FormBuilder/FormBuilder';\r\n\r\nimport Spinner from '../../components/Spinner/Spinner';\r\nimport appRoutes from 'appRoutes';\r\n \r\nconst FootballOps = (props) => {\r\n const { match, loading } = props;\r\n const { authState, oktaAuth } = useOktaAuth();\r\n\r\n\r\n const history = useHistory();\r\n\r\n const onAuthResume = async () => { \r\n history.push(appRoutes.baseRoute + '/login');\r\n }\r\n\r\n useEffect(() => {\r\n if (authState && authState.isAuthenticated) {\r\n const accessToken = oktaAuth.getAccessToken(); \r\n }\r\n }, [authState])\r\n\r\n return typeof loading === 'undefined' || loading === 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\nconst mapStateToProps = state => {\r\n const { user, loading } = state.auth;\r\n\r\n return {\r\n loading,\r\n user\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(FootballOps);\r\n","export const mapOrder = (array, order, key) => {\r\n array.sort(function (a, b) {\r\n var A = a[key], B = b[key];\r\n if (order.indexOf(A + \"\") > order.indexOf(B + \"\")) {\r\n return 1;\r\n } else {\r\n return -1;\r\n }\r\n });\r\n return array;\r\n };\r\n \r\n \r\n export const getDateWithFormat = () => {\r\n const today = new Date();\r\n let dd = today.getDate();\r\n let mm = today.getMonth() + 1; //January is 0!\r\n \r\n var yyyy = today.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n }\r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n }\r\n return dd + '.' + mm + '.' + yyyy;\r\n }\r\n \r\n export const getCurrentTime=()=>{\r\n const now = new Date();\r\n return now.getHours() + \":\" + now.getMinutes()\r\n }\r\n \r\n export const addCommas = (nStr) => {\r\n nStr += \"\";\r\n var x = nStr.split(\".\");\r\n var x1 = x[0];\r\n var x2 = x.length > 1 ? \".\" + x[1] : \"\";\r\n var rgx = /(\\d+)(\\d{3})/;\r\n while (rgx.test(x1)) {\r\n x1 = x1.replace(rgx, \"$1\" + \",\" + \"$2\");\r\n }\r\n return x1 + x2;\r\n }\r\n "," export const ThemeColors = () => {\r\n let rootStyle = getComputedStyle(document.body);\r\n return {\r\n themeColor1 : rootStyle.getPropertyValue(\"--theme-color-1\").trim(),\r\n themeColor2 : rootStyle.getPropertyValue(\"--theme-color-2\").trim(),\r\n themeColor3 : rootStyle.getPropertyValue(\"--theme-color-3\").trim(),\r\n themeColor4 : rootStyle.getPropertyValue(\"--theme-color-4\").trim(),\r\n themeColor5 : rootStyle.getPropertyValue(\"--theme-color-5\").trim(),\r\n themeColor6 : rootStyle.getPropertyValue(\"--theme-color-6\").trim(),\r\n themeColor1_10 : rootStyle.getPropertyValue(\"--theme-color-1-10\").trim(),\r\n themeColor2_10 : rootStyle.getPropertyValue(\"--theme-color-2-10\").trim(),\r\n themeColor3_10 : rootStyle.getPropertyValue(\"--theme-color-3-10\").trim(),\r\n themeColor4_10 : rootStyle.getPropertyValue(\"--theme-color-3-10\").trim(),\r\n themeColor5_10 : rootStyle.getPropertyValue(\"--theme-color-3-10\").trim(),\r\n themeColor6_10 : rootStyle.getPropertyValue(\"--theme-color-3-10\").trim(),\r\n primaryColor: rootStyle.getPropertyValue(\"--primary-color\").trim(),\r\n foregroundColor: rootStyle.getPropertyValue(\"--foreground-color\").trim(),\r\n separatorColor: rootStyle.getPropertyValue(\"--separator-color\").trim()\r\n }\r\n}","import React, { Fragment } from \"react\";\r\nimport ChartComponent, { Chart } from \"react-chartjs-2\";\r\nimport { addCommas } from \"../../util/Utils\";\r\nimport { ThemeColors } from \"../../util/ThemeColors\";\r\n\r\nexport const chartTooltip = {\r\n backgroundColor: ThemeColors().foregroundColor,\r\n titleFontColor: ThemeColors().primaryColor,\r\n borderColor: ThemeColors().separatorColor,\r\n borderWidth: 0.5,\r\n bodyFontColor: ThemeColors().primaryColor,\r\n bodySpacing: 10,\r\n xPadding: 15,\r\n yPadding: 15,\r\n cornerRadius: 0.15\r\n};\r\n\r\nexport const chartTooltipCustom = {\r\n ...chartTooltip, callbacks: {\r\n label: function (tooltipItem, data) {\r\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\r\n if (label) {\r\n label += ': ';\r\n }\r\n label += Math.round(tooltipItem.yLabel * 100) / 100;\r\n return label + \" Test\";\r\n },\r\n title: function (tooltipItem, data) { \r\n return tooltipItem[0].xLabel + \" Test\";\r\n }\r\n }\r\n};\r\n\r\nexport const centerTextPlugin = {\r\n afterDatasetsUpdate: function (chart) { },\r\n beforeDraw: function (chart) {\r\n var width = chart.chartArea.right;\r\n var height = chart.chartArea.bottom;\r\n var ctx = chart.chart.ctx;\r\n ctx.restore();\r\n\r\n var activeLabel = chart.data.labels[0];\r\n var activeValue = chart.data.datasets[0].data[0];\r\n var dataset = chart.data.datasets[0];\r\n var meta = dataset._meta[Object.keys(dataset._meta)[0]];\r\n var total = meta.total;\r\n\r\n var activePercentage = parseFloat(((activeValue / total) * 100).toFixed(1));\r\n activePercentage = chart.legend.legendItems[0].hidden\r\n ? 0\r\n : activePercentage;\r\n\r\n if (chart.pointAvailable) {\r\n activeLabel = chart.data.labels[chart.pointIndex];\r\n activeValue =\r\n chart.data.datasets[chart.pointDataIndex].data[chart.pointIndex];\r\n\r\n dataset = chart.data.datasets[chart.pointDataIndex];\r\n meta = dataset._meta[Object.keys(dataset._meta)[0]];\r\n total = meta.total;\r\n activePercentage = parseFloat(((activeValue / total) * 100).toFixed(1));\r\n activePercentage = chart.legend.legendItems[chart.pointIndex].hidden\r\n ? 0\r\n : activePercentage;\r\n }\r\n\r\n ctx.font = \"36px Nunito, sans-serif\";\r\n ctx.fillStyle = ThemeColors().primaryColor;\r\n ctx.textBaseline = \"middle\";\r\n\r\n var text = activePercentage + \"%\",\r\n textX = Math.round((width - ctx.measureText(text).width) / 2),\r\n textY = height / 2;\r\n ctx.fillText(text, textX, textY);\r\n\r\n ctx.font = \"14px Nunito, sans-serif\";\r\n ctx.textBaseline = \"middle\";\r\n\r\n var text2 = activeLabel,\r\n textX2 = Math.round((width - ctx.measureText(text2).width) / 2),\r\n textY2 = height / 2 - 30;\r\n ctx.fillText(text2, textX2, textY2);\r\n\r\n ctx.save();\r\n },\r\n beforeEvent: function (chart, event, options) {\r\n var firstPoint = chart.getElementAtEvent(event)[0];\r\n\r\n if (firstPoint) {\r\n chart.pointIndex = firstPoint._index;\r\n chart.pointDataIndex = firstPoint._datasetIndex;\r\n chart.pointAvailable = true;\r\n }\r\n }\r\n};\r\n\r\nexport class PolarShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.polarWithShadow = Chart.defaults.polarArea;\r\n Chart.controllers.polarWithShadow = Chart.controllers.polarArea.extend({\r\n draw: function (ease) {\r\n Chart.controllers.radar.prototype.draw.call(this, ease);\r\n let ctx = this.chart.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.2)\";\r\n ctx.shadowBlur = 7;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 7;\r\n ctx.responsive = true;\r\n Chart.controllers.radar.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"polarWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class LineShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.lineWithShadow = Chart.defaults.line;\r\n Chart.controllers.lineWithShadow = Chart.controllers.line.extend({\r\n draw: function (ease) {\r\n Chart.controllers.line.prototype.draw.call(this, ease);\r\n var ctx = this.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.15)\";\r\n ctx.shadowBlur = 10;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 10;\r\n ctx.responsive = true;\r\n ctx.stroke();\r\n Chart.controllers.line.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"lineWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class ScatterShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.scatterWithShadow = Chart.defaults.scatter;\r\n Chart.controllers.scatterWithShadow = Chart.controllers.scatter.extend({\r\n draw: function (ease) {\r\n Chart.controllers.scatter.prototype.draw.call(this, ease);\r\n let ctx = this.chart.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.2)\";\r\n ctx.shadowBlur = 7;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 7;\r\n ctx.responsive = true;\r\n Chart.controllers.scatter.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"scatterWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class BarShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.barWithShadow = Chart.defaults.bar;\r\n Chart.controllers.barWithShadow = Chart.controllers.bar.extend({\r\n draw: function (ease) {\r\n Chart.controllers.bar.prototype.draw.call(this, ease);\r\n var ctx = this.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.2)\";\r\n ctx.shadowBlur = 7;\r\n ctx.shadowOffsetX = 5;\r\n ctx.shadowOffsetY = 7;\r\n ctx.responsive = true;\r\n Chart.controllers.bar.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"barWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class RadarShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.radarWithShadow = Chart.defaults.radar;\r\n Chart.controllers.radarWithShadow = Chart.controllers.radar.extend({\r\n draw: function (ease) {\r\n Chart.controllers.radar.prototype.draw.call(this, ease);\r\n let ctx = this.chart.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.2)\";\r\n ctx.shadowBlur = 7;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 7;\r\n ctx.responsive = true;\r\n Chart.controllers.radar.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"radarWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class PieShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.pieWithShadow = Chart.defaults.pie;\r\n Chart.controllers.pieWithShadow = Chart.controllers.pie.extend({\r\n draw: function (ease) {\r\n Chart.controllers.pie.prototype.draw.call(this, ease);\r\n let ctx = this.chart.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.15)\";\r\n ctx.shadowBlur = 10;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 10;\r\n ctx.responsive = true;\r\n Chart.controllers.pie.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"pieWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class DoughnutShadow extends React.Component {\r\n componentWillMount() {\r\n Chart.defaults.doughnutWithShadow = Chart.defaults.doughnut;\r\n Chart.controllers.doughnutWithShadow = Chart.controllers.doughnut.extend({\r\n draw: function (ease) {\r\n Chart.controllers.doughnut.prototype.draw.call(this, ease);\r\n let ctx = this.chart.chart.ctx;\r\n ctx.save();\r\n ctx.shadowColor = \"rgba(0,0,0,0.15)\";\r\n ctx.shadowBlur = 10;\r\n ctx.shadowOffsetX = 0;\r\n ctx.shadowOffsetY = 10;\r\n ctx.responsive = true;\r\n Chart.controllers.doughnut.prototype.draw.apply(this, arguments);\r\n ctx.restore();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"doughnutWithShadow\"\r\n {...this.props}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport class SmallLineChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.changeState = this.changeState.bind(this);\r\n this.state = {\r\n currentValue: \"\",\r\n currentLabel: \"\"\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n Chart.defaults.lineWithLine = Chart.defaults.line;\r\n Chart.controllers.lineWithLine = Chart.controllers.line.extend({\r\n draw: function (ease) {\r\n Chart.controllers.line.prototype.draw.call(this, ease);\r\n\r\n if (this.chart.tooltip._active && this.chart.tooltip._active.length) {\r\n var activePoint = this.chart.tooltip._active[0];\r\n var ctx = this.chart.ctx;\r\n var x = activePoint.tooltipPosition().x;\r\n var topY = this.chart.scales[\"y-axis-0\"].top;\r\n var bottomY = this.chart.scales[\"y-axis-0\"].bottom;\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.moveTo(x, topY);\r\n ctx.lineTo(x, bottomY);\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = \"rgba(0,0,0,0.1)\";\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n }\r\n });\r\n }\r\n\r\n changeState(yLabel, xLabel) {\r\n this.setState({ currentValue: yLabel, currentLabel: xLabel });\r\n }\r\n\r\n\r\n render() {\r\n let changeState = this.changeState;\r\n return (\r\n \r\n \r\n
\r\n {this.state.currentValue}\r\n
\r\n
{this.state.currentLabel}
\r\n
\r\n (this.chart_instance = ref && ref.chart_instance)}\r\n type=\"lineWithLine\"\r\n options={{\r\n layout: {\r\n padding: {\r\n left: 5,\r\n right: 5,\r\n top: 10,\r\n bottom: 10\r\n }\r\n },\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n legend: {\r\n display: false\r\n },\r\n scales: {\r\n yAxes: [\r\n {\r\n ticks: {\r\n beginAtZero: true\r\n },\r\n display: false\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n display: false\r\n }\r\n ]\r\n },\r\n tooltips: {\r\n intersect: false,\r\n enabled: false,\r\n custom: function (tooltipModel) {\r\n if (tooltipModel && tooltipModel.dataPoints) {\r\n var yLabel = tooltipModel.dataPoints[0].yLabel;\r\n var xLabel = tooltipModel.dataPoints[0].xLabel;\r\n var label = tooltipModel.body[0].lines[0].split(\":\")[0];\r\n changeState(\"$\" + addCommas(yLabel), label + \"-\" + xLabel);\r\n }\r\n }\r\n }\r\n }}\r\n plugins={[\r\n {\r\n afterInit: function (chart, options) {\r\n var yLabel = chart.data.datasets[0].data[0];\r\n var xLabel = chart.data.labels[0];\r\n var label = chart.data.datasets[0].label;\r\n changeState(\"$\" + addCommas(yLabel), label + \"-\" + xLabel);\r\n }\r\n }\r\n ]}\r\n {...this.props}\r\n />\r\n
\r\n \r\n );\r\n }\r\n}\r\n","import { ThemeColors } from \"../util/ThemeColors\";\r\nimport {\r\n chartTooltip, centerTextPlugin\r\n } from \"../components/Charts\";\r\n \r\nconst colors = ThemeColors();\r\n\r\n\r\n\r\nexport const fillChartConfig = {\r\n legend: {\r\n display: false\r\n },\r\n options: {\r\n layout: {\r\n padding: {\r\n left: 0,\r\n right: 0,\r\n top: 40,\r\n bottom: 0\r\n }\r\n },\r\n plugins: {\r\n datalabels: {\r\n display: true,\r\n backgroundColor: \"transparent\",\r\n borderRadius: 30,\r\n borderWidth: 1,\r\n padding: 5,\r\n borderColor: function(context) {\r\n return context.dataset.borderColor;\r\n },\r\n color: function(context) {\r\n return context.dataset.borderColor;\r\n },\r\n font: {\r\n weight: \"bold\",\r\n size: 10\r\n },\r\n formatter: Math.round\r\n }\r\n },\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n tooltips: chartTooltip,\r\n scales: {\r\n yAxes: [\r\n {\r\n ticks: {\r\n min: 0\r\n },\r\n display: false\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n ticks: {\r\n min: 0\r\n },\r\n display: false\r\n }\r\n ]\r\n }\r\n },\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"Data\",\r\n borderColor: colors.themeColor1,\r\n pointBorderColor: colors.themeColor1,\r\n pointBackgroundColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.themeColor1,\r\n pointRadius: 3,\r\n pointBorderWidth: 3,\r\n pointHoverRadius: 3,\r\n fill: true,\r\n backgroundColor: colors.themeColor1_10,\r\n borderWidth: 2,\r\n data: [180, 140, 150, 120, 180, 110, 160],\r\n datalabels: {\r\n align: \"end\",\r\n anchor: \"end\"\r\n }\r\n }\r\n ]\r\n }\r\n};\r\n\r\n\r\nexport const visitChartConfig = {\r\n legend: {\r\n display: false\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n tooltips: chartTooltip,\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 5,\r\n min: 50,\r\n max: 70,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: false\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n data: [54, 63, 60, 65, 60, 68, 60],\r\n borderColor: colors.themeColor1,\r\n pointBackgroundColor: colors.foregroundColor,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.foregroundColor,\r\n pointRadius: 4,\r\n pointBorderWidth: 2,\r\n pointHoverRadius: 5,\r\n fill: true,\r\n borderWidth: 2,\r\n backgroundColor: colors.themeColor1_10\r\n }\r\n ]\r\n }\r\n};\r\n\r\n\r\n\r\n\r\nexport const conversionChartConfig = {\r\n legend: {\r\n display: false\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n tooltips: chartTooltip,\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 5,\r\n min: 50,\r\n max: 70,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: false\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n data: [65, 60, 68, 60, 58, 63, 60],\r\n borderColor: colors.themeColor2,\r\n pointBackgroundColor: colors.foregroundColor,\r\n pointBorderColor: colors.themeColor2,\r\n pointHoverBackgroundColor: colors.themeColor2,\r\n pointHoverBorderColor: colors.foregroundColor,\r\n pointRadius: 4,\r\n pointBorderWidth: 2,\r\n pointHoverRadius: 5,\r\n fill: true,\r\n borderWidth: 2,\r\n backgroundColor: colors.themeColor2_10\r\n }\r\n ]\r\n }\r\n};\r\n\r\n \r\n export const lineChartConfig = {\r\n legend: {\r\n display: false\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n tooltips: chartTooltip,\r\n plugins: {\r\n datalabels: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 5,\r\n min: 50,\r\n max: 70,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: false\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n data: [54, 63, 60, 65, 60, 68, 60],\r\n borderColor: colors.themeColor1,\r\n pointBackgroundColor: colors.foregroundColor,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.foregroundColor,\r\n pointRadius: 6,\r\n pointBorderWidth: 2,\r\n pointHoverRadius: 8,\r\n fill: false\r\n }\r\n ]\r\n }\r\n };\r\n \r\n export const polarChartConfig = {\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scale: {\r\n ticks: {\r\n display: false\r\n }\r\n },\r\n plugins: {\r\n datalabels: {\r\n display: false\r\n }\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n labels: [\"Cakes\", \"Desserts\", \"Cupcakes\"],\r\n datasets: [\r\n {\r\n data: [80, 90, 70],\r\n borderWidth: 2,\r\n borderColor: [\r\n colors.themeColor1,\r\n colors.themeColor2,\r\n colors.themeColor3\r\n ],\r\n backgroundColor: [\r\n colors.themeColor1_10,\r\n colors.themeColor2_10,\r\n colors.themeColor3_10\r\n ]\r\n }\r\n ]\r\n }\r\n };\r\n \r\n export const smallChartData1 = {\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"Total Orders\",\r\n borderColor: colors.themeColor1,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.themeColor1,\r\n pointRadius: 2,\r\n pointBorderWidth: 3,\r\n pointHoverRadius: 2,\r\n fill: false,\r\n borderWidth: 2,\r\n data: [1250, 1300, 1550, 921, 1810, 1106, 1610],\r\n datalabels: {\r\n align: \"end\",\r\n anchor: \"end\"\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n \r\n export const smallChartData2 = {\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"Pending Orders\",\r\n borderColor: colors.themeColor1,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.themeColor1,\r\n pointRadius: 2,\r\n pointBorderWidth: 3,\r\n pointHoverRadius: 2,\r\n fill: false,\r\n borderWidth: 2,\r\n data: [115, 120, 300, 222, 105, 85, 36],\r\n datalabels: {\r\n align: \"end\",\r\n anchor: \"end\"\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n \r\n export const smallChartData3 = {\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"Total Orders\",\r\n borderColor: colors.themeColor1,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.themeColor1,\r\n pointRadius: 2,\r\n pointBorderWidth: 3,\r\n pointHoverRadius: 2,\r\n fill: false,\r\n borderWidth: 2,\r\n data: [350, 452, 762, 952, 630, 85, 158],\r\n datalabels: {\r\n align: \"end\",\r\n anchor: \"end\"\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n \r\n export const smallChartData4 = {\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"Total Orders\",\r\n borderColor: colors.themeColor1,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.themeColor1,\r\n pointRadius: 2,\r\n pointBorderWidth: 3,\r\n pointHoverRadius: 2,\r\n fill: false,\r\n borderWidth: 2,\r\n data: [200, 452, 250, 630, 125, 85, 20],\r\n datalabels: {\r\n align: \"end\",\r\n anchor: \"end\"\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n \r\nexport const doughnutChartConfig = {\r\n plugins: [centerTextPlugin],\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n title: {\r\n display: false\r\n },\r\n cutoutPercentage: 80,\r\n layout: {\r\n padding: {\r\n bottom: 20\r\n }\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n labels: [\"Cakes\", \"Cupcakes\", \"Desserts\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n borderColor: [colors.themeColor3, colors.themeColor2, colors.themeColor1],\r\n backgroundColor: [colors.themeColor3_10, colors.themeColor2_10, colors.themeColor1_10],\r\n borderWidth: 2,\r\n data: [15, 25, 20]\r\n }\r\n ]\r\n }\r\n };\r\n\r\n\r\n export const radarChartConfig = {\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scale: {\r\n ticks: {\r\n display: false\r\n }\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n datasets: [\r\n {\r\n label: \"Stock\",\r\n borderWidth: 2,\r\n pointBackgroundColor: colors.themeColor1,\r\n borderColor: colors.themeColor1,\r\n backgroundColor: colors.themeColor1_10,\r\n data: [80, 90, 70]\r\n },\r\n {\r\n label: \"Order\",\r\n borderWidth: 2,\r\n pointBackgroundColor: colors.themeColor2,\r\n borderColor: colors.themeColor2,\r\n backgroundColor: colors.themeColor2_10,\r\n data: [68, 80, 95]\r\n }\r\n ],\r\n labels: [\"Cakes\", \"Desserts\", \"Cupcakes\"]\r\n }\r\n };\r\n \r\n\r\n \r\nexport const barChartConfig = {\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 100,\r\n min: 300,\r\n max: 800,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: false\r\n }\r\n }\r\n ]\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"],\r\n datasets: [\r\n {\r\n label: \"Cakes\",\r\n borderColor: colors.themeColor1,\r\n backgroundColor: colors.themeColor1_10,\r\n data: [456, 479, 324, 569, 702, 600],\r\n borderWidth: 2\r\n },\r\n {\r\n label: \"Desserts\",\r\n borderColor: colors.themeColor2,\r\n backgroundColor: colors.themeColor2_10,\r\n data: [364, 504, 605, 400, 345, 320],\r\n borderWidth: 2\r\n }\r\n ]\r\n }\r\n};\r\n\r\n\r\n\r\nexport const scatterChartConfig = {\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 20,\r\n min: -80,\r\n max: 80,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\"\r\n }\r\n }\r\n ]\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n datasets: [\r\n {\r\n borderWidth: 2,\r\n label: \"Cakes\",\r\n borderColor: colors.themeColor1,\r\n backgroundColor: colors.themeColor1_10,\r\n data: [\r\n { x: 62, y: -78 },\r\n { x: -0, y: 74 },\r\n { x: -67, y: 45 },\r\n { x: -26, y: -43 },\r\n { x: -15, y: -30 },\r\n { x: 65, y: -68 },\r\n { x: -28, y: -61 }\r\n ]\r\n },\r\n {\r\n borderWidth: 2,\r\n label: \"Desserts\",\r\n borderColor: colors.themeColor2,\r\n backgroundColor: colors.themeColor2_10,\r\n data: [\r\n { x: 79, y: 62 },\r\n { x: 62, y: 0 },\r\n { x: -76, y: -81 },\r\n { x: -51, y: 41 },\r\n { x: -9, y: 9 },\r\n { x: 72, y: -37 },\r\n { x: 62, y: -26 }\r\n ]\r\n }\r\n ]\r\n }\r\n};\r\n\r\n\r\n\r\n\r\n\r\nexport const areaChartConfig = {\r\n legend: {\r\n display: false\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n tooltips: chartTooltip,\r\n scales: {\r\n yAxes: [\r\n {\r\n gridLines: {\r\n display: true,\r\n lineWidth: 1,\r\n color: \"rgba(0,0,0,0.1)\",\r\n drawBorder: false\r\n },\r\n ticks: {\r\n beginAtZero: true,\r\n stepSize: 5,\r\n min: 50,\r\n max: 70,\r\n padding: 20\r\n }\r\n }\r\n ],\r\n xAxes: [\r\n {\r\n gridLines: {\r\n display: false\r\n }\r\n }\r\n ]\r\n }\r\n },\r\n data: {\r\n labels: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n data: [54, 63, 60, 65, 60, 68, 60],\r\n borderColor: colors.themeColor1,\r\n pointBackgroundColor: colors.foregroundColor,\r\n pointBorderColor: colors.themeColor1,\r\n pointHoverBackgroundColor: colors.themeColor1,\r\n pointHoverBorderColor: colors.foregroundColor,\r\n pointRadius: 4,\r\n pointBorderWidth: 2,\r\n pointHoverRadius: 5,\r\n fill: true,\r\n borderWidth: 2,\r\n backgroundColor: colors.themeColor1_10\r\n }\r\n ]\r\n }\r\n};\r\n\r\n\r\nexport const pieChartConfig = {\r\n legend: {\r\n position: \"bottom\",\r\n labels: {\r\n padding: 30,\r\n usePointStyle: true,\r\n fontSize: 12\r\n }\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n title: {\r\n display: false\r\n },\r\n layout: {\r\n padding: {\r\n bottom: 20\r\n }\r\n },\r\n tooltips: chartTooltip\r\n },\r\n data: {\r\n labels: [\"Cakes\", \"Cupcakes\", \"Desserts\"],\r\n datasets: [\r\n {\r\n label: \"\",\r\n borderColor: [\r\n colors.themeColor1,\r\n colors.themeColor2,\r\n colors.themeColor3\r\n ],\r\n backgroundColor: [\r\n colors.themeColor1_10,\r\n colors.themeColor2_10,\r\n colors.themeColor3_10\r\n ],\r\n borderWidth: 2,\r\n data: [15, 25, 20]\r\n }\r\n ]\r\n }\r\n};\r\n\r\n","import React, { Component, Fragment } from \"react\";\r\nimport IntlMessages from \"../../util/IntlMessages\";\r\nimport {\r\n Row,\r\n Card,\r\n CardBody,\r\n CardTitle,\r\n UncontrolledDropdown,\r\n DropdownItem,\r\n DropdownToggle,\r\n DropdownMenu,\r\n Progress,\r\n CardHeader\r\n} from \"reactstrap\";\r\nimport {\r\n PolarShadow,\r\n LineShadow,\r\n SmallLineChart,\r\n RadarShadow,\r\n DoughnutShadow\r\n} from \"../../components/Charts\";\r\nimport { Colxx, Separator } from \"../../components/CustomBootstrap\";\r\n// import BreadcrumbContainer from \"Components/BreadcrumbContainer\";\r\nimport Sortable from \"react-sortablejs\";\r\nimport Spinner from '../../components/Spinner/Spinner';\r\nimport CircularProgressbar from \"react-circular-progressbar\";\r\nimport \"chartjs-plugin-datalabels\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\n\r\nimport {\r\n visitChartConfig,\r\n conversionChartConfig,\r\n lineChartConfig,\r\n polarChartConfig,\r\n smallChartData1,\r\n smallChartData2,\r\n smallChartData3,\r\n smallChartData4,\r\n doughnutChartConfig,\r\n radarChartConfig\r\n} from \"../../_constants/chartConfig\";\r\n\r\nimport profileStatusData from \"../../data/dashboard.profile.status.json\";\r\nconst profileStatuses = profileStatusData.data;\r\n\r\nexport default class AnalyticsDashboard extends Component {\r\n render() {\r\n return (\r\n \r\n {/* \r\n \r\n }\r\n match={this.props.match}\r\n />\r\n \r\n \r\n
*/}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {profileStatuses.map((s, index) => {\r\n return (\r\n \r\n
\r\n {s.title}\r\n \r\n {s.status}/{s.total}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n
\r\n \r\n \r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n","import axios from 'axios';\r\nimport qs from 'qs';\r\nimport appRoutes from 'appRoutes'\r\n\r\nimport { \r\n createFormUrlEncodeHeader \r\n} from '../_helpers';\r\n\r\nexport const setTokens = (tokenObj) =>{\r\n var currentDate = new Date();\r\n currentDate = currentDate.setSeconds(currentDate.getSeconds() + tokenObj.expires_in);\r\n var dateValue = new Date(currentDate);\r\n localStorage.setItem(\"PEtoken\",JSON.stringify({...tokenObj, willExpire: dateValue.toUTCString()})); \r\n}\r\n\r\nexport const getToken = () =>{\r\n if (localStorage.getItem(\"PEtoken\") == null) return null;\r\n const tokenObj = JSON.parse(localStorage.getItem(\"PEtoken\"));\r\n if(new Date(tokenObj.willExpire) < new Date()){\r\n // console.log('removing token')\r\n localStorage.removeItem(\"PEtoken\");\r\n return null;\r\n }\r\n return tokenObj;\r\n}\r\n\r\nexport const getTokenDate = () =>{\r\n if (localStorage.getItem(\"PEtoken\") == null) return null;\r\n const tokenObj = JSON.parse(localStorage.getItem(\"PEtoken\"));\r\n if(tokenObj.willExpire < new Date()){\r\n localStorage.removeItem(\"PEtoken\");\r\n return null;\r\n }\r\n return new Date(tokenObj.willExpire);\r\n}\r\n\r\nexport const refreshToken = (onCookieChange) =>{\r\n const currentToken = getToken();\r\n\r\n if(currentToken === null) \r\n return;\r\n\r\n axios.post(`${appRoutes.apiUrl}token`,\r\n qs.stringify({\r\n grant_type:\"refresh_token\",\r\n access_token:currentToken.access_token,\r\n refresh_token:currentToken.refresh_token\r\n }),\r\n createFormUrlEncodeHeader())\r\n .then(function(response) {\r\n setTokens(response.data);\r\n onCookieChange();\r\n })\r\n .catch(function(error){\r\n endTokenSession();\r\n });\r\n}\r\n\r\nexport const endTokenSession = () =>{\r\n localStorage.removeItem(\"PEtoken\");\r\n}","import React from 'react';\r\nimport { Redirect, Route, Switch } from 'react-router-dom';\r\nimport { useState, useEffect } from 'react';\r\nimport { SecureRoute, useOktaAuth } from '@okta/okta-react';\r\n\r\nimport analyticsDash from './analytics';\r\n// import dashboardMsg from './dashboardmsg';\r\n\r\nimport PrivateRoute from '../PrivateRoute';\r\n\r\nconst dashboardMsg = () => (NFL Programs Admin Module
);\r\n\r\nconst Dashboards = ({ match }) => {\r\n const { authState, oktaAuth } = useOktaAuth();\r\n\r\n useEffect(() => {\r\n console.log(authState)\r\n }, [authState]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n)};\r\n\r\nexport default Dashboards; ","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Redirect, Route } from 'react-router-dom';\r\nimport appRoutes from 'appRoutes';\r\n\r\nimport * as AuthenticationManager from '../util/AuthenticationManager';\r\n\r\nconst PrivateRoute = ({ component: Component, ...rest}) => {\r\n\tconst { user } = rest;\r\n\r\n\treturn ( { \r\n return (AuthenticationManager.getToken() !== null ? \r\n\t\t\t : \r\n\t\t\t\r\n\t)}} />\r\n)};\r\n\r\nconst mapStateToProps = state => {\r\n\tconst { user } = state.auth;\r\n\treturn {\r\n\t\tuser\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(PrivateRoute);\r\n","import React, { Component, Fragment } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { Colxx } from \"../../components/CustomBootstrap\";\r\n\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n CardHeader,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Popover,\r\n PopoverBody,\r\n Row\r\n} from \"reactstrap\";\r\n\r\n\r\nconst ALPHA_REGEX = '^[A-Za-z\\\\s]+$';\r\nconst ALPHA_NUMERIC_REGEX = '[a-zA-Z0-9-,]+';\r\n\r\nconst DEFAULT_LABEL_WIDTH = 4;\r\nconst DEFAULT_FIELD_WIDTH = 8;\r\n\r\nclass LoginLayout extends Component {\r\n state = {\r\n username: '',\r\n password: '',\r\n popoverOpen: false,\r\n showMessagePanel: false,\r\n requiredFields: [\r\n { name: 'username', friendlyName: 'User Name', isValid: false, regex: ALPHA_NUMERIC_REGEX },\r\n { name: 'password', friendlyName: 'Password', isValid: false, regex: ALPHA_REGEX }\r\n ] \r\n };\r\n\r\n onUserLogin() {\r\n if (this.state.username !== \"\" && this.state.password !== \"\") {\r\n // this.props.loginUser(this.state, this.props.history);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n document.body.classList.add(\"background\");\r\n }\r\n\r\n componentWillUnmount() {\r\n document.body.classList.remove(\"background\");\r\n }\r\n\r\n getFormInput = event => {\r\n const { id, name, value } = event.target;\r\n const myKey = typeof id === 'undefined' ? name : id;\r\n this.updateState(myKey, value);\r\n}\r\n\r\nupdateState = (name, value) => {\r\n\r\n this.setState(prevState => {\r\n let newState = Object.assign({}, prevState);\r\n newState[name] = value;\r\n\r\n // DO FIELD VALIDATION CHECK HERE\r\n const requiredField = newState.requiredFields.filter(rf => rf.name === name)[0];\r\n\r\n if(typeof requiredField !== 'undefined' && \r\n requiredField !== null) {\r\n // IT'S A REQUIRED FIELD. DO WE HAVE A VALUE?\r\n var re = new RegExp(requiredField.regex);\r\n requiredField.isValid = re.test(value);\r\n }\r\n\r\n return newState;\r\n }, \r\n //() => console.log(this.state)\r\n );\r\n}\r\n\r\nhandleFormValid = () => {\r\n const isValid = this.state.requiredFields.filter(rf => rf.isValid === false).length > 0;\r\n return !isValid\r\n}\r\n\r\nhandleSubmitClicked = event => {\r\n //handlePostCreditCardPayment\r\n}\r\n\r\nformatRequiredFieldsMsg = () => {\r\n let lis = [];\r\n let message = 'All required fields have values';\r\n const missingFields = this.state.requiredFields.filter(rf => rf.isValid === false);\r\n\r\n if(typeof missingFields !== 'undefined' && missingFields.length > 0) {\r\n for(let i=0; i <= missingFields.length -1; i++) {\r\n lis.push({missingFields[i].friendlyName});\r\n }\r\n }\r\n\r\n return lis.length === 0 ? \r\n : \r\n (\r\n
Please supply values for:
\r\n
\r\n
\r\n \r\n \r\n NFL Player Engagement System
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n Please Enter Login Credentials
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.formatRequiredFieldsMsg()}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n);\r\nexport default Pages;\r\n","import React, { useEffect } from 'react';\r\nimport { Route, Switch, Redirect, useHistory } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { authActions } from '../_actions';\r\n\r\nimport { SecureRoute, useOktaAuth } from '@okta/okta-react';\r\n\r\nimport { getDefaultMenuValues } from '../_actions';\r\n\r\nimport TopNav from '../containers/TopNav';\r\nimport Sidebar from '../containers/Sidebar';\r\n\r\nimport admin from './admin';\r\nimport nfllegends from './nfllegends';\r\nimport footballOps from './footballOps';\r\n\r\nimport dashboards from './dashboard';\r\nimport pages from './pages';\r\n\r\nconst MainApp = props => {\r\n\r\n const { authState, oktaAuth } = useOktaAuth();\r\n\tconst { match, containerClassnames, handleGetAuthUser, user } = props;\r\n\tconst history = useHistory();\r\n\r\n useEffect(() => {\r\n if (authState && authState.isAuthenticated) {\r\n const accessToken = oktaAuth.getAccessToken();\r\n\t\t\thandleGetAuthUser();\t\t\t\r\n\t\t\tprops.handleGetMenus();\r\n }\r\n\t }, [authState]);\r\n\t\t \r\n\t \r\n\treturn (\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t
\r\n