element)\n contentText: props.contentText, // For use when the content is strictly text (i.e. elements wrappable within a
element)\n handleClose: props.handleClose,\n emailPackage: props.emailPackage,\n altButton: props.altButton,\n clearBarcode: props.clearBarcode,\n generateBarcode: props.generateBarcode,\n emailPlaceholder: props.emailPlaceholder,\n emailSuccessMessage: props.emailSuccessMessage,\n emailInvalidMessage: props.emailInvalidMessage,\n validEmail: true,\n emailSending: false,\n emailSent: false\n };\n\n this.handleClickOpen = this.handleClickOpen.bind(this);\n this.handleClose = this.handleClose.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.sendEmail = this.sendEmail.bind(this);\n this.emailInputRef = React.createRef();\n }\n\n handleClickOpen()\n {\n this.setState({open: true})\n }\n\n handleClose = (event, reason) => {\n // Prevent closing the dialog by clicking the background\n if (reason && reason === \"backdropClick\") {\n return;\n }\n\n if (this.state.type === 'email') {\n this.setState({ validEmail: true, emailSent: false });\n }\n\n this.setState({open: false})\n }\n\n componentWillReceiveProps(props)\n {\n this.setState({\n open: props.open,\n title: props.title,\n content: props.content,\n contentText: props.contentText,\n firstButton: props.firstButton,\n handleFirstButtonClick: props.handleFirstButtonClick,\n secondButton: props.secondButton,\n handleSecondButtonClick: props.handleSecondButtonClick,\n altButton: props.altButton,\n });\n }\n\n\n handleChange(event)\n {\n emailAddress = event.target.value;\n }\n\n\n async sendEmail() {\n emailAddress = emailAddress.trim();\n let emailPackage = this.state.emailPackage;\n emailPackage.emailAddress = emailAddress;\n\n if (emailAddress && emailAddress.match(/.+?@{1}.+\\..+/g)) {\n this.setState({\n validEmail: true,\n emailSending: true\n });\n\n await xpressApi.post(EMAIL_DONOR_PASS, emailPackage);\n\n this.setState({\n emailSending: false,\n emailSent: true\n });\n\n await xpressApi.get(RECORD_STAT, {\n params: {\n bloodCenterId: emailPackage.bloodCenterId,\n type: 'email',\n emailAddress: emailAddress\n }\n });\n }\n else {\n this.setState({\n validEmail: false,\n emailSent: false\n });\n }\n }\n\n render()\n {\n let content;\n let actions;\n\n if (this.state.type === 'email')\n {\n if (this.state.emailSent) {\n content =\n \n \n {this.state.emailSuccessMessage}\n \n ;\n\n actions =\n \n \n ;\n }\n else {\n const enter = e => {\n if (e.key === 'Enter') {\n this.sendEmail(e).then();\n }\n }\n\n content =\n \n \n {!this.state.emailSending && }\n {!this.state.validEmail && {this.state.emailInvalidMessage}}\n {this.state.emailSending && }\n \n ;\n\n actions =\n \n {!this.state.emailSending &&\n \n \n\n \n
\n }\n ;\n }\n }\n else if (this.state.type === 'generateBarcode')\n {\n content =\n \n \n {this.state.contentText}\n \n ;\n\n actions =\n \n \n \n \n }\n else {\n content =\n \n {\n /* If the contentText prop was used, wrap it in a DialogContentText element. Otherwise, display the content as-is */\n (this.state.contentText && {this.state.contentText})\n ||\n (this.state.content)\n }\n ;\n\n actions =\n \n \n {this.state.secondButton && \n \n }\n \n }\n\n return (\n
\n \n
\n );\n }\n}\n","import React from 'react';\nimport './Barcode.css';\nimport {xpressApi, RECORD_STAT} from '../../providers/xpress_api';\nimport XpressDialog from '../XpressDialog/XpressDialog';\nimport Header from \"../Common/Header/Header\";\nimport Footer from \"../Common/Footer/Footer\";\n\nexport default class Barcode extends React.Component\n{\n constructor(props)\n {\n super(props);\n\n this.questionnaire = this.props.xpressState.questionnaire;\n this.language = this.props.xpressState.language;\n this.translationConstants = this.props.xpressState.translationConstants;\n this.donorBirthDate = this.props.xpressState.dob;\n this.donorSex = this.props.xpressState.sex;\n this.sexDescription = this.props.xpressState.sexDescription;\n this.bloodCenterProperties = this.props.xpressState.bloodCenterProperties;\n this.barcodeType = this.bloodCenterProperties.barcodeType;\n this.donorPass = this.props.xpressState.donorPass;\n\n this.emailPackage =\n {\n encodedResponseList: this.donorPass.encodedResponseList,\n barcodeType: this.barcodeType,\n translationId: this.language,\n donorBirthDate: this.donorBirthDate,\n donorSex: this.donorSex,\n donorSexDescription: this.sexDescription, // Added the translated sex description (HD #10194)\n bloodCenterId: this.questionnaire.bloodCenterId,\n bloodCenterName: this.bloodCenterProperties.bloodCenterName,\n barcodeImageList: this.donorPass.barcodeImageList,\n showBarcodeInEmail: this.bloodCenterProperties.showBarcode,\n stage: process.env.REACT_APP_DEPLOY_ENV\n }\n\n this.state = {\n emailClicked: false,\n downloadClicked: false\n };\n }\n\n startOver = () => { window.location.href = window.origin + '/' + this.questionnaire.bloodCenterId; }\n\n handlePrint = async () =>\n {\n await xpressApi.get(RECORD_STAT,\n {\n params: {\n bloodCenterId: this.bloodCenterProperties.bloodCenterId,\n type: 'print'\n }\n\n });\n\n window.print();\n }\n\n handleDownload = async () =>\n {\n await xpressApi.get(RECORD_STAT,\n {\n params: {\n bloodCenterId: this.bloodCenterProperties.bloodCenterId,\n type: 'download'\n }\n });\n\n const binaryString = window.atob(this.donorPass.downloadImage);\n let bytes = new Uint8Array(binaryString.length);\n let pdfData = bytes.map((byte, i) => binaryString.charCodeAt(i));\n\n let file = new Blob([pdfData], { type: 'application/pdf' });\n let fileURL = URL.createObjectURL(file);\n\n const anchor = document.createElement('a');\n anchor.href = fileURL;\n anchor.download = 'Donor Pass.pdf';\n\n document.body.appendChild(anchor);\n anchor.click();\n document.body.removeChild(anchor);\n\n this.setState({emailClicked: false, downloadClicked: true});\n }\n\n handleEmail = async () =>\n {\n this.setState({emailClicked: true, downloadClicked: false});\n }\n\n render()\n {\n let donorPassBarcodes = [];\n let donorPassHeader;\n let emailModal, downloadModal;\n let translationConstants = this.translationConstants;\n\n if (this.state.downloadClicked)\n {\n downloadModal =
;\n }\n else\n {\n downloadModal = \"\";\n }\n\n if (this.state.emailClicked)\n {\n emailModal = ;\n }\n else\n {\n emailModal = null;\n }\n\n let barcodeIndex = 0;\n let barcodePackage = this.donorPass;\n let dob = this.donorBirthDate;\n let sex = this.donorSex;\n\n let sexLabel = translationConstants.prescreenPageGender;\n let dobLabel = translationConstants.prescreenPageDOB;\n\n donorPassHeader = (\n \n {this.language === \"1\" && this.questionnaire.thanksPath &&
}\n {this.language === \"2\" && this.questionnaire.thanksPathEs &&
}\n
\n
{sexLabel}: {this.sexDescription}
\n {dobLabel}: {dob}
\n \n
1 && barcodeIndex + 1 !== barcodePackage.barcodeImageList.length ? '20px' : '')}}>\n
\n
{translationConstants.donorPageBarcode + (barcodePackage.barcodeImageList.length > 1 ? \" \" + (barcodeIndex + 1) : \"\")}:
\n {imageText}
\n \n
\n
![\"Barcode\"/]({\"data:image/png;base64,\")
\n
\n
\n
\n
\n {emailModal}\n {downloadModal}\n\n \n
\n
\n {/* Display a Thank-You message when the donor pass page is being printed */}\n
{this.translationConstants.donorPassThankYou.replace(\"%BLOOD_CENTER_NAME%\", this.bloodCenterProperties.bloodCenterName)}\n
\n
\n
Donor Pass
\n
\n
\n {donorPassHeader}\n {donorPassBarcodes}\n
{translationConstants.donorPassExpire}
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {/* Add vertical padding between the buttons if an XS viewport is being used, which causes them to wrap */}\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n