\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Loading...
\r\n\r\n { this.idleTimer = ref}}\r\n element={document}\r\n onActive={this.onActive}\r\n onIdle={this.onIdle}\r\n onAction={this.onAction}\r\n debounce={250}\r\n timeout={30*60*1000} />\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default DefaultLayout;\r\n","import React, { Component } from 'react';\r\nimport { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';\r\n\r\nclass Login extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {routes.map((route, idx) => {\r\n return route.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\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Login;\r\n","import React, { Component } from 'react';\r\nimport { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';\r\n\r\nclass Page404 extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n Sign up
\r\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut\r\n labore et dolore magna aliqua.
\r\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 Page404;\r\n","import React, { Component } from 'react';\r\nimport { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';\r\n\r\nclass Page500 extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n 404
\r\nCan't find that.
\r\n\r\n The page or resource you are looking for was not found.\r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n You were redirected here because you attempted to access a resource that we couldn't find or that you don't\r\n have access to.\r\n It's possible you clicked an external link to an entity or workflow or other item that was either\r\n deleted or renamed. Otherwise, there may be an issue and you should let us know by emailing support@noteablenow.com.\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\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 Page500;\r\n","import React, { Component } from 'react';\r\nimport { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';\r\n\r\nclass Register extends Component {\r\n render() {\r\n return (\r\n 500
\r\nHouston, we have a problem!
\r\nThe page you are looking for is temporarily unavailable.
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\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 Register;\r\n","import React, { Component } from 'react';\r\nimport { \r\n Button, Card, CardBody, CardGroup, Col, Container, Form, FormFeedback, \r\n FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, \r\n Row, Alert, Collapse } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { NoteabillApi, AuthorizationEndpoint, SessionAvatarEndpoint } from '../../../services/NoteabillApi';\r\nimport cookie from 'react-cookies';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport { LoadingAnimation } from '../../../components';\r\n\r\nconst AuthEndpoint = AuthorizationEndpoint;\r\n\r\nconst logoStyle = {\r\n height: '80px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n\r\nconst rememberMeStyle = {\r\n marginLeft: '20px'\r\n}\r\n\r\nclass SigninPage extends Component {\r\n \r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'email',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Email is required'\r\n },\r\n {\r\n field: 'email',\r\n method: 'isEmail',\r\n validWhen: true,\r\n message: 'Please enter a valid email'\r\n },\r\n {\r\n field: 'password',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Password is required'\r\n }\r\n ]);\r\n\r\n this.state = {\r\n email: \"\",\r\n password: \"\",\r\n rememberMe: false,\r\n alertVisible: false,\r\n alertMessage: \"\",\r\n alertColor: \"info\",\r\n formEnabled: true,\r\n buttonText: \"Sign in\",\r\n requestedPath: \"\",\r\n validation: this.validator.valid()\r\n }\r\n\r\n this.submitted = false;\r\n\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.hideAlert = this.hideAlert.bind(this);\r\n } \r\n\r\n handleChange = (event) => {\r\n if (event.target.id == 'rememberMe') {\r\n this.setState({rememberMe: event.target.checked})\r\n } else {\r\n this.setState({\r\n [event.target.id]: event.target.value\r\n }); \r\n }\r\n }\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n \r\n // validate\r\n const validation = this.validator.validate(this.state);\r\n this.setState({validation})\r\n this.submitted = true;\r\n\r\n if (validation.isValid) {\r\n // prepare request to the auth endpoint\r\n this.disableForm();\r\n var api = new NoteabillApi();\r\n api.post(AuthEndpoint, JSON.stringify({email: this.state.email, password: this.state.password}), false)\r\n .then(response => this.handleUnauthorized(response))\r\n .then(response => response && response.json())\r\n .then(data => data && this.completeLogin(data))\r\n .catch(error => this.handleReject(error));\r\n }\r\n }\r\n\r\n showAlert(message, color) {\r\n this.setState({ alertVisible: true, alertMessage: message, alertColor: color });\r\n }\r\n\r\n hideAlert() {\r\n this.setState({ alertVisible: false });\r\n }\r\n\r\n completeLogin(session) { \r\n // handle \"remember me\" checkbox\r\n if (this.state.rememberMe) {\r\n // save email to local storage\r\n localStorage.setItem('email', this.state.email);\r\n } else {\r\n // remove email from local storage if it's there\r\n localStorage.removeItem('email');\r\n }\r\n var expire = new Date();\r\n expire.setTime(expire.getTime()+(30*60*1000));\r\n cookie.save('token', session.token, {path: '/', expires: expire});\r\n\r\n // fetch the user avatar\r\n var api = new NoteabillApi();\r\n api.get(SessionAvatarEndpoint)\r\n .then(response => response && response.json())\r\n .then(avatarData => {\r\n session.avatarImage = avatarData.avatarImage;\r\n })\r\n .finally(function() {\r\n // keep session data in local storage\r\n sessionStorage.setItem(\"session\", JSON.stringify(session));\r\n var redirectOnLogin = this.props.location.state ? this.props.location.state.requestedPath : '/';\r\n this.props.history.push(redirectOnLogin);\r\n }.bind(this));\r\n }\r\n\r\n handleUnauthorized(response) {\r\n if (!response.ok) {\r\n if (response.status == 401) {\r\n this.showAlert(\"We could not log you in with that email and password. Please try again.\", \"danger\");\r\n } else {\r\n this.showAlert(\"Hmm, something went wrong \" + response.statusText, \"danger\");\r\n }\r\n this.enableForm();\r\n } else {\r\n return response;\r\n }\r\n }\r\n\r\n handleReject(error) {\r\n console.log(error);\r\n this.showAlert(\"An unexpected error occurred: \" + error, \"danger\");\r\n this.setState({ password: \"\"})\r\n this.enableForm();\r\n }\r\n\r\n disableForm() {\r\n this.setState({ formEnabled: false, buttonText: \"Signing in...\", alertVisible: false, alertText: \"\" });\r\n }\r\n\r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Sign in\" });\r\n }\r\n\r\n handleLogoutComplete() {\r\n cookie.remove('token');\r\n sessionStorage.removeItem('session');\r\n this.enableForm();\r\n this.showAlert(\"You have been logged out\", \"primary\");\r\n }\r\n\r\n componentDidMount() {\r\n if (localStorage.getItem('email')) {\r\n this.setState({rememberMe: true, email: localStorage.getItem('email')});\r\n }\r\n }\r\n\r\n render() {\r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n \r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\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 SigninPage;\r\n","import React, { Component } from 'react';\r\nimport { Button, Card, CardBody, CardGroup, Col, Container, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { NoteabillApi, AuthorizationEndpoint } from '../../../services/NoteabillApi';\r\nimport cookie from 'react-cookies';\r\n\r\nconst AuthEndpoint = AuthorizationEndpoint;\r\n\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n }\r\n\r\n class SignoutPage extends Component {\r\n constructor(props) {\r\n super(props); \r\n\r\n this.state = {\r\n alertVisible: false,\r\n alertMessage: \"\",\r\n alertColor: \"info\",\r\n headingText: \"Signing you out...\",\r\n buttonText: \"Please wait\",\r\n buttonEnabled: false\r\n }\r\n }\r\n\r\n showAlert(message, color) {\r\n this.setState({ alertVisible: true, alertMessage: message, alertColor: color });\r\n }\r\n\r\n hideAlert() {\r\n this.setState({ alertVisible: false });\r\n }\r\n\r\n componentDidMount() {\r\n var api = new NoteabillApi();\r\n var token = cookie.load('token');\r\n if (token && token != 'undefined') {\r\n api.delete(AuthEndpoint, false)\r\n .then(response => this.handleError(response))\r\n .then(response => response && this.handleResponse(response))\r\n .catch(error => this.handleReject(error)); \r\n } else {\r\n this.setState({buttonEnabled: true, buttonText: \"Sign in again\", headingText: \"You have been signed out.\"});\r\n }\r\n }\r\n\r\n handleError(response) {\r\n if (!response.ok) {\r\n this.showAlert(\"We were unable to sign you out. \" + response.statusText);\r\n } else {\r\n return response;\r\n }\r\n }\r\n\r\n handleResponse(response) {\r\n cookie.remove('token');\r\n sessionStorage.removeItem('session');\r\n this.setState({buttonEnabled: true, buttonText: \"Sign in again\", headingText: \"You have been signed out.\"});\r\n }\r\n\r\n handleReject(error) {\r\n this.showAlert(\"An error occurred while trying to sign you out. \" + error);\r\n }\r\n \r\n render() {\r\n return (\r\n Account Management and Billing Center
\r\n\r\n
\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n export default SignoutPage;\r\n ","import React, { Component } from 'react';\r\nimport { Button, Card, CardBody, Col, Container, Form, FormFeedback, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { NoteabillApi } from '../../../services/NoteabillApi';\r\nimport FormValidator from '../../../services/FormValidator';\r\n\r\n\r\nconst RecoveryEndpoint = \"/authorization/recovery\";\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n\r\nclass ForgotPasswordPage extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'email',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Email is required'\r\n },\r\n {\r\n field: 'email',\r\n method: 'isEmail',\r\n validWhen: true,\r\n message: 'Please enter a valid email'\r\n } \r\n ]);\r\n \r\n this.state = {\r\n email: \"\",\r\n alertVisible: false,\r\n alertMessage: \"\",\r\n alertColor: \"info\",\r\n formEnabled: true,\r\n buttonText: \"Send Email\",\r\n validation: this.validator.valid()\r\n }\r\n\r\n this.submitted = false;\r\n\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.hideAlert = this.hideAlert.bind(this);\r\n \r\n }\r\n\r\n handleChange = (event) => {\r\n this.setState({\r\n [event.target.id]: event.target.value\r\n });\r\n }\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n\r\n // validate\r\n const validation = this.validator.validate(this.state);\r\n this.setState({validation})\r\n this.submitted = true;\r\n\r\n if (validation.isValid) {\r\n // prepare request to the auth endpoint\r\n this.disableForm();\r\n var api = new NoteabillApi();\r\n api.post(RecoveryEndpoint, JSON.stringify({email: this.state.email}), false)\r\n .then(response => this.handleUnauthorized(response))\r\n .then(data => data && this.handleCompleted())\r\n .catch(error => this.handleRejected(error));\r\n }\r\n }\r\n\r\n handleCompleted() { \r\n this.showAlert(\"An email has been sent to the address provided. Please check your email.\");\r\n this.enableForm();\r\n }\r\n \r\n handleUnauthorized(response) {\r\n if (!response.ok) {\r\n if (response.status == 401) {\r\n this.showAlert(\"That email address could not be found.\", \"danger\");\r\n } else {\r\n this.showAlert(\"Hmm, something went wrong \" + response.statusText, \"danger\");\r\n }\r\n this.enableForm();\r\n } else {\r\n return response;\r\n }\r\n }\r\n \r\n handleRejected(error) {\r\n console.log(error);\r\n this.showAlert(\"An unexpected error occurred: \" + error, \"danger\");\r\n this.enableForm();\r\n }\r\n \r\n showAlert(message, color) {\r\n this.setState({ alertVisible: true, alertMessage: message, alertColor: color });\r\n }\r\n \r\n hideAlert() {\r\n this.setState({ alertVisible: false });\r\n }\r\n \r\n disableForm() {\r\n this.setState({ formEnabled: false, buttonText: \"Sending...\", alertVisible: false, alertText: \"\" });\r\n }\r\n \r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Submit\" });\r\n }\r\n \r\n render() {\r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n {this.state.headingText}
\r\n\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Still stuck? Email support@noteablenow.com for assistance.\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ForgotPasswordPage;","import React, { Component } from 'react';\r\nimport { Button, Card, CardBody, Col, Collapse, Container, Form, FormFeedback, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { NoteabillApi, PasswordRecoveryEndpoint } from '../../../services/NoteabillApi';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport 'spinkit/css/spinkit.css';\r\nimport queryString from 'query-string';\r\nimport passwordValidator from 'password-validator';\r\n\r\nconst RecoveryEndpoint = PasswordRecoveryEndpoint;\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n\r\nclass ResetPasswordPage extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'password',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must enter a new password'\r\n },\r\n {\r\n field: 'password',\r\n method: this.passwordStrength,\r\n validWhen: true,\r\n message: 'Please choose a stronger password'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must re-type your password here'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: this.passwordMatch, // custom function\r\n validWhen: true,\r\n message: 'The passwords do not match'\r\n }\r\n ]);\r\n \r\n this.state = {\r\n alertVisible: false,\r\n alertMessage: \"\",\r\n alertColor: \"info\",\r\n loading: false,\r\n formVisible: false,\r\n formEnabled: true,\r\n buttonText: \"Change Password\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n validation: this.validator.valid()\r\n }\r\n\r\n this.submitted = false;\r\n\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.hideAlert = this.hideAlert.bind(this);\r\n }\r\n\r\n passwordMatch = (confirmation, state) => (state.password === confirmation);\r\n\r\n passwordStrength = (password) => {\r\n var schema = new passwordValidator();\r\n schema\r\n .is().min(8)\r\n .is().max(100)\r\n .has().uppercase()\r\n .has().lowercase()\r\n .has().digits()\r\n .has().not().spaces();\r\n return schema.validate(password);\r\n };\r\n\r\n handleChange = (event) => {\r\n this.setState({\r\n [event.target.id]: event.target.value\r\n });\r\n }\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n\r\n // validate\r\n const validation = this.validator.validate(this.state);\r\n this.setState({validation})\r\n this.submitted = true;\r\n\r\n if (validation.isValid) {\r\n // prepare request to the auth endpoint\r\n this.disableForm();\r\n var api = new NoteabillApi();\r\n const qs = queryString.parse(this.props.location.search);\r\n var endpoint = RecoveryEndpoint + '/' + qs.requestId;\r\n api.post(endpoint, JSON.stringify({password: this.state.password}), false)\r\n .then(response => this.handleErrorResponse(response))\r\n .then(data => data && this.handleCompleted())\r\n .catch(error => this.handleRejected(error));\r\n }\r\n }\r\n\r\n handleCompleted() { \r\n this.setState({ formVisible: false });\r\n this.showAlert(\"Success! Return to the sign-in page and use your new password to login\", \"success\");\r\n }\r\n \r\n handleErrorResponse(response) {\r\n if (response.status === 404) {\r\n this.showAlert(\"The password recovery token was not found\", \"danger\");\r\n this.setState({ loading: false });\r\n } \r\n else if (response.status === 401) {\r\n this.showAlert(\"Password recovery requests expire after a short time. You'll need to submit another and respond right away.\", \"warning\")\r\n this.setState({ loading: false });\r\n }\r\n else if (!response.ok) {\r\n this.showAlert(\"Hmm, something went wrong: \" + response.statusText, \"danger\");\r\n this.setState({ loading: false });\r\n } else {\r\n return response;\r\n }\r\n }\r\n \r\n handleRejected(error) {\r\n console.log(error);\r\n this.showAlert(\"An unexpected error occurred: \" + error, \"danger\");\r\n this.enableForm();\r\n this.setState({ loading: false });\r\n }\r\n \r\n showAlert(message, color) {\r\n this.setState({ alertVisible: true, alertMessage: message, alertColor: color });\r\n }\r\n \r\n hideAlert() {\r\n this.setState({ alertVisible: false });\r\n }\r\n \r\n disableForm() {\r\n this.setState({ formEnabled: false, alertVisible: false, alertText: \"\" });\r\n }\r\n \r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Submit\" });\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ loading: true });\r\n const qs = queryString.parse(this.props.location.search);\r\n if (!qs.requestId) {\r\n this.showAlert('You must be here by mistake. You have not provided a password recovery token.');\r\n this.setState({ loading: false });\r\n } else {\r\n var api = new NoteabillApi();\r\n var endpoint = RecoveryEndpoint + '/' + qs.requestId;\r\n api.get(endpoint, false)\r\n .then(response => this.handleErrorResponse(response))\r\n .then(response => response && response.json())\r\n .then(data => data && this.handleCheckRequestCompleted())\r\n .catch(error => this.handleRejected(error)); \r\n }\r\n }\r\n\r\n handleCheckRequestCompleted() {\r\n this.setState({ loading: false, formVisible: true });\r\n }\r\n \r\n render() {\r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n \r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\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 ResetPasswordPage;","import React, { Component } from 'react';\r\nimport { \r\n Button, Card, CardBody, Col, Collapse, Container, Form, FormFeedback, FormGroup, FormText,\r\n Input, Label, InputGroup, InputGroupAddon, InputGroupText, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { CustomerEnrollmentProvider } from '../../../providers';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport 'spinkit/css/spinkit.css';\r\nimport queryString from 'query-string';\r\nimport passwordValidator from 'password-validator';\r\nimport PalladientComponent from '../../../PalladientComponent';\r\nimport StatePicker from '../../Shared/StatePicker';\r\nimport { TextMask, InputAdapter } from 'react-text-mask-hoc';\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n \r\nclass CustomerEnrollmentPage extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'companyName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must enter a company name'\r\n },\r\n {\r\n field: 'firstName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your first name'\r\n },\r\n {\r\n field: 'lastName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your last name'\r\n },\r\n {\r\n field: 'title',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your title'\r\n },\r\n {\r\n field: 'addressLine1',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Address cannot be empty'\r\n },\r\n {\r\n field: 'city',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Address must have a city'\r\n },\r\n {\r\n field: 'zip',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter 5 digit zip code'\r\n },\r\n {\r\n field: 'password',\r\n method: this.passwordStrength,\r\n validWhen: true,\r\n message: 'Please choose a stronger password'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must re-type your password here'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: this.passwordMatch, // custom function\r\n validWhen: true,\r\n message: 'The passwords do not match'\r\n }\r\n ]);\r\n \r\n this.defineState({\r\n formVisible: false,\r\n formEnabled: true,\r\n buttonText: \"Continue to Dashboard\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n companyName: \"\",\r\n title: \"\",\r\n addressLine1: \"\",\r\n addressLine2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n zip: \"\",\r\n phone: \"\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n completed: false,\r\n validation: this.validator.valid(),\r\n });\r\n\r\n this.submitted = false;\r\n this.customerEnrollmentProvider = new CustomerEnrollmentProvider();\r\n\r\n this.handleAddressStateChanged = this.handleAddressStateChanged.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.hideAlert = this.hideAlert.bind(this);\r\n }\r\n\r\n passwordMatch = (confirmation, state) => (state.password === confirmation);\r\n\r\n passwordStrength = (password) => {\r\n var schema = new passwordValidator();\r\n schema\r\n .is().min(8)\r\n .is().max(100)\r\n .has().uppercase()\r\n .has().lowercase()\r\n .has().digits()\r\n .has().not().spaces();\r\n return schema.validate(password);\r\n };\r\n\r\n handleChange = (event) => {\r\n this.setState({\r\n [event.target.id]: event.target.value\r\n });\r\n }\r\n\r\n handleSubmit(e) {\r\n // validate\r\n var validation = this.validator.validate(this.state);\r\n this.submitted = true;\r\n if (validation.isValid) {\r\n this.disableForm();\r\n const qs = queryString.parse(this.props.location.search);\r\n var enrollment = {\r\n password: this.state.password,\r\n firstName: this.state.firstName,\r\n lastName: this.state.lastName, \r\n companyName: this.state.companyName,\r\n title: this.state.title,\r\n addressLine1: this.state.addressLine1,\r\n addressLine2: this.state.addressLine2,\r\n city: this.state.city,\r\n state: this.state.state,\r\n zip: this.state.zip,\r\n phone: this.state.phone,\r\n }\r\n this.customerEnrollmentProvider.patch(qs.invitationId, enrollment)\r\n .then(response => this.handleErrorResponse(response))\r\n .then(data => data && this.handleCompleted())\r\n .catch(error => this.handleRejected(error));\r\n }\r\n else {\r\n this.setState({validation:validation});\r\n } \r\n }\r\n\r\n handleCompleted() { \r\n this.setState({ formVisible: false, completed: true });\r\n this.showAlert(\"Success! Return to the sign-in page to login\", \"success\");\r\n }\r\n \r\n handleErrorResponse(response) {\r\n if (response.status === 404) {\r\n this.showAlert(\"The confirmation token was not found\", \"danger\");\r\n this.setState({ loading: false });\r\n } \r\n else if (response.status === 401) {\r\n this.showAlert(response.statusText, \"warning\")\r\n this.setState({ loading: false });\r\n }\r\n else if (!response.ok) {\r\n this.showAlert(\"Hmm, something went wrong: \" + response.statusText, \"danger\");\r\n this.enableForm();\r\n this.setState({ loading: false }); \r\n } else {\r\n return response;\r\n }\r\n }\r\n \r\n handleRejected(error) {\r\n this.showAlert(\"An unexpected error occurred: \" + error, \"danger\");\r\n this.enableForm();\r\n this.setState({ loading: false });\r\n }\r\n \r\n disableForm() {\r\n this.setState({ formEnabled: false, alertVisible: false, alertText: \"\", buttonText: \"Please wait...\" });\r\n }\r\n \r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Continue to Dashboard\"});\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ loading: true });\r\n const qs = queryString.parse(this.props.location.search);\r\n if (!qs.invitationId) {\r\n this.showAlert('You must be here by mistake. You have not provided a confirmation token.');\r\n this.setState({ loading: false });\r\n } else {\r\n this.customerEnrollmentProvider.getOne(qs.invitationId)\r\n .then(response => this.handleErrorResponse(response))\r\n .then(response => response && response.json())\r\n .then(data => data && this.handleCheckRequestCompleted(data))\r\n .catch(error => this.handleRejected(error)); \r\n }\r\n }\r\n\r\n handleCheckRequestCompleted(data) {\r\n this.setState({ \r\n firstName: data.firstName,\r\n lastName: data.lastName,\r\n companyName: data.companyName,\r\n loading: false, \r\n formVisible: true \r\n });\r\n }\r\n\r\n handleAddressStateChanged(stateData) {\r\n this.setState({state: stateData.abbreviation});\r\n }\r\n \r\n render() {\r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Checking status of password reset request...
\r\n\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\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 CustomerEnrollmentPage;","import React, { Component } from 'react';\r\nimport { \r\n Button, Col, Form, FormFeedback, FormGroup, FormText,\r\n Input, Label, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport passwordValidator from 'password-validator';\r\nimport StatePicker from '../../Shared/StatePicker';\r\nimport { TextMask, InputAdapter } from 'react-text-mask-hoc';\r\nimport PalladientComponent from '../../../PalladientComponent';\r\nimport PropTypes from 'prop-types';\r\nimport DatePicker from 'react-datepicker';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport moment from 'moment';\r\n\r\nconst propTypes = {\r\n enrollment: PropTypes.object,\r\n onFormCompleted: PropTypes.func,\r\n}\r\n\r\nclass NewCustomerInfoPanel extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'companyName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must enter a company name'\r\n },\r\n {\r\n field: 'firstName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your first name'\r\n },\r\n {\r\n field: 'lastName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your last name'\r\n },\r\n {\r\n field: 'title',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your title'\r\n },\r\n {\r\n field: 'addressLine1',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Address cannot be empty'\r\n },\r\n {\r\n field: 'city',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Address must have a city'\r\n },\r\n {\r\n field: 'zip',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter 5 digit zip code'\r\n },\r\n {\r\n field: 'password',\r\n method: this.passwordStrength,\r\n validWhen: true,\r\n message: 'Please choose a stronger password'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must re-type your password here'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: this.passwordMatch, // custom function\r\n validWhen: true,\r\n message: 'The passwords do not match'\r\n }\r\n ]);\r\n \r\n this.defineState({\r\n firstName: this.props.enrollment ? this.props.enrollment.firstName : '',\r\n lastName: this.props.enrollment ? this.props.enrollment.lastName : '',\r\n companyName: this.props.enrollment ? this.props.enrollment.companyName : '',\r\n title: \"\",\r\n addressLine1: \"\",\r\n addressLine2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n zip: \"\",\r\n phone: \"\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n goLiveDate: this.props.enrollment ? this.props.enrollment.goLiveDate : moment().add(30, \"days\").format('MM-DD-yyyy'), \r\n completed: false,\r\n validation: this.validator.valid(),\r\n });\r\n\r\n this.submitted = false;\r\n }\r\n\r\n passwordMatch = (confirmation, state) => (state.password === confirmation);\r\n\r\n passwordStrength = (password) => {\r\n var schema = new passwordValidator();\r\n schema\r\n .is().min(8)\r\n .is().max(100)\r\n .has().uppercase()\r\n .has().lowercase()\r\n .has().digits()\r\n .has().not().spaces();\r\n return schema.validate(password);\r\n };\r\n\r\n handleNextClicked() {\r\n // validate\r\n var validation = this.validator.validate(this.state);\r\n this.submitted = true;\r\n if (validation.isValid) {\r\n if (this.props.onFormCompleted) {\r\n this.props.onFormCompleted({\r\n password: this.state.password,\r\n firstName: this.state.firstName,\r\n lastName: this.state.lastName, \r\n companyName: this.state.companyName,\r\n title: this.state.title,\r\n addressLine1: this.state.addressLine1,\r\n addressLine2: this.state.addressLine2,\r\n city: this.state.city,\r\n state: this.state.state,\r\n zip: this.state.zip,\r\n phone: this.state.phone, \r\n goLiveDate: this.state.goLiveDate, \r\n });\r\n }\r\n }\r\n else {\r\n this.setState({validation:validation});\r\n } \r\n }\r\n \r\n handleAddressStateChanged(stateData) {\r\n this.setState({state: stateData.abbreviation});\r\n }\r\n \r\n handleGoLiveDateChanged(date) {\r\n this.setState({goLiveDate: moment(date).format('MM-DD-yyyy')});\r\n }\r\n \r\n render() {\r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nNewCustomerInfoPanel.propTypes = propTypes;\r\n\r\nexport default NewCustomerInfoPanel;","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport PalladientComponent from '../../../PalladientComponent';\r\nimport SubscriptionAgreementCard from '../../Shared/SubscriptionAgreementCard';\r\n\r\nconst propTypes = {\r\n agreementData: PropTypes.object,\r\n onAgreementAccepted: PropTypes.func,\r\n}\r\n\r\nclass SubscriptionAgreementPanel extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleAgreementAccepted() {\r\n if (this.props.onAgreementAccepted) this.props.onAgreementAccepted();\r\n }\r\n\r\n render() {\r\n if (!this.props.agreementData) return;\r\n return (\r\n Account Management and Billing Center
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Checking status of enrollment invitation...
\r\nLet's Get Started!
\r\n\r\n Thanks for enrolling in the Noteable Account Management and Billing Center. Next lets get you signed in\r\n so you can review your subscription agreement and enter your recurring payment info. Click the link below\r\n to go to the sign-in page. We can't start setting up your account until you've accepted the agreement\r\n and paid the setup invoice.\r\n
\r\n\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \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.isLoading() ? this.renderLoading() : (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n \r\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 RapidEnrollmentPage;","import React, { Component } from 'react';\r\nimport { \r\n Button, Card, CardBody, Col, Collapse, Container, Form, FormFeedback, FormGroup, FormText,\r\n Input, Label, InputGroup, InputGroupAddon, InputGroupText, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { UserInvitationProvider } from '../../../providers';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport 'spinkit/css/spinkit.css';\r\nimport queryString from 'query-string';\r\nimport passwordValidator from 'password-validator';\r\nimport PalladientComponent from '../../../PalladientComponent';\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n\r\nclass UserInvitationPage extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'firstName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your first name'\r\n },\r\n {\r\n field: 'lastName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your last name'\r\n },\r\n {\r\n field: 'password',\r\n method: this.passwordStrength,\r\n validWhen: true,\r\n message: 'Please choose a stronger password'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must re-type your password here'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: this.passwordMatch, // custom function\r\n validWhen: true,\r\n message: 'The passwords do not match'\r\n }\r\n ]);\r\n \r\n this.defineState({\r\n formVisible: false,\r\n formEnabled: true,\r\n buttonText: \"Continue to Dashboard\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n completed: false,\r\n validation: this.validator.valid(),\r\n });\r\n\r\n this.submitted = false;\r\n this.userInvitationProvider = new UserInvitationProvider();\r\n\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n passwordMatch = (confirmation, state) => (state.password === confirmation);\r\n\r\n passwordStrength = (password) => {\r\n var schema = new passwordValidator();\r\n schema\r\n .is().min(8)\r\n .is().max(100)\r\n .has().uppercase()\r\n .has().lowercase()\r\n .has().digits()\r\n .has().not().spaces();\r\n return schema.validate(password);\r\n };\r\n\r\n handleSubmit(event) {\r\n event.preventDefault();\r\n\r\n // validate\r\n var validation = this.validator.validate(this.state);\r\n if (validation.isValid) {\r\n this.disableForm();\r\n const qs = queryString.parse(this.props.location.search);\r\n this.userInvitationProvider.completeInvitation(qs.invitationId, qs.studioId,\r\n {\r\n userPassword: this.state.password,\r\n userFirstName: this.state.firstName,\r\n userLastName: this.state.lastName, \r\n })\r\n .then(response => this.screenApiResponse(response))\r\n .then(data => data && this.handleCompleted(data))\r\n .catch(error => this.handleApiRejection(error));\r\n }\r\n else {\r\n this.setState({validation:validation, submitted:true});\r\n } \r\n }\r\n\r\n handleCompleted(userData) {\r\n this.setState({ formVisible: false, completed: true });\r\n this.showAlert(\"Registration completed! Return to the sign-in page to login\", \"success\");\r\n }\r\n \r\n disableForm() {\r\n this.setState({ formEnabled: false, alertVisible: false, alertText: \"\", buttonText: \"Please wait...\" });\r\n }\r\n \r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Continue to Dashboard\"});\r\n }\r\n\r\n componentDidMount() {\r\n this.startLoading();\r\n const qs = queryString.parse(this.props.location.search);\r\n if (!qs.invitationId) {\r\n this.showAlert('You must be here by mistake. You have not provided a confirmation token.');\r\n this.stopLoading();\r\n } else {\r\n this.userInvitationProvider.getInvitation(qs.invitationId, qs.studioId)\r\n .then(response => this.screenApiResponse(response))\r\n .then(response => response && response.json())\r\n .then(data => {\r\n if (!data) this.showAlert(\"The invitation was not found.\", \"danger\");\r\n else {\r\n if (data.status === 'Expired') this.showAlert(\"The invitation is no longer valid.\", \"danger\");\r\n else this.setState({formVisible: true});\r\n }\r\n })\r\n .catch(error => this.handleApiRejection(error))\r\n .finally(this.stopLoading());\r\n }\r\n }\r\n \r\n render() {\r\n if (this.isLoading()) return this.renderLoading(); \r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n Account Management and Billing Center
\r\n\r\n \r\n
1.
\r\n \r\nWelcome to Noteable!
\r\n\r\n We are ready to start your onboarding process, where we will help you configure your site,\r\n design your note and report templates and train your staff. First, lets get you signed up!\r\n Please fill in some info for us.\r\n
\r\n \r\n2.
\r\n \r\nSign the Agreement
\r\n\r\n Please look over the subscription details below and make sure they are what you were\r\n expecting. Keep in mind this is not a long term contract. You can cancel your subscription\r\n at any time, with 30 days notice.\r\n
\r\n\r\n To continue, you must scroll to the bottom of the agreement, check the box to provide consent and click 'Accept'.\r\n
\r\n \r\n3.
\r\n \r\nEnter Payment Details
\r\n\r\n Please provide a method of payment, to be used now for setup fees and for monthly subscription invoices. You\r\n will be able to change this information at any time by logging into the account management portal.\r\n
\r\n \r\n4.
\r\n \r\nThat's it!
\r\n\r\n You are ready to begin onboarding. Our team will reach out shortly to schedule trainings, and\r\n plan your site configuration. You will also need to sign a HIPAA Business Associate Agreement.\r\n We're excited to work with you and look forward to serving your agency.\r\n
\r\n\r\n In the meantime, you can sign into the Account Management Portal using the information you've\r\n just provided. Here you can see your invoices, current usage and estimated fees, manage your\r\n payment info, and more. Just click the link below to sign in.\r\n
\r\n \r\n\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\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 UserInvitationPage;\r\n","import React, { Component } from 'react';\r\nimport { \r\n Button, Card, CardBody, Col, Collapse, Container, Form, FormFeedback, FormGroup, FormText,\r\n Input, Label, InputGroup, InputGroupAddon, InputGroupText, Row, Alert } from 'reactstrap';\r\nimport logo from '../../../assets/img/brand/logo.png'\r\nimport { UserInvitationProvider, CustomerProvider } from '../../../providers';\r\nimport FormValidator from '../../../services/FormValidator';\r\nimport 'spinkit/css/spinkit.css';\r\nimport queryString from 'query-string';\r\nimport passwordValidator from 'password-validator';\r\nimport PalladientComponent from '../../../PalladientComponent';\r\n\r\nconst logoStyle = {\r\n height: '50px',\r\n textAlign: 'center',\r\n marginBottom: '15px'\r\n}\r\n\r\nclass CustomerUserInvitationPage extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.validator = new FormValidator([\r\n {\r\n field: 'firstName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your first name'\r\n },\r\n {\r\n field: 'lastName',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'Please enter your last name'\r\n },\r\n {\r\n field: 'password',\r\n method: this.passwordStrength,\r\n validWhen: true,\r\n message: 'Please choose a stronger password'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: 'isEmpty',\r\n validWhen: false,\r\n message: 'You must re-type your password here'\r\n },\r\n {\r\n field: 'passwordConfirm',\r\n method: this.passwordMatch, // custom function\r\n validWhen: true,\r\n message: 'The passwords do not match'\r\n }\r\n ]);\r\n \r\n this.defineState({\r\n formVisible: false,\r\n formEnabled: true,\r\n buttonText: \"Continue to Dashboard\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n customer: {},\r\n completed: false,\r\n validation: this.validator.valid(),\r\n });\r\n\r\n this.submitted = false;\r\n this.userInvitationProvider = new UserInvitationProvider();\r\n this.customerProvider = new CustomerProvider();\r\n\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n passwordMatch = (confirmation, state) => (state.password === confirmation);\r\n\r\n passwordStrength = (password) => {\r\n var schema = new passwordValidator();\r\n schema\r\n .is().min(8)\r\n .is().max(100)\r\n .has().uppercase()\r\n .has().lowercase()\r\n .has().digits()\r\n .has().not().spaces();\r\n return schema.validate(password);\r\n };\r\n\r\n handleSubmit(event) {\r\n event.preventDefault();\r\n\r\n // validate\r\n var validation = this.validator.validate(this.state);\r\n if (validation.isValid) {\r\n this.disableForm();\r\n const qs = queryString.parse(this.props.location.search);\r\n this.userInvitationProvider.completeInvitation(qs.invitationId, qs.studioId,\r\n {\r\n userPassword: this.state.password,\r\n userFirstName: this.state.firstName,\r\n userLastName: this.state.lastName, \r\n })\r\n .then(response => this.screenApiResponse(response))\r\n .then(data => data && this.handleCompleted(data))\r\n .catch(error => this.handleApiRejection(error));\r\n }\r\n else {\r\n this.setState({validation:validation, submitted:true});\r\n } \r\n }\r\n\r\n handleCompleted(userData) {\r\n this.setState({ formVisible: false, completed: true });\r\n this.showAlert(\"Registration completed! Return to the sign-in page to login\", \"success\");\r\n }\r\n \r\n disableForm() {\r\n this.setState({ formEnabled: false, alertVisible: false, alertText: \"\", buttonText: \"Please wait...\" });\r\n }\r\n \r\n enableForm() {\r\n this.setState({ formEnabled: true, buttonText: \"Continue to Dashboard\"});\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ loading: true });\r\n const qs = queryString.parse(this.props.location.search);\r\n if (!qs.invitationId) {\r\n this.showAlert('You must be here by mistake. You have not provided a confirmation token.');\r\n this.setState({ loading: false });\r\n } else {\r\n this.userInvitationProvider.getInvitation(qs.invitationId, qs.studioId)\r\n .then(response => this.screenApiResponse(response))\r\n .then(response => response && response.json())\r\n .then(data => data && this.handleCheckRequestCompleted(data))\r\n .catch(error => this.handleApiRejection(error))\r\n .finally(() => this.stopLoading()); \r\n }\r\n }\r\n\r\n handleCheckRequestCompleted(invitation) {\r\n this.customerProvider.getBySecurityZoneId(invitation.securityZoneId)\r\n .then(response => this.screenApiResponse(response))\r\n .then(response => response && response.json())\r\n .then(customer => customer && this.setState({ \r\n customer: customer,\r\n firstName: invitation.firstName ? invitation.firstName : '',\r\n lastName: invitation.lastName ? invitation.lastName : '',\r\n loading: false, \r\n formVisible: true \r\n }))\r\n .catch(error => this.handleApiRejection(error)); \r\n \r\n }\r\n \r\n render() {\r\n if (this.state.loading) return this.renderLoading(); \r\n let validation = this.submitted ? this.validator.validate(this.state) : this.state.validation;\r\n return (\r\n Noteable Account Management
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Checking status of invitation...
\r\nThat's it!
\r\n\r\n Your account is setup. Return to the sign-in page and login with your email and password.\r\n
\r\n\r\n \r\n \r\n {this.state.alertMessage} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\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 CustomerUserInvitationPage;\r\n","import React, { Component } from 'react';\r\nimport { Card, CardHeader, CardBody, Row, Col, Table, Button,\r\n Input, Collapse, Alert } from 'reactstrap';\r\nimport PalladientComponent, { toastStyle } from '../../../PalladientComponent';\r\nimport { InvoiceProvider } from '../../../providers';\r\nimport moment from 'moment';\r\nimport { formatUsCurrency } from '../../../services/DataTableHelper';\r\nimport { InvoiceLineItemTypeEnum } from '../../../enums';\r\nimport 'react-toastify/dist/ReactToastify.css';\r\nimport queryString from 'query-string';\r\nimport { Timeline, TimelineEvent } from 'react-event-timeline';\r\nimport TimeAgo from 'react-timeago';\r\n\r\nclass ViewInvoicePage extends PalladientComponent {\r\n constructor(props) {\r\n super(props);\r\n \r\n this.defineState({\r\n invoice: null,\r\n payNowModalIsOpen: false,\r\n historyPanelIsExpanded: false,\r\n });\r\n\r\n this.invoiceProvider = new InvoiceProvider();\r\n\r\n this.handlePrintClicked = this.handlePrintClicked.bind(this);\r\n this.handlePayClicked = this.handlePayClicked.bind(this);\r\n this.toggleHistoryPanel = this.toggleHistoryPanel.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const qs = queryString.parse(this.props.location.search);\r\n if (qs.invoiceId) {\r\n this.startLoading();\r\n this.loadInvoice(qs.invoiceId)\r\n .then(() => this.markInvoiceViewed(qs.invoiceId))\r\n .finally(() => this.stopLoading());\r\n }\r\n }\r\n\r\n loadInvoice(id) {\r\n return this.invoiceProvider.getOne(id, ['Customer'])\r\n .then(response => this.screenApiResponse(response))\r\n .then(response => {\r\n if (response.status === 404) this.tryNavigate('/404');\r\n else return response;\r\n })\r\n .then(response => response && response.json())\r\n .then(invoice => {\r\n if (invoice.history.length > 0)\r\n invoice.history = invoice.history.sort((a,b) => moment(b.eventDateTime).toDate() - moment(a.eventDateTime).toDate());\r\n this.setState({invoice:invoice});\r\n })\r\n .catch(error => this.handleApiRejection(error))\r\n }\r\n\r\n markInvoiceViewed(id) {\r\n return this.invoiceProvider.markViewed(id)\r\n .then(response => this.screenApiResponse(response))\r\n .catch(error => this.handleApiRejection(error));\r\n }\r\n\r\n numberLineItems(lineItems) {\r\n var nextNumber = 1;\r\n for (var i=0;iAccount Management and Billing Center
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Checking status of invitation...
\r\nThat's it!
\r\n\r\n Your account is setup. Return to the sign-in page and login with your email and password.\r\n
\r\nInvoice id not provided
\r\n \r\n )\r\n }\r\n\r\n toggleHistoryPanel(e) {\r\n e.preventDefault();\r\n this.setState({historyPanelIsExpanded: !this.state.historyPanelIsExpanded});\r\n }\r\n \r\n render() {\r\n if (this.isLoading()) return this.renderLoading();\r\n if (!this.state.invoice) return this.renderInvoiceIdMissing();\r\n let invoice = this.state.invoice;\r\n let lineItems = this.numberLineItems(this.state.invoice.lineItems);\r\n let arLocation = this.state.invoice.receivablesAddress,\r\n invoiceLocation = this.state.invoice.invoiceAddress;\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n {\r\n invoice.paymentSubstatus === 'Failed' ?\r\n (\r\n \r\n \r\n A recent attempt to debit for this invoice failed with reason: {invoice.paymentFailedReason}. Please click the 'Pay Now'\r\n button to update your payment information and re-attempt the payment.\r\n \r\n \r\n
\r\n ) : (<>)\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n lineItems.filter(li => li.itemType === InvoiceLineItemTypeEnum.Custom).map((lineItem, index) => (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n invoice.history.length > 0 ? (\r\n \r\n {\r\n invoice.history.map((event, index) => \r\n (\r\n \r\n \r\n ))\r\n } \r\n \r\n ) : (\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ViewInvoicePage;\r\n","import React, { Component } from 'react';\r\nimport { HashRouter, Route, Switch, Redirect } from 'react-router-dom';\r\nimport './App.scss';\r\nimport cookie from 'react-cookies';\r\n\r\n// Containers\r\nimport { DefaultLayout } from './containers';\r\n// Pages\r\nimport { Login, Page404, Page500, RapidEnrollmentPage, Register } from './views/Pages';\r\nimport { \r\n SigninPage, SignoutPage, ForgotPasswordPage, ResetPasswordPage, \r\n CustomerEnrollmentPage, UserInvitationPage, CustomerUserInvitationPage,\r\n ViewInvoicePage,\r\n} from './views/Pages';\r\n\r\n\r\nconst isAuthenticated = () => {\r\n var token = cookie.load('token');\r\n if (token) {\r\n // keep the session alive. the server is doing the same thing when api calls\r\n // are made.\r\n var expire = new Date();\r\n expire.setTime(expire.getTime()+(30*60*1000));\r\n cookie.save('token', token, {path: '/', expires: expire});\r\n return true;\r\n }\r\n \r\n return false;\r\n}\r\n\r\nconst AuthRoute = ({ component: Component, ...rest }) => (\r\n \r\n
\r\n Invoice #{invoice.invoiceNumber}
\r\n Status: \r\n {\r\n invoice.status === 'Paid' ? 'Paid on ' + moment(invoice.paymentDate).format('MM-dd-yyyy') : \r\n invoice.status === 'PartiallyPaid' ? 'Partially paid on ' + moment(invoice.paymentDate).format('MM-dd-yyyy') : \r\n 'Open'\r\n }\r\n {\r\n invoice.paymentSubstatus === 'Failed' ? ' (Payment Failed)' :\r\n ''\r\n }\r\n
\r\n\r\n {\r\n invoice.status !== 'Paid' ? (\r\n \r\n ) : ''\r\n }\r\n \r\n
\r\n From:
\r\nNoteable, LLC
\r\n {arLocation.addressLine1}
\r\n {arLocation.city}, {arLocation.stateOrRegion} {arLocation.postalCode}
\r\n Email: {arLocation.emailAddress}
\r\n Phone: {arLocation.phoneNumber}
\r\n \r\n To:
\r\n{invoice.customer.name}
\r\n {invoiceLocation.addressLine1}
\r\n {invoiceLocation.city}, {invoiceLocation.stateOrRegion} {invoiceLocation.postalCode}
\r\n Email: {invoice.customer.billingEmail}
\r\n Phone: {invoice.customer.billingPhone}
\r\n \r\n Details:
\r\nInvoice #{invoice.invoiceNumber}
\r\n Invoice Date: {moment(invoice.invoiceDate).format('MMMM DD, yyyy')}
\r\n Account Code: {invoice.customer.code}
\r\n \r\n | # | \r\nItem | \r\nDescription | \r\nQuantity | \r\nUnit Cost | \r\nTotal | \r\n\r\n | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
\r\n {lineItem.description}\r\n | \r\n \r\n | {lineItem.itemName} | \r\n\r\n | \r\n | \r\n | {formatUsCurrency(lineItem.amount)} | \r\n\r\n | {lineItem.lineItemNumber} | \r\n{lineItem.itemName} | \r\n{lineItem.description} | \r\n{lineItem.quantity} | \r\n{formatUsCurrency(lineItem.unitCost)} | \r\n{formatUsCurrency(lineItem.amount)} | \r\n\r\n |
| Subtotal | \r\n{formatUsCurrency(invoice.subtotal)} | \r\n
| {lineItem.lineItemNumber} | \r\n{lineItem.itemName} | \r\n{lineItem.description} | \r\n{lineItem.quantity} | \r\n{formatUsCurrency(lineItem.unitCost)} | \r\n{formatUsCurrency(lineItem.amount)} | \r\n
Invoice Total | \r\n {formatUsCurrency(invoice.billedAmount)} | \r\n
Balance Due | \r\n {formatUsCurrency(invoice.balance)} | \r\n
No history found for this invoice
\r\n )\r\n }\r\n