\n \n \n {(formikProps) => (\n
\n )}\n \n \n \n \n \n {insuranceView.view(formikProps)}\n
\n {t('registration.insurance_policy_holder.policy_dob')}
\n{t('registration.insurance_information.title')}
\n }\n\n {t(\n buildCustomizedLabel(\n state.testGroup.population,\n 'registration.insurance_status.question',\n ),\n )}\n
\n{t('no_insurance_information.insurance_card')}
\n{t('registration.insurance_information.take_photo')}
\n {openCardScan\n ?\n
\n : \n setOpenCardScan(true)}\n >\n
\n \n }\n {t(`registration.insurance_information.${face.toLowerCase()}_of_card`)}
\n \n ))}\n {t('registration.insurance_policy_holder.name')}
\n{t('registration.insurance_information.card_information')}
\n\n dispatch({type: \"updateForm\", values: {insuranceCompanyName: e.value}}) }\n options={insuranceCompanyOptions}\n formatCreateLabel={(value) => `Other - click here to add: ${value}`}\n aria-label={t('registration.insurance_information.company_name')}\n />\n \n
\n {t('registration.custom_survey')}
\n\n \n {currentNode.navigationActions?.back &&\n \n }\n submit(state)}\n >\n {t('registration.submit')}\n \n : dispatch({ type: 'perform_navigation', action: 'next' })}\n >\n {t('registration.continue_button')}\n \n }\n \n
\n )\n};\n\nexport default InsuranceV2;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport HaveInsurance from './HaveInsurance';\nimport PolicyHolder from './PolicyHolder';\nimport UploadInsuranceCard from './UploadInsuranceCard';\nimport InsuranceSurvey from './InsuranceSurvey';\n\nexport default (props) => {\n const { t } = useTranslation();\n const showSurvey = (props.state.testGroup.show_only_insurance_survey && props.state.formState.haveHealthInsurance === false) ||\n (props.state.testGroup.show_insurance_survey && props.state.testGroup.show_only_insurance_survey) ||\n Object.keys(props.state.testGroup.insurance_survey || {}).length > 0\n\n return (\n <>\n {t('registration.confirmation_section.title')}
\n\n {\n !showScanner && \n }\n {\n showScanner && \n }\n
\n );\n}\n\nexport default Scanner;","import React, { useState } from 'react';\nimport { Card } from 'react-bootstrap';\nimport format from 'date-fns/format';\nimport SurveyPreview from \"../../../common/components/SurveyPreview\";\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\n\nconst TestSurveyForm = ({\n test,\n updateTest,\n disabled,\n isInvalid=false,\n }) => {\n\n const survey = (test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey\n : test.test_configuration.survey) || {};\n const surveyAnswers = (test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey_answers\n : test.test_survey) || { admin_approved: false };\n\n const [render, reRender] = useState(false);\n\n let localizedCompletedAt,\n localizedAdminApprovedAt;\n const surveyCompletedAt = surveyAnswers.created_at;\n const surveyAdminApprovedAt = surveyAnswers.admin_approved_at;\n if (surveyCompletedAt) localizedCompletedAt = format(new Date(surveyCompletedAt), 'MMMM dd, yyyy HH:mm:ss');\n if (surveyAdminApprovedAt) localizedAdminApprovedAt = format(new Date(surveyAdminApprovedAt), 'MMMM dd, yyyy HH:mm:ss');\n\n return (\n \n Participant completed screening: {localizedCompletedAt || \"False\"}\n
\n {disabled && surveyAnswers.admin_approved ? (\n \n Screening approved: {localizedAdminApprovedAt || \"True\"}\n
\n ) : (\n \n \n \n
\n );\n};\n\nexport const VaccineProgramStep = ({\n fundingSourceOptions,\n options,\n requestEligibility,\n requestFundingSource,\n stepNumber,\n subTitle,\n test,\n title,\n updateTest,\n vaccineProgramField,\n}) => {\n const [show, setShow] = useState(true);\n const extractKeys = (options) => {\n const keys = Object.keys(options);\n // make \"unknown\" the last option if present and does not have a code so \"None of the above\" makes sense\n if (keys.includes(\"unknown\") && !options[\"unknown\"][\"code\"]) keys.push(keys.splice(keys.indexOf(\"unknown\"), 1)[0]);\n return keys;\n };\n const keys = extractKeys(options);\n return (\n setShow(!show)}>\n
\n\n {stepNumber}. Participant screening responses {' '}\n { !test.test_survey?.admin_approved &&\n
\n
\n \n
\n {stepNumber}. Participant screening responses {' '}\n { !test.test_survey?.admin_approved &&\n
\n \n {\n updateTest({\n ...test,\n notes: e.target.value,\n });\n }}\n />\n )}\n
\n \n \n \n
\n );\n};\n\nexport const VaccineLotStep = ({\n test,\n updateTest,\n vaccineRoute,\n setVaccineRoute,\n complete,\n stepNumber,\n}) => {\n const [show, setShow] = useState(true);\n const [vaccineResult, testSurvey, testConfiguration] = [\n test.vaccine_result,\n test.test_survey,\n test.test_configuration,\n ];\n\n const vaccineLotOptions =\n testConfiguration.vaccine_lots &&\n testConfiguration.vaccine_lots.map((vaccineLot) => {\n return { label: vaccineLot.lot_number, value: vaccineLot.lot_number };\n });\n\n const [scannerOpen, setScannerOpen] = useState(false);\n\n return (\n setShow(!show)}>\n
\n
\n \n
\n {stepNumber}. {title}\n
\n\n {requestEligibility && (\n <>\n
\n \n {subTitle}\n
\n \n {keys\n .map((option) => {\n const code = options[option][\"code\"] ? `(${options[option][\"code\"]})` : \"\";\n const label = option === 'unknown' && !options[option][\"code\"]\n ? 'None of the above'\n : `${options[option][\"label\"]} ${code}`;\n return (\n {\n const updatedTest = {...test};\n updatedTest[\"vaccine_result\"][vaccineProgramField] = option;\n updateTest(updatedTest);\n }}\n label={label}\n />\n )\n })\n }\n
\n \n )}\n {requestFundingSource && (\n \n
\n )}\n Funding source
\n\n {Object.keys(fundingSourceOptions)\n .map((option) => {\n return (\n {\n updateTest({\n ...test,\n vaccine_result: {\n ...test.vaccine_result,\n funding_source: option,\n },\n });\n }}\n label={`${fundingSourceOptions[option][\"label\"]} (${fundingSourceOptions[option][\"code\"]})`}\n />\n )\n })\n }\n
\n \n \n \n {\n const parsed = Primary.parseVaccineBarcode(barcode);\n if (parsed.error) {\n setError(parsed.error);\n return;\n }\n const lotNumber = parsed.lotNumber;\n const vaccineLot = testConfiguration.vaccine_lots.find(\n (vl) => vl.lot_number === lotNumber,\n );\n if (vaccineLot) {\n setVaccineLot(vaccineLot);\n } else {\n setError(\n `Lot number ${lotNumber} not found. Manage lots to add a new lot.`,\n );\n }\n close();\n }}\n setScannerOpen={setScannerOpen}\n />\n )}\n \n o.value === vaccineResult.lot_number)}\n onChange={(e) => {\n const vaccineLot = testConfiguration.vaccine_lots.find(\n (vl) => vl.lot_number === e.value,\n );\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n lot_number: vaccineLot.lot_number,\n dose: vaccineLot.vaccine_route.default_dose.toString(),\n expiration_date: vaccineLot.expiration_date,\n vaccine_lot_id: vaccineLot.id,\n administration_type:\n vaccineLot.vaccine_route.default_administration_type,\n },\n });\n setVaccineRoute(vaccineLot.vaccine_route);\n }}\n options={vaccineLotOptions}\n label=\"Lot number\"\n filledValue={vaccineResult.lot_number}\n />\n \n {vaccineRoute && vaccineResult.lot_number && (\n
\n \n
\n );\n};\n\nexport const AdministrationStep = ({ test, updateTest, complete, showError=false, completeReasons=[], stepNumber }) => {\n const [show, setShow] = useState(true);\n const disabledVaccineDoseIds = test.test_configuration[\"disabled_vaccine_route_and_dose_ids\"][\"vaccine_dose_ids\"].map(v => parseInt(v));\n const disabledVaccineRouteIds = test.test_configuration[\"disabled_vaccine_route_and_dose_ids\"][\"vaccine_route_ids\"].map(v => parseInt(v));\n const [vaccineResult, vaccineRoute, testSurvey, testConfiguration, vaccineDoses, vaccineDoseId] = [\n test.vaccine_result,\n test.vaccine_result.vaccine_route,\n test.test_survey,\n test.test_configuration,\n test.vaccine_result.vaccine_route.vaccine_doses ? test.vaccine_result.vaccine_route.vaccine_doses.filter(vd => vd.active === true && !disabledVaccineDoseIds.includes(vd.id)) : [],\n test.vaccine_result.vaccine_dose_id\n ];\n const isDefaultDoseDisabled = disabledVaccineRouteIds.includes(vaccineRoute.id);\n const allVaccineDoses = vaccineDoses;\n if (!isDefaultDoseDisabled) allVaccineDoses.unshift({ id: null, dose_name: vaccineRoute.default_vaccine_dose_name, size: vaccineRoute.default_dose, dose_type: \"default\" });\n const onlyOneDoseAvailable = allVaccineDoses.length === 1;\n const defaultDose = allVaccineDoses.find(vd => vd.id == null);\n const initialDose = onlyOneDoseAvailable\n ? allVaccineDoses[0]\n : vaccineDoseId\n ? vaccineDoses.find(vd => vd.id === vaccineDoseId)\n : test.administered\n ? {dose_name: defaultDose?.dose_name, size: vaccineResult.dose}\n : defaultDose\n\n const [selectedDose, setSelectedDose] = useState(onlyOneDoseAvailable && {\n dose_name: initialDose?.dose_name,\n size: initialDose?.size,\n });\n\n if (initialDose && !vaccineResult.dose_name && onlyOneDoseAvailable) {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n dose_name: initialDose.dose_name || \"N/A\",\n vaccine_dose_id: initialDose.id,\n dose: initialDose.size || 0.0\n },\n });\n }\n\n const dosesInOrder = [\"default\", \"dose_1\", \"dose_2\", \"dose_3\", \"dose_4\", \"dose_5\", \"booster_dose\", \"second_booster_dose\", \"additional_dose\"];\n const administeredDoseOptions = allVaccineDoses.sort((a, b) => {\n return dosesInOrder.indexOf(a.dose_type) - dosesInOrder.indexOf(b.dose_type)\n }).map((vd, index) => {\n return { value: vd, label: vd.dose_name }\n });\n\n return (\n setShow(!show)}>\n
\n\n {stepNumber}. Lot number\n
\n
\n \n
\n {stepNumber}. Lot number\n \n Manage lots\n \n
\n \n \n
\n \n
\n
\n )}\n \n \n \n
\n );\n};\n\nexport const ConfirmationStep = ({\n test,\n updateTest,\n complete,\n completeReasons,\n submitTests,\n onComplete,\n showError,\n setShowError,\n administrationLogged,\n vaccineInfoSheetProps,\n setAdministrationLogged,\n currentAdministratorName,\n setCurrentAdministratorName,\n currentAdministratorDegree,\n setCurrentAdministratorDegree,\n currentAdministratorInitials,\n setCurrentAdministratorInitials,\n stepNumber,\n}) => {\n const [show, setShow] = useState(true);\n const [vaccineResult, testSurvey, testConfiguration] = [\n test.vaccine_result,\n test.test_survey,\n test.test_configuration,\n ];\n\n const [\n vaccineInfoSheetVersionApproval,\n vaccineInfoSheetVersion,\n vaccineInfoSheetVersionFileUrl,\n vaccineInfoSheetFlipper,\n ] = [\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version_approval,\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version,\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version_file_url,\n vaccineInfoSheetProps?.vaccine_info_sheet_flipper,\n ];\n\n const visVersionDateInUTC = vaccineInfoSheetVersion?.version_date\n && formatInTimeZone(new Date(vaccineInfoSheetVersion.version_date), 'UTC', 'MM/dd/yyyy');\n\n useEffect(() => {\n const testData = {\n ...test,\n vaccine_result: {\n ...vaccineResult,\n },\n }\n if (currentAdministratorName || !vaccineResult.administrator_name) {\n testData[\"vaccine_result\"][\"administrator_name\"] = currentAdministratorName;\n }\n if (currentAdministratorDegree || !vaccineResult.administrator_degree) {\n testData[\"vaccine_result\"][\"administrator_degree\"] = currentAdministratorDegree;\n }\n if (currentAdministratorInitials || !vaccineResult.administrator_initials) {\n testData[\"vaccine_result\"][\"administrator_initials\"] = currentAdministratorInitials;\n }\n updateTest(testData)\n }, [currentAdministratorName, currentAdministratorDegree, currentAdministratorInitials])\n\n const redIconStyle = {\n // makes svg icon color red\n filter: \"invert(75%) sepia(93%) saturate(3246%) hue-rotate(313deg) brightness(88%) contrast(123%)\",\n width: \"20px\",\n margin: \"0px 0px 3px 0px\",\n }\n\n return (\n setShow(!show)}>\n
\n
\n \n
{stepNumber}. Administration
\n\n \n o.label === selectedDose.dose_name)}\n onChange={(vd) => {\n setSelectedDose({dose_name: vd.value?.dose_name, size: vd.value?.size});\n updateTest({\n ...test,\n vaccine_result: { ...vaccineResult, dose: vd.value?.size, vaccine_dose_id: vd.value?.id, dose_name: vd.value?.dose_name },\n })\n }}\n options={administeredDoseOptions}\n label=\"Administered dose\"\n filledValue={selectedDose.dose_name}\n />\n )}\n \n o.value === vaccineResult.administration_type)}\n onChange={(at) => {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n administration_type: at.value,\n },\n });\n }}\n options={testConfiguration.administration_type_options}\n label=\"Administered type\"\n filledValue={vaccineResult.administration_type}\n />\n \n
\n \n {\n setSelectedDose({dose_name: selectedDose.dose_name, size: e.target.value})\n updateTest({\n ...test,\n vaccine_result: { ...vaccineResult, dose: e.target.value },\n });\n }}\n label=\"Dose (ml)\"\n />\n \n o.value === vaccineResult.administration_site)}\n onChange={(as) => {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n administration_site: as.value,\n },\n });\n }}\n options={testConfiguration.administration_site_options}\n label=\"Site\"\n filledValue={vaccineResult.administration_site}\n />\n \n
\n
\n \n \n \n
\n );\n};\n\nexport const VACCINE_LABELS = {\n label_A4_vaccine: \"8.0x11.0 Vaccination Statement\",\n label_2_0x1_25_vaccine: \"2.0x1.25 Label\",\n label_2_0x0_5_vaccine: \"2.0x0.5 Label\",\n label_2_0x1_0_vaccine: \"2.0x1.0 Label\",\n label_0_5x1_0_vaccine: \"0.5x1.0 Label\",\n label_1_25x2_0_vaccine: \"1.25x2.0 Label\",\n}\n\nexport const PrintStep = ({ test, updateTest, submitTests, onComplete, stepNumber }) => {\n\n return (\n setShow(!show)}>\n
\n
\n \n
{stepNumber}. Confirm administration
\n\n \n {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n administrator_name: e.target.value,\n },\n });\n setCurrentAdministratorName(e.target.value);\n }}\n label=\"Administered by\"\n />\n \n [o.label, o.value].includes(vaccineResult.administrator_degree))}\n onChange={(e) => {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n administrator_degree: e.value,\n },\n });\n setCurrentAdministratorDegree(e.value);\n }}\n options={testConfiguration.administrator_degree_options}\n label=\"Administrator degree\"\n filledValue={vaccineResult.administrator_degree}\n />\n \n
\n \n {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n administrator_initials: e.target.value,\n },\n });\n setCurrentAdministratorInitials(e.target.value);\n }}\n label=\"Signature (initials)\"\n />\n \n
\n \n {vaccineInfoSheetFlipper && (\n vaccineInfoSheetVersionApproval ? (\n {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n statement_provided: !vaccineResult.statement_provided,\n vaccine_info_sheet_version_approval_id: !vaccineResult.statement_provided ? vaccineInfoSheetVersionApproval?.id : null,\n vaccine_info_sheet_version_id: !vaccineResult.statement_provided ? vaccineInfoSheetVersion?.id : null,\n },\n });\n }}\n inputClassName={(showError && Object.keys(completeReasons).includes(\"statement_provided\")) ? \"is-invalid\" : \"\"}\n checked={vaccineResult.statement_provided}\n label=\"Confirmed vaccine information statement or fact sheet provided\"\n />\n 0}\n />\n {showError && Object.values(completeReasons).length > 0 && (\n \n
\n \n
\n ) : (\n vaccineInfoSheetVersion ? (\n Vaccine information provided on: {format(new Date(vaccineInfoSheetVersionApproval?.updated_at), 'MMM dd, yyyy HH:mm:ss zzz')}
\n \n Edition date: {visVersionDateInUTC}\n
\n \n
\n ) : (\n \n No relevant VIS available.\n
\n )\n )\n )}\n \n Missing Information:{' '}\n {Object.values(completeReasons).map((reason) => {\n return {reason} ;\n })}\n
\n )}\n \n
\n {\n updateTest({...test, administered: true});\n submitTests({ tests: [test] }).then((response) => {\n print();\n onComplete();\n });\n }}\n label={key}\n name={VACCINE_LABELS[key]}\n />\n )}\n
\n );\n};\n\nexport const StepRefused = ({\n test,\n updateTest,\n complete,\n onComplete,\n submitTests,\n setShowError,\n}) => {\n const [vaccineResult, testSurvey, testConfiguration] = [\n test.vaccine_result,\n test.test_survey,\n test.test_configuration,\n ];\n const [success, setSuccess] = useState('');\n\n return (\n \n
{stepNumber}. Print vaccination cards/labels
\n {!test.administered ? (\n\n Available after administration has been logged.\n
\n ) : Object.keys(VACCINE_LABELS).map(key =>\n \n {\n updateTest({\n ...test,\n vaccine_result: { ...vaccineResult, refusal_state: e.value },\n });\n }}\n className=\"z5\"\n />\n {vaccineResult.refusal_state == 'other_reason' && (\n {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n refusal_note: e.target.value,\n },\n });\n }}\n />\n )}\n {\n submitTests({ tests: [test] }).then((response) => {\n setSuccess('Successfully Logged');\n onComplete();\n });\n }}\n >\n Log Refusal\n \n {success && (\n \n {success}\n \n )}\n
\n );\n};\n\nexport const ActionButtons = ({\n test,\n updateTest,\n complete,\n submitTests,\n setShowError,\n disabled=false,\n}) => {\n const [vaccineResult, testSurvey, testConfiguration] = [\n test.vaccine_result,\n test.test_survey,\n test.test_configuration,\n ];\n\n const logAdministration = () => {\n setShowError(!complete);\n if (complete) {\n updateTest({\n ...test,\n administered: test.administered === true ? null : true,\n vaccine_result: {\n ...vaccineResult,\n refusal_state: 'no_refusal',\n refusal_note: null,\n },\n });\n submitTests({ tests: [\n {\n ...test,\n administered: test.administered === true ? null : true,\n vaccine_result: {\n ...vaccineResult,\n refusal_state: 'no_refusal',\n refusal_note: null,\n },\n },\n ] });\n }\n };\n\n return (\n Log administration for {test.user.full_name} ({test.user.date_of_birth}):
\n\n
\n );\n};\n\nVaccineForm.propTypes = vaccineTestShape;\n\nexport default VaccineForm;\n","import React from 'react';\n\nconst CheckoutServiceCardErrors = ({\n consentFormsUsers=[],\n consentForm={},\n meetsAgeRequirements,\n checkoutAlert,\n}) => {\n const consent = consentFormsUsers.find(cfu => cfu.consent_form_id == consentForm.id);\n const declinedConsent = consent?.consent == \"no\";\n const hasConsentForm = consentForm.found;\n const consentErrored = declinedConsent || (hasConsentForm && !consent?.consented);\n\n const alertIcon = declinedConsent\n ? \"x-circle\"\n : (consentErrored || !meetsAgeRequirements)\n ? \"alert-circle\"\n : checkoutAlert\n ? \"alert-triangle\"\n : null;\n\n const errorStyle = {\n margin: \"2px 0px\",\n color: \"var(--danger-500, #CB2531)\",\n }\n\n const redIconStyle = {\n // makes svg icon color red\n filter: \"invert(75%) sepia(93%) saturate(3246%) hue-rotate(313deg) brightness(88%) contrast(123%)\",\n width: \"20px\",\n margin: \"0px 0px 3px 0px\",\n }\n\n return (\n <>\n {alertIcon && (\n \n \n {administrationLogged !== null && (\n
\n ) : (\n 'Add Vaccines to Inventory'\n )}\n \n setEdit(false)}\n >\n Close\n \n
\n )}\n \n {consentErrored && (\n
\n \n )\n};\n\nexport default CheckoutServiceCardErrors;\n","import React from 'react';\nimport hexRgb from 'hex-rgb';\nimport { Card, Col } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleExclamation } from '@fortawesome/pro-regular-svg-icons';\n\nexport const CardOptionsWrapper = ({ children }) => (\n \n {declinedConsent\n ? \"Participant declined consent for this service.\"\n : \"Consent not provided\"\n }\n
\n )}\n {!meetsAgeRequirements && (\n \n Does not meet age requirement\n
\n )}\n {checkoutAlert && (\n \n {checkoutAlert}\n
\n )}\n \n {children}\n
\n);\n\nexport const SummaryBadge = ({ text, icon, color, style = {}, ...props }) => (\n \n \n
\n);\n\nexport const SectionsWrapper = ({ visible, children }) =>\n visible ? (\n \n
\n \n
\n \n
\n )}\n \n {children}\n \n \n
\n ) : null;\n\nexport const hexToRgba = (colorCode, opacity = 1) => {\n const isHexValid = colorCode && /^#[0-9A-F]{6}$/i.test(colorCode);\n if (!isHexValid) return 'rgba(245, 245, 245, 0.1)';\n return `rgba(${Object.values(hexRgb(colorCode, {alpha: opacity})).join(\", \")})`;\n};\n\nconst ServiceCard = ({ test, edit, children }) => {\n const rgbaColor = hexToRgba(test.test_configuration.color_code, 0.07);\n const backgroundStyle = {\n padding: '10px 20px 20px',\n backgroundColor:\n !(test.result && test.administered_at) || edit\n ? rgbaColor\n : '#F5F5F5',\n border: '1px solid #C4C4C4',\n };\n\n return (\n {children}
\n \n \n Print labels\n
\n \n );\n};\n\nconst CardOptions = ({ edit, setEdit, handleReset, ...props }) => (\n - \n {Object.keys(VACCINE_LABELS).map((key) => (\n
- \n
\n Administered By: {test.vaccine_result?.administrator_name} (\n {test.vaccine_result?.administrator_degree})\n
\n Lot #: {test.vaccine_result?.lot_number}\n \n )}\n \n
\n {test.administered ? (\n \n \n Location: {humanize(test.vaccine_result?.administration_site)}\n
\n VIS Provided:{' '}\n {test.vaccine_result?.statement_provided ? 'True' : 'False'}\n
\n \n \n ) : (\n
\n \n \n VIS Provided:{' '}\n {test.vaccine_result?.statement_provided ? 'True' : 'False'}\n
\n \n
- \n
\n Notes: {test.notes}\n {test.administered && (\n <>\n
\n Administered By:{' '}\n {test.vaccine_result?.administrator_name} (\n {test.vaccine_result?.administrator_degree})\n
\n Lot #: {test.vaccine_result?.lot_number}\n \n )}\n
\n \n \n Administered By:{' '}\n {test.vaccine_result?.administrator_name} (\n {test.vaccine_result?.administrator_degree})\n
\n Lot #: {test.vaccine_result?.lot_number}\n \n )}\n
\n VIS Provided:{' '}\n {test.vaccine_result?.statement_provided\n ? 'True'\n : 'False'}\n
\n \n
{errors[errorKey]}
;\n })}\n No records available
;\n }\n\n return (\n| Status | \nVaccine | \nManufacturer | \nDate | \nNotes | \nSource | \n
|---|---|---|---|---|---|
| { doseValidity(valid_dose) } | \n{ vaccineName(vaccine) } | \n{ manufacturerName(manufacturer) } | \n{ vaccinated_on } | \n{ notes } | \n{ source.toUpperCase() } | \n
| {nameColumnAlias || 'Name'} | \nDOB | \nGender | \nAddress | \nPhone | \n\n |
|---|---|---|---|---|---|
| \n | \n \n | \n \n | \n \n {match.address && (\n <>\n \n \n | \n \n {match.phone_number && (\n <>\n | \n \n | \n
\n \n Immunization History\n {hasWarning ? (\n
\n \n \n
\n );\n};\n\nexport default ImmunizationHistory;\n","import React from 'react';\nimport { vaccineName, manufacturerName } from '../../common/utils/vaccine';\nimport { Alert } from 'react-bootstrap';\n\nconst ImmunizationTable = ({\n histories,\n message = 'No vaccine history available',\n showAlert,\n}) => {\n return (\n <>\n \n Immunization History\n {hasWarning ? (\n \n )}\n
\n \n \n \n \n \n {isHipaaTrained ? (\n \n You do not have access to the patient’s full history. Please\n contact your site lead for detailed immunization history.\n \n )}\n \n \n
\n | Vaccine group | \nVaccine | \nManufacturer | \nDate | \nSource | \n
|---|---|---|---|---|
| {group} | \n{vaccineName(vaccine)} | \n{manufacturerName(manufacturer)} | \n{vaccinated_on} | \n{source?.toUpperCase()} | \n
\n Select patient from the {source.toUpperCase()} directory to verify\n their identity\n
\n\n Patient name\n
\n | \n | Name | \nDate of birth | \nGender | \nAddress | \nPhone number | \nSource | \n
|---|---|---|---|---|---|---|
| \n | \n \n {match.name.first_name} {match.name.other_names}{' '}\n {match.name.last_name}\n | \n{match.date_of_birth} | \n{match.gender} | \n\n {match.address && (\n <>\n {match.address.street}\n \n {match.address.city}, {match.address.state}\n \n {match.address.zip_code}\n \n )}\n | \n \n {match?.phone_number?.area_code && match?.phone_number?.local_number && (\n <>\n {`(${match.phone_number.area_code}) ${match.phone_number.local_number}`}\n \n )}\n | \n{iisProvider.toUpperCase()} | \n
\n {title &&
\n \n {btnLabel && (\n {title}
}\n\n
\n \n \n {btnLabel}\n \n
\n \n )}\n \n Chosen test services\n
\n \n \n
\n );\n}\n\nexport default ZplCodePrinter;\n","import React, { useEffect } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport ModalHeader from '../../../common/components/ModalHeader';\n\nconst AbbottInvalidReasonModal = ({\n test,\n updateDidNotResultReason,\n didNotResultOptions,\n}) => (\n \n updateDidNotResultReason(value)}\n type=\"radio\"\n />\n \n {label}\n \n
\n {image && 
}\n \n ))}\n \n {resultOptions.map(({ value, label, image }, idx) => (\n updateResult(value)}\n >\n }\n
\n ))}\n {test.result === 'did_not_result' && (\n \n e.stopPropagation()}\n >\n {label}\n \n
\n {image && }\n \n {resultOptions.map(({ value, label }, idx) => (\n updateResult(value)}\n >\n
\n ))}\n \n ) : (\n \n e.stopPropagation()}\n >\n {label}\n \n
\n \n Notes: {test.notes}\n
\n {test.administered ? (\n
\n \n )}\n \n
\n
\n \n
\n {index && `${index}. `}\n {title}\n
\n\n
\n {children}
\n \n \n {test.use_medical_screening_survey_on_checkout ? (\n updateMedicalScreeningSurvey(e.data)}\n />\n ) : (\n updateTestSurvey(e.data)}\n />\n )}\n
\n {!hasValidAnswers && (\n \n {t('registration.errors.survey_unanswered')}\n \n )}\n \n \n updateTestResult({\n ...test[testResultKey],\n results_approved: e.target.checked,\n })\n }\n disabled={!edit}\n />\n \n Confirm result?\n \n
\n );\n};\n\nconst Result = ({\n test,\n updateTestAttr,\n edit,\n setError,\n sectionIndex: index,\n}) => {\n const updateImageData = updateTestAttr('test_image_base64');\n\n return (\n \n Administered time:\n
\n )}\n \n Final result:\n
\n {hasPositiveResult(test) && (\n \n {edit ? (\n !(\n test.test_configuration.hide_administered_button &&\n test.test_configuration.hide_not_administered_button\n ) && (\n \n Status:\n \n updateAdministered(!test.administered)}\n label={\n test.administered === true\n ? 'Administered'\n : 'Not Administered'\n }\n checked={!!test.administered}\n className=\"mt-2 green-switch\"\n id={`administered_switch_${test.uid}`}\n />\n \n \n )\n ) : (\n \n Status:\n \n )}\n
\n \n {test.administered ? (\n
\n \n \n Notes:{!edit && !test.notes && ' N/A'}\n \n {edit ? (\n updateTestAttr('notes')(e.target.value)}\n />\n \n ) : (\n test.notes && {test.notes}\n )}\n
\n - \n
\n errors[errorKey].errored)\n .map((errorKey) => errors[errorKey].errorMessage)\n .join('\\n'),\n }}\n >\n
\n);\n\nconst Sections = ({\n visible,\n updateCheckoutTest: propUpdateCheckoutTest,\n showResultSection: propShowResultSection,\n errors,\n ...props\n}) => {\n const [hasValidAnswers, setHasValidAnswers] = useState(true);\n const [administratorFieldsFilled, setAdministratorFieldsFilled] =\n useState(true);\n const questionnaireModelRef = useRef(null);\n const showResultImmediately = generateRecordConfigurationIs(\n props.test,\n 'shows_result_immediately',\n );\n const testHasQuestionnaire = testHasSurvey(props.test);\n const showResultSection = propShowResultSection && showResultImmediately;\n const showAdministratorSection =\n props.test.test_configuration.require_medical_professional_data_on_checkout;\n const showCollectionSection = props.test.test_configuration.require_collection_on_checkout;\n\n const sectionsInOrder = [];\n if (testHasQuestionnaire) sectionsInOrder.push('questionnaire');\n if (showResultSection) sectionsInOrder.push('result');\n if (!showAdministratorSection && showCollectionSection) sectionsInOrder.push('collection');\n sectionsInOrder.push('confirmation');\n if (showAdministratorSection) sectionsInOrder.push('administration');\n\n const validateSurvey = useCallback(\n (answers) => {\n if (!questionnaireModelRef.current) return null;\n\n const model = questionnaireModelRef.current;\n const requiredQuestions = model.pages\n .map((page) =>\n Object.keys(page.elements)\n .filter((idx) => page.elements[idx]['isRequired'])\n .map((idx) => page.elements[idx]['name']),\n )\n .flat();\n\n return !requiredQuestions.find(\n (questionName) => answers[questionName] === undefined,\n );\n },\n [questionnaireModelRef],\n );\n\n const updateCheckoutTest = () => {\n if (showAdministratorSection) {\n const { test } = props;\n const fieldsFilled =\n test.administration?.administered_by_name &&\n test.administration?.administered_by_npi &&\n test.administration?.administered_by_degree;\n setAdministratorFieldsFilled(fieldsFilled);\n if (!fieldsFilled) return;\n }\n if (testHasQuestionnaire) {\n const answers = test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey_answers\n : test.test_survey.survey\n const validAnswers = validateSurvey(answers);\n setHasValidAnswers(validAnswers);\n if (!validAnswers) return;\n }\n propUpdateCheckoutTest();\n };\n\n return (\n \n \n Close\n \n
\n \n - \n {!!test.administered_at && (\n
\n
\n );\n};\n\nexport default SurveyPreview;\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport { Form } from \"react-bootstrap\";\nimport { throttle } from 'lodash';\n\nimport SurveyPreview from \"../../../../common/components/SurveyPreviewV2\";\n\n\nconst handleSaveSurvey = async (test, answers, submitTests, updateTest) => {\n if (!test.test_survey_save_allowed) return;\n updateTest({ ...test, test_survey_save_allowed: false });\n\n const response = await submitTests({ tests: [\n {\n ...test,\n test_survey: {\n survey: answers,\n test_configuration_id: test.test_configuration_id,\n },\n },\n ] });\n\n if (response.data.success) {\n console.log(\"Answers saved\");\n } else {\n toatr.error(\"Something went wrong while saving the survey answers\");\n }\n};\n\nconst ServiceSurveySection = ({ submitTests, test, updateTest }) => {\n if (!Object.keys(test?.test_configuration?.survey || {}).length) return ;\n\n const surveyRef = useRef(null);\n const [answers, setAnswers] = useState(test.test_survey?.survey || {});\n\n const saveSurveyIfOutside = useCallback(\n (event) => {\n if (surveyRef.current && !surveyRef.current.contains(event.target)) {\n handleSaveSurvey(test, answers, submitTests, updateTest);\n }\n },\n [test, answers, submitTests, updateTest]\n );\n\n const throttledMouseMove = useCallback(\n throttle(saveSurveyIfOutside, 500),\n [saveSurveyIfOutside]\n );\n\n useEffect(() => {\n if (!test.test_survey_save_allowed) return;\n\n const handleSaveEvent = () => handleSaveSurvey(test, answers, submitTests, updateTest);\n\n document.addEventListener(\"mousedown\", saveSurveyIfOutside);\n document.addEventListener(\"keydown\", handleSaveEvent);\n window.addEventListener(\"scroll\", handleSaveEvent);\n document.addEventListener(\"mousemove\", throttledMouseMove);\n\n return () => {\n document.removeEventListener(\"mousedown\", saveSurveyIfOutside);\n document.removeEventListener(\"keydown\", handleSaveEvent);\n window.removeEventListener(\"scroll\", handleSaveEvent);\n document.removeEventListener(\"mousemove\", throttledMouseMove);\n throttledMouseMove.cancel(); // clean up throttling\n };\n }, [saveSurveyIfOutside, throttledMouseMove, test, answers, submitTests, updateTest]);\n\n return (\n \n \n Survey \n {\n setAnswers(e.data);\n updateTest({ ...test, test_survey_save_allowed: true });\n }}\n />\n \n
\n );\n};\n\nexport default ServiceSurveySection;","import React, { useState } from \"react\";\nimport { Button, Col, Form, Row } from \"react-bootstrap\";\n\nimport ActionsDropdown from './sections/ActionsDropdown';\nimport FabrxCheckbox from \"../../../Registration/primary/FabrxCheckbox\";\nimport { printPdfLabelOnClick } from '../PdfLabelPrinter';\nimport { SaveRemoveServiceButtons } from '../ServiceCard';\nimport ServiceSurveySection from './sections/ServiceSurveySection';\nimport { zplCodeOnClick } from '../ZplCodePrinter';\n\n\nconst GenericTestCardBody = ({\n notesRef,\n test,\n submitTests,\n updateTest,\n ...props\n}) => {\n\n const [notes, setNotes] = useState(test.notes);\n\n const handleTestUpdate = async (updatedTest, errorMessage) => {\n const response = await submitTests({ tests: [updatedTest] });\n if (response.data.success) {\n return true;\n } else {\n toatr.error(errorMessage || \"Something went wrong\");\n return false;\n }\n };\n\n const handleAdministerUnadminister = async (administer = false) => {\n const administered = administer ? true : !test.administered;\n const updatedTest = { ...test, administered: administered, saved: true };\n const isSuccess = await handleTestUpdate(\n updatedTest,\n \"Something went wrong while saving the administered status\"\n );\n if (isSuccess) updateTest(updatedTest);\n };\n\n const handleNotesBlur = async (e) => {\n const updatedTest = { ...test, notes: e.target.value };\n await handleTestUpdate(\n updatedTest,\n \"Something went wrong while saving the notes\"\n );\n };\n\n const handleClickOnPrintLabel = async () => {\n if (test.label_code == \"zebra_label_code\") {\n zplCodeOnClick(test, updateTest);\n } else {\n printPdfLabelOnClick(test, updateTest, submitTests);\n }\n\n await handleAdministerUnadminister(true);\n };\n\n return (\n \n \n \n Barcode \n \n \n
\n \n
\n \n \n Notes \n setNotes(e.target.value)}\n ref={notesRef}\n value={notes}\n />\n \n
\n
\n );\n};\n\nexport default GenericTestCardBody;\n","import React, { useState } from 'react';\nimport { Card } from 'react-bootstrap';\nimport { faCircleInfo } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport format from 'date-fns/format';\n\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\nimport SurveyPreview from \"../../../common/components/SurveyPreviewV2\";\n\n\nconst TestSurveyFormV2 = ({\n disabled,\n isInvalid=false,\n test,\n updateTest,\n }) => {\n\n const survey = (test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey\n : test.test_configuration.survey) || {};\n const surveyAnswers = (test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey_answers\n : test.test_survey) || { admin_approved: false };\n\n const [render, reRender] = useState(false);\n\n let localizedCompletedAt,\n localizedAdminApprovedAt;\n const surveyCompletedAt = surveyAnswers.created_at;\n const surveyAdminApprovedAt = surveyAnswers.admin_approved_at;\n if (surveyCompletedAt) localizedCompletedAt = format(new Date(surveyCompletedAt), 'MMMM dd, yyyy HH:mm:ss');\n if (surveyAdminApprovedAt) localizedAdminApprovedAt = format(new Date(surveyAdminApprovedAt), 'MMMM dd, yyyy HH:mm:ss');\n\n return (\n <>\n {!!localizedCompletedAt && (\n \n \n Print label\n \n
\n \n Completed by participant {localizedCompletedAt}
\n )}\n {Object.keys(survey).length > 0 &&\n Clinician review required
\n \n )}\n Please confirm all Participant Screening responses are complete
\n Confirmed by clinician {localizedAdminApprovedAt}
\n )}\n \n \n );\n};\n\nexport default TestSurveyFormV2;","import React, { useState, useEffect } from 'react';\nimport { Row, Col, Form, FormControl } from 'react-bootstrap';\nimport { format, formatInTimeZone } from 'date-fns-tz';\n\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\nimport FloatingLabelInput from '../../../common/components/FloatingLabelInput';\nimport FloatingLabelSelect from '../../../common/components/FloatingLabelSelect';\nimport TestSurveyFormV2 from '../forms/TestSurveyFormV2';\nimport { VaccinePdfLabelPrinter } from '../PdfLabelPrinter';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faArrowUpRightFromSquare, faExclamationCircle } from '@fortawesome/pro-regular-svg-icons';\n\n\nexport const ScreeningStep = ({\n completeReasons=[],\n test,\n showError=false,\n updateTest,\n}) => {\n return (\n \n
\n );\n};\n\nexport const VaccineProgramStep = ({\n fundingSourceOptions,\n options,\n requestEligibility,\n requestFundingSource,\n subTitle,\n test,\n updateTest,\n vaccineProgramField,\n}) => {\n const extractKeys = (options) => {\n const keys = Object.keys(options);\n // make \"unknown\" the last option if present and does not have a code so \"None of the above\" makes sense\n if (keys.includes(\"unknown\") && !options[\"unknown\"][\"code\"]) keys.push(keys.splice(keys.indexOf(\"unknown\"), 1)[0]);\n return keys;\n };\n const keys = extractKeys(options);\n return (\n Participant screening response
\n\n
\n );\n};\n\nexport const VaccineLotStep = ({\n completeReasons,\n test,\n updateTest,\n vaccineRoute,\n setVaccineRoute,\n showError,\n}) => {\n const [vaccineResult, testConfiguration] = [\n test.vaccine_result,\n test.test_configuration,\n ];\n\n const vaccineLotOptions =\n testConfiguration.vaccine_lots &&\n testConfiguration.vaccine_lots.map((vaccineLot) => {\n return { label: vaccineLot.lot_number, value: vaccineLot.lot_number };\n });\n\n return (\n Vaccine programs
\n\n {requestEligibility && (\n <>\n
\n \n {subTitle}\n
\n \n {keys\n .map((option) => {\n const code = options[option][\"code\"] ? `(${options[option][\"code\"]})` : \"\";\n const label = option === 'unknown' && !options[option][\"code\"]\n ? 'None of the above'\n : `${options[option][\"label\"]} ${code}`;\n return (\n {\n const updatedTest = {...test, saved: false};\n updatedTest[\"vaccine_result\"][vaccineProgramField] = option;\n updateTest(updatedTest);\n }}\n label={label}\n />\n )\n })\n }\n
\n \n )}\n {requestFundingSource && (\n \n
\n )}\n Funding source
\n\n {Object.keys(fundingSourceOptions)\n .map((option) => {\n return (\n {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...test.vaccine_result,\n funding_source: option,\n },\n });\n }}\n label={`${fundingSourceOptions[option][\"label\"]} (${fundingSourceOptions[option][\"code\"]})`}\n />\n )\n })\n }\n
\n \n \n o.value === vaccineResult.lot_number)}\n onChange={(e) => {\n const vaccineLot = testConfiguration.vaccine_lots.find(\n (vl) => vl.lot_number === e.value,\n );\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n lot_number: vaccineLot.lot_number,\n dose: vaccineLot.vaccine_route.default_dose.toString(),\n expiration_date: vaccineLot.expiration_date,\n vaccine_lot_id: vaccineLot.id,\n administration_type:\n vaccineLot.vaccine_route.default_administration_type,\n },\n });\n setVaccineRoute(vaccineLot.vaccine_route);\n }}\n options={vaccineLotOptions}\n filledValue={vaccineResult.lot_number}\n />\n \n {vaccineRoute && vaccineResult.lot_number && (\n
\n
\n );\n};\n\nexport const AdministrationStep = ({ test, updateTest, showError=false, completeReasons=[] }) => {\n const disabledVaccineDoseIds = test.test_configuration[\"disabled_vaccine_route_and_dose_ids\"][\"vaccine_dose_ids\"].map(v => parseInt(v));\n const disabledVaccineRouteIds = test.test_configuration[\"disabled_vaccine_route_and_dose_ids\"][\"vaccine_route_ids\"].map(v => parseInt(v));\n const [vaccineResult, vaccineRoute, testConfiguration, vaccineDoses, vaccineDoseId] = [\n test.vaccine_result,\n test.vaccine_result.vaccine_route,\n test.test_configuration,\n test.vaccine_result.vaccine_route.vaccine_doses ? test.vaccine_result.vaccine_route.vaccine_doses.filter(vd => vd.active === true && !disabledVaccineDoseIds.includes(vd.id)) : [],\n test.vaccine_result.vaccine_dose_id\n ];\n const isDefaultDoseDisabled = disabledVaccineRouteIds.includes(vaccineRoute.id);\n const patientRefusedService = test.administered === false;\n const allVaccineDoses = vaccineDoses;\n if (!isDefaultDoseDisabled) allVaccineDoses.unshift({ id: null, dose_name: vaccineRoute.default_vaccine_dose_name, size: vaccineRoute.default_dose, dose_type: \"default\" });\n const onlyOneDoseAvailable = allVaccineDoses.length === 1;\n const defaultDose = allVaccineDoses.find(vd => vd.id == null);\n const initialDose = onlyOneDoseAvailable\n ? allVaccineDoses[0]\n : vaccineDoseId\n ? vaccineDoses.find(vd => vd.id === vaccineDoseId)\n : test.administered\n ? {dose_name: defaultDose?.dose_name, size: vaccineResult.dose}\n : defaultDose\n\n const [selectedDose, setSelectedDose] = useState((!!vaccineResult.id || onlyOneDoseAvailable) ? {\n dose_name: initialDose?.dose_name,\n size: initialDose?.size,\n } : {\n dose_name: vaccineResult.dose_name,\n size: vaccineResult.dose,\n });\n\n if (initialDose && !vaccineResult.dose_name && onlyOneDoseAvailable) {\n updateTest({\n ...test,\n vaccine_result: {\n ...vaccineResult,\n dose_name: initialDose.dose_name || \"N/A\",\n vaccine_dose_id: initialDose.id,\n dose: initialDose.size || 0.0\n },\n });\n }\n\n const dosesInOrder = [\"default\", \"dose_1\", \"dose_2\", \"dose_3\", \"dose_4\", \"dose_5\", \"booster_dose\", \"second_booster_dose\", \"additional_dose\"];\n const administeredDoseOptions = allVaccineDoses.sort((a, b) => {\n return dosesInOrder.indexOf(a.dose_type) - dosesInOrder.indexOf(b.dose_type)\n }).map((vd) => {\n return { value: vd, label: vd.dose_name }\n });\n\n return (\n \n \n Manage lots\n \n
\n Vaccine lot
\nLot number
\n\n \n
\n \n
\n \n
\n
\n )}\n \n \n \n Dose schedule \n o.label === selectedDose.dose_name)}\n onChange={(vd) => {\n setSelectedDose({dose_name: vd.value?.dose_name, size: vd.value?.size});\n updateTest({\n ...test,\n saved: false,\n vaccine_result: { ...vaccineResult, dose: vd.value?.size, vaccine_dose_id: vd.value?.id, dose_name: vd.value?.dose_name },\n })\n }}\n isDisabled={patientRefusedService}\n options={administeredDoseOptions}\n filledValue={selectedDose.dose_name}\n />\n \n )}\n \n \n Dosage \n {\n setSelectedDose({dose_name: selectedDose.dose_name, size: e.target.value})\n updateTest({\n ...test,\n saved: false,\n vaccine_result: { ...vaccineResult, dose: e.target.value },\n });\n }}\n isDisabled={patientRefusedService}\n />\n \n \n \n Administered type \n o.value === vaccineResult.administration_type)}\n onChange={(at) => {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n administration_type: at.value,\n },\n });\n }}\n options={testConfiguration.administration_type_options}\n filledValue={vaccineResult.administration_type}\n isDisabled={patientRefusedService}\n />\n \n \n \n Site \n o.value === vaccineResult.administration_site)}\n onChange={(as) => {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n administration_site: as.value,\n },\n });\n }}\n options={testConfiguration.administration_site_options}\n filledValue={vaccineResult.administration_site}\n isDisabled={patientRefusedService}\n />\n \n \n
\n {\n updateTest({\n ...test,\n saved: false,\n administered: [null, true].includes(test.administered) ? false : true,\n })\n }}\n checked={patientRefusedService}\n label=\"Service refused by participant\"\n />\n
\n );\n};\n\nexport const VaccineInfoSheetStep = ({\n completeReasons,\n showError,\n test,\n updateTest,\n vaccineInfoSheetProps,\n vaccineResult,\n}) => {\n\n const [\n vaccineInfoSheetVersionApproval,\n vaccineInfoSheetVersion,\n vaccineInfoSheetVersionFileUrl,\n vaccineInfoSheetFlipper,\n ] = [\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version_approval,\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version,\n vaccineInfoSheetProps?.vaccine_info_sheet_versions[0]?.vaccine_info_sheet_version_file_url,\n vaccineInfoSheetProps?.vaccine_info_sheet_flipper,\n ];\n\n const visVersionDateInUTC = vaccineInfoSheetVersion?.version_date\n && formatInTimeZone(new Date(vaccineInfoSheetVersion.version_date), 'UTC', 'MM/dd/yyyy');\n\n return (\n Service administration
\n\n {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n statement_provided: !vaccineResult.statement_provided,\n vaccine_info_sheet_version_approval_id: !vaccineResult.statement_provided ? vaccineInfoSheetVersionApproval?.id : null,\n vaccine_info_sheet_version_id: !vaccineResult.statement_provided ? vaccineInfoSheetVersion?.id : null,\n },\n });\n }}\n checked={vaccineResult.statement_provided}\n label=\"Vaccine information sheet or fact sheet provided\"\n />\n {(showError && Object.keys(completeReasons).includes(\"statement_provided\")) && (\n \n {!vaccineInfoSheetVersionFileUrl && (\n <>\n No vaccine information available\n
\n )}\n \n );\n};\n\nexport const ErrorSummary = ({\n completeReasons,\n showError\n}) => {\n const completeReasonValues = Object.values(completeReasons || {});\n if (!showError || !completeReasonValues?.length) return ;\n return (\n Vaccine information sheet
\n {vaccineInfoSheetFlipper && vaccineInfoSheetVersionFileUrl && (\n \n )}\n\n
\n )}\n {vaccineInfoSheetFlipper && (!vaccineInfoSheetVersionFileUrl || !!vaccineInfoSheetVersionApproval) && (\n For more information, please contact your admin.
\n \n )}\n {!!vaccineInfoSheetVersionApproval && (\n <>\n Vaccine information sheet provided\n \n Version {visVersionDateInUTC} provided on {format(new Date(vaccineInfoSheetVersionApproval?.updated_at), 'MMM dd, yyyy HH:mm zzz')}\n
\n \n )}\n \n
\n \n );\n};\n\nexport const ConfirmationStep = ({\n test,\n updateTest,\n completeReasons,\n showError,\n currentAdministratorName,\n setCurrentAdministratorName,\n currentAdministratorDegree,\n setCurrentAdministratorDegree,\n currentAdministratorInitials,\n setCurrentAdministratorInitials,\n}) => {\n const patientRefusedService = test.administered === false;\n const [vaccineResult, testConfiguration] = [\n test.vaccine_result,\n test.test_configuration,\n ];\n\n useEffect(() => {\n const testData = {\n ...test,\n vaccine_result: {\n ...vaccineResult,\n },\n }\n if (currentAdministratorName || !vaccineResult.administrator_name) {\n testData[\"vaccine_result\"][\"administrator_name\"] = currentAdministratorName;\n }\n if (currentAdministratorDegree || !vaccineResult.administrator_degree) {\n testData[\"vaccine_result\"][\"administrator_degree\"] = currentAdministratorDegree;\n }\n if (currentAdministratorInitials || !vaccineResult.administrator_initials) {\n testData[\"vaccine_result\"][\"administrator_initials\"] = currentAdministratorInitials;\n }\n updateTest(testData)\n }, [currentAdministratorName, currentAdministratorDegree, currentAdministratorInitials])\n\n return (\n \n
\n Missing information
\n Please complete \n {completeReasonValues.join(\", \")}\n \n \n \n Name \n {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n administrator_name: e.target.value,\n },\n });\n setCurrentAdministratorName(e.target.value);\n }}\n />\n \n \n \n Initials \n {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n administrator_initials: e.target.value,\n },\n });\n setCurrentAdministratorInitials(e.target.value);\n }}\n />\n \n \n \n Position \n [o.label, o.value].includes(vaccineResult.administrator_degree))}\n onChange={(e) => {\n updateTest({\n ...test,\n saved: false,\n vaccine_result: {\n ...vaccineResult,\n administrator_degree: e.value,\n },\n });\n setCurrentAdministratorDegree(e.value);\n }}\n options={testConfiguration.administrator_degree_options}\n filledValue={vaccineResult.administrator_degree}\n />\n \n \n
\n
\n );\n};\n\nexport const VACCINE_LABELS = {\n label_A4_vaccine: \"8.0x11.0 Vaccination Statement\",\n label_2_0x1_25_vaccine: \"2.0x1.25 Label\",\n label_2_0x0_5_vaccine: \"2.0x0.5 Label\",\n label_2_0x1_0_vaccine: \"2.0x1.0 Label\",\n label_0_5x1_0_vaccine: \"0.5x1.0 Label\",\n label_1_25x2_0_vaccine: \"1.25x2.0 Label\",\n}\n\nexport const PrintStep = ({ test, updateTest, submitTests, onComplete, stepNumber }) => {\n\n return (\n Administered by
\n\n {\n updateTest({...test, administered: true});\n submitTests({ tests: [test] }).then((response) => {\n print();\n onComplete();\n });\n }}\n label={key}\n name={VACCINE_LABELS[key]}\n />\n )}\n
\n );\n};\n\nexport const NotesStep = ({\n notesRef,\n test,\n updateTest,\n}) => {\n return (\n Print labels
\n {!test.administered ? (\n\n Available after administration has been logged.\n
\n ) : Object.keys(VACCINE_LABELS).map(key =>\n \n {\n updateTest({\n ...test,\n notes: e.target.value,\n });\n }}\n value={test.notes || \"\"}\n />\n
\n );\n};\n","import React, { useState } from 'react';\nimport { Form } from 'react-bootstrap';\n\nimport {\n AdministrationStep,\n ConfirmationStep,\n ErrorSummary,\n NotesStep,\n PrintStep,\n ScreeningStep,\n VaccineInfoSheetStep,\n VaccineLotStep,\n VaccineProgramStep,\n} from '../fields/VaccineStepsV2';\nimport { SaveRemoveServiceButtons } from '../ServiceCard';\nimport { vaccineTestShape } from '../shapes';\n\n\nconst VFA_NAMES = {\n mn: {\n title: 'UUAV eligibility',\n subTitle: 'What UUAV (Uninsured and Underinsured Adult Vaccine) criteria applies to this patient? *',\n },\n};\n\nexport const computeCompleteStatus = (test, vaccineResult, surveyAnswers) => {\n let reasons = {};\n\n if (vaccineResult.request_vfa) {\n if (!vaccineResult['vfa_eligibility']) reasons['vfa_eligibility'] = 'UUAV eligibility answer';\n }\n\n if (vaccineResult.request_vfc) {\n if (!vaccineResult['vfc_eligibility']) reasons['vfc_eligibility'] = 'VFC eligibility answer';\n }\n\n if (vaccineResult.request_funding_for_vfa || vaccineResult.request_funding_for_vfc) {\n if (!vaccineResult['funding_source']) reasons['funding_source'] = 'Funding source answer';\n }\n\n [\n { key: 'administrator_initials', name: 'Administrator Initials' },\n { key: 'administrator_name', name: 'Administrator Name' },\n { key: 'administrator_degree', name: 'Administrator Degree' },\n { key: 'vaccine_lot_id', name: 'Vaccine Lot' },\n ].forEach((field) => {\n if (!vaccineResult[field.key] || vaccineResult[field.key] == \"\") {\n reasons[field.key] = field.name;\n }\n });\n const completedAdministratorAndLot = Object.keys(reasons).length === 0;\n\n [\n { key: 'dose', name: 'Dose' },\n { key: 'dose_name', name: 'Administered dose' },\n { key: 'administration_site', name: 'Administration site' },\n { key: 'statement_provided', name: 'Statement provided' },\n { key: 'administration_type', name: 'Administration type' },\n ].forEach((field) => {\n if (!vaccineResult[field.key] || vaccineResult[field.key] == \"\") {\n reasons[field.key] = field.name;\n }\n });\n\n if (surveyAnswers && !surveyAnswers.admin_approved) {\n reasons['admin_approved'] = 'Screening Questions Approved';\n }\n const completedVaccineResults =\n Object.keys(reasons).length === 0 ||\n vaccineResult.refusal_state !== 'no_refusal';\n\n let complete = completedAdministratorAndLot && completedVaccineResults;\n\n if (test.administered == false) { // has to be explicitly false\n complete = true;\n reasons = {};\n }\n\n return {\n complete,\n reasons,\n };\n};\n\nconst VaccineFormV2 = ({\n hidePrintOptions = false,\n onComplete,\n setIsOpen,\n submitTests,\n test,\n updateTest,\n ...props\n}) => {\n const {\n vaccine_result: vaccineResult,\n test_configuration: testConfiguration,\n vaccine_result: { vaccine_route },\n } = test;\n\n const surveyAnswers = test.use_medical_screening_survey_on_checkout\n ? test.medical_screening_survey_answers\n : test.test_survey;\n const [showError, setShowError] = useState(false);\n const [vaccineRoute, setVaccineRoute] = useState(vaccine_route);\n const vaccineInfoSheetProps = vaccineRoute?.vaccine_info_sheets_props;\n const [administrationLogged, setAdministrationLogged] = useState(test.administered);\n\n const { complete, reasons } = computeCompleteStatus(\n test,\n vaccineResult,\n surveyAnswers,\n );\n\n const reasonKeys = Object.keys(reasons);\n\n const handleSave = () => {\n setShowError(!complete);\n if (complete) {\n updateTest({\n ...test,\n administered: test?.administered == false ? false : true,\n saved: true,\n vaccine_result: {\n ...vaccineResult,\n refusal_state: 'no_refusal',\n refusal_note: null,\n },\n });\n submitTests({ tests: [\n {\n ...test,\n administered: test?.administered == false ? false : true,\n saved: true,\n vaccine_result: {\n ...vaccineResult,\n refusal_state: 'no_refusal',\n refusal_note: null,\n },\n },\n ] });\n setIsOpen(false);\n }\n };\n\n return (\n Notes
\n\n
\n );\n};\n\nVaccineFormV2.propTypes = vaccineTestShape;\n\nexport default VaccineFormV2;\n","import React from \"react\";\nimport VaccineFormV2 from \"../forms/VaccineFormV2\";\n\nconst GenericVaccineCardBody = ({\n ...props\n }) => {\n return (\n \n \n
\n ) : (\n 'Add Vaccines to Inventory'\n )}\n \n
\n );\n};\n\nexport default GenericVaccineCardBody;","import React from \"react\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button } from \"react-bootstrap\";\n\nexport const getBase64 = (file) => {\n if ((file.size / 1000000) > 20) return setError(\"file_too_large\");\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = error => reject(error);\n });\n};\n\nconst PhotoUploader = ({\n primaryTitle,\n secondaryTitle,\n imageData,\n setImageData,\n setShowWebCam = () => {},\n setNextButtonDisabled = () => {},\n setError,\n setFile,\n hidePrimaryButton,\n}) => {\n\n const HiddenButton = () => {\n return (\n \n {hidePrimaryButton ? {\n setFile(e.currentTarget.files[0])\n getBase64(e.currentTarget.files[0])\n .then(data => {\n setImageData(data);\n setShowWebCam(true);\n setNextButtonDisabled(false);\n }\n );\n }}\n style={{ display: \"none\" }}\n accept=\"image/*, application/pdf\"\n />\n
\n )\n}\n\nexport default PhotoUploader;\n","import React, { useEffect, useState } from \"react\";\nimport { Button, Col, Form, FormCheck, FormControl, Image, Row } from \"react-bootstrap\";\nimport { faCheck, faExclamationTriangle, faInfoCircle, faCamera, faUpload } from '@fortawesome/pro-regular-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { format } from 'date-fns';\n\nimport CheckboxCard from \"../../../common/components/CheckBoxCard\";\nimport { getBase64 } from \"../../../Otc/components/PhotoUploader\";\nimport {\n LabeledField,\n ResultStatus,\n SaveRemoveServiceButtons,\n ServiceCardSubHeader,\n} from \"../ServiceCard\";\nimport {\n determineBloodPressureStatus,\n idFromGenericTestResult,\n isValidInteger,\n handleGenericTestResultChange,\n resetGenericTestResultAttributes,\n valueFromGenericTestResult\n} from \"../utils\";\nimport Webcam from \"../../../common/components/Webcam\";\n\nconst SYMPTOMS = {\n chest_pain: \"Chest pain\",\n shortness_of_breath: \"Shortness of breath\",\n back_pain: \"Back pain\",\n numbness_weakness: \"Numbness/weakness\",\n changes_in_vision: \"Changes in vision\",\n difficulty_speaking: \"Difficulty speaking\",\n other_new_or_worsening_symptoms: \"Other new or worsening symptoms\",\n no_symptoms: \"No symptoms\",\n};\n\nconst VALIDATIONS = {\n systolic: {\n min: 50,\n max: 300,\n },\n diastolic: {\n min: 50,\n max: 300,\n },\n};\n\nconst BLOOD_PRESSURE_STATUSES = {\n normal: {\n color: \"#048154\",\n icon: faCheck,\n label: \"Normal\",\n },\n elevated: {\n color: \"#D14110\",\n icon: faExclamationTriangle,\n label: \"Elevated\",\n },\n high_stage_1: {\n color: \"#CB2531\",\n icon: faExclamationTriangle,\n label: \"High (stage 1)\",\n },\n high_stage_2: {\n color: \"#CB2531\",\n icon: faExclamationTriangle,\n label: \"High (stage 2)\",\n },\n hypertensive_crisis: {\n color: \"#CB2531\",\n icon: faExclamationTriangle,\n label: \"Hypertensive crisis\",\n },\n};\n\nconst InfoBox = ({ containerClassName, message, icon, iconColor, backgroundColor }) => {\n return (\n \n
\n );\n};\n\nconst HyperextensionScreeningCardBody = ({\n test,\n updateTest,\n submitTests,\n setIsOpen,\n ...props\n}) => {\n\n // notes:\n // date and time has a separate input field but it's one datetime value on the backend\n // status is being calculated based on systolic and diastolic values, it's is not being saved\n\n // first reading\n const systolic = valueFromGenericTestResult(test, \"systolic\");\n const diastolic = valueFromGenericTestResult(test, \"diastolic\");\n const dateTime = valueFromGenericTestResult(test, \"datetime\");\n const [firstReadingDate, setFirstReadingDate] = useState(null);\n const [firstReadingTime, setFirstReadingTime] = useState(null);\n const [firstReadingHypertensionStatus, setFirstReadingHypertensionStatus] = useState(determineBloodPressureStatus(systolic, diastolic));\n\n // repeated reading\n const systolicRepeated = valueFromGenericTestResult(test, \"systolic_repeated\");\n const diastolicRepeated = valueFromGenericTestResult(test, \"diastolic_repeated\");\n const dateTimeRepeated = valueFromGenericTestResult(test, \"datetime_repeated\");\n const [repeatedReadingDate, setRepeatedReadingDate] = useState(null);\n const [repeatedReadingTime, setRepeatedReadingTime] = useState(null);\n const [repeatedReadingHypertensionStatus, setRepeatedReadingHypertensionStatus] = useState(determineBloodPressureStatus(systolicRepeated, diastolicRepeated));\n\n // emergency care\n const consentedToEmergencyCare = valueFromGenericTestResult(test, \"consented_to_emergency_care\");\n const _emergencyCareSymptoms = valueFromGenericTestResult(test, \"emergency_care_symptoms\");\n const emergencyCareSymptoms = typeof _emergencyCareSymptoms === \"string\" ? _emergencyCareSymptoms.split(\",\") : _emergencyCareSymptoms;\n const customEmergencyCareSymptom = valueFromGenericTestResult(test, \"custom_emergency_care_symptom\");\n\n // other\n const [currentStep, setCurrentStep] = useState(null); // can be \"first_reading\", \"repeated_reading\", \"emergency_care\"\n const [errors, setErrors] = useState({});\n const [nonResetableTestTypes, setNonResetableTestTypes] = useState([]);\n const mustRepeatTest = [\"high_stage_2\", \"hypertensive_crisis\"].includes(firstReadingHypertensionStatus);\n const showEmergencyOptions = repeatedReadingHypertensionStatus == \"hypertensive_crisis\";\n const repeatedReadingSaved = !!idFromGenericTestResult(test, \"diastolic_repeated\")\n const saveButtonDisabled = ((currentStep == \"first_reading\" && (!firstReadingHypertensionStatus || !firstReadingTime)) ||\n (currentStep == \"repeated_reading\" && (!repeatedReadingHypertensionStatus || !repeatedReadingTime))) ||\n Object.values(errors).some(error => !!error);\n const saveButtonLabel = (\n (currentStep == \"first_reading\" && mustRepeatTest) ||\n (currentStep == \"repeated_reading\" && !repeatedReadingSaved && repeatedReadingHypertensionStatus == \"hypertensive_crisis\")\n ) ? \"Continue\" : \"Save\";\n const [attachWaiverView, setAttachWaiverView] = useState(null);\n const waiver = test.waiver_base_64 || test.waiver?.url;\n\n const handleSuccess = () => {\n toastr.success(\"Blood pressure reading saved\");\n setIsOpen(false);\n };\n\n const handleSave = async () => {\n updateTest({...test, administered: true})\n\n const response = await submitTests({ tests: [test] });\n if (!response.data.success) {\n return toastr.error(\"Something went wrong\");\n }\n\n setNonResetableTestTypes(test.generic_test_results.map(({ type }) => type));\n if (currentStep == \"first_reading\") {\n if (mustRepeatTest) {\n setCurrentStep(\"repeated_reading\");\n } else {\n handleSuccess();\n }\n } else if (currentStep == \"repeated_reading\") {\n if (repeatedReadingHypertensionStatus == \"hypertensive_crisis\") {\n setCurrentStep(\"emergency_care\");\n } else {\n handleSuccess();\n }\n } else {\n handleSuccess();\n }\n };\n\n const handleReset = () => {\n if (currentStep == \"first_reading\") {\n setFirstReadingDate('');\n setFirstReadingTime('');\n setFirstReadingHypertensionStatus('');\n } else if (currentStep == \"repeated_reading\") {\n setRepeatedReadingDate('');\n setRepeatedReadingTime('');\n setRepeatedReadingHypertensionStatus('');\n } else {\n // do nothing\n }\n resetGenericTestResultAttributes(test, updateTest, nonResetableTestTypes);\n };\n\n const handleSymptomChange = (e) => {\n const currentSymptoms = emergencyCareSymptoms || [];\n const updatedSymptoms = currentSymptoms.includes(e.target.name)\n ? currentSymptoms.filter(symptom => symptom !== e.target.name)\n : [...currentSymptoms, e.target.name];\n handleGenericTestResultChange({ target: { name: \"emergency_care_symptoms\", value: updatedSymptoms.join(\",\") } }, test, updateTest);\n };\n\n const setInitialStep = () => {\n const step = (repeatedReadingSaved && showEmergencyOptions)\n ? \"emergency_care\"\n : mustRepeatTest\n ? \"repeated_reading\"\n : \"first_reading\";\n setCurrentStep(step);\n };\n\n const splitDateTimeIntoDateAndTime = () => {\n if (!!dateTime && (!firstReadingDate || !firstReadingTime)) {\n const [date, time, timeZone] = dateTime.split(\" \");\n setFirstReadingDate(date);\n setFirstReadingTime(time);\n }\n if (!!dateTimeRepeated && (!repeatedReadingDate || !repeatedReadingTime)) {\n const [repeatedDate, repeatedTime, repeatedTimeZone] = dateTimeRepeated.split(\" \");\n setRepeatedReadingDate(repeatedDate);\n setRepeatedReadingTime(repeatedTime);\n }\n };\n\n const joinDateAndTimeIntoDateTime = () => {\n if (!!firstReadingDate && !!firstReadingTime) {\n const dateTime = `${firstReadingDate} ${firstReadingTime}`;\n handleGenericTestResultChange({ target: { name: \"datetime\", value: dateTime } }, test, updateTest);\n };\n if (!!repeatedReadingDate && !!repeatedReadingTime) {\n const dateTimeRepeated = `${repeatedReadingDate} ${repeatedReadingTime}`;\n handleGenericTestResultChange({ target: { name: \"datetime_repeated\", value: dateTimeRepeated } }, test, updateTest);\n };\n };\n\n const validateField = (e) => {\n const { name, value } = e.target;\n const _name = name.split(\"_\")[0];\n const minValue = VALIDATIONS[_name].min;\n const maxValue = VALIDATIONS[_name].max;\n const newErrors = { ...errors };\n if (!value) {\n newErrors[name] = `Please enter a value`;\n } else if (!isValidInteger(value) || parseInt(value) < minValue || parseInt(value) > maxValue) {\n newErrors[name] = `Please enter a value between ${minValue} and ${maxValue}`;\n } else {\n newErrors[name] = null;\n }\n setErrors({ ...newErrors });\n };\n\n const handleFieldChange = (e) => handleGenericTestResultChange(e, test, updateTest);\n\n // date and time has a separate input field but it's one datetime value on the backend\n // splits the datetime value into date and time and fill the values in the input fields on the first load\n useEffect(() => splitDateTimeIntoDateAndTime(), [dateTime, dateTimeRepeated]);\n\n // updates datetime value in the props when the date or time input fields are changed\n useEffect(() => joinDateAndTimeIntoDateTime(), [firstReadingDate, firstReadingTime, repeatedReadingDate, repeatedReadingTime]);\n\n // calculates and set the blood pressure status based on the systolic and diastolic values\n useEffect(() => setFirstReadingHypertensionStatus(determineBloodPressureStatus(systolic, diastolic)), [systolic, diastolic]);\n\n // calculates and set the blood pressure status based on the repeated systolic and diastolic values\n useEffect(() => setRepeatedReadingHypertensionStatus(determineBloodPressureStatus(systolicRepeated, diastolicRepeated)), [systolicRepeated, diastolicRepeated]);\n\n // sets the initial step based on the saved values\n useEffect(() => !currentStep && setInitialStep(), []);\n\n if (!currentStep) return ;\n\n return (\n <>\n \n setIsOpen(false)}\n handleReset={handleReset}\n title=\"Blood pressure reading\"\n />\n \n \n setFirstReadingDate(e.target.value)}\n onClick={() => !firstReadingDate && setFirstReadingDate(format(new Date(), 'yyyy-MM-dd'))}\n type=\"date\"\n value={firstReadingDate}\n />\n \n \n \n setFirstReadingTime(e.target.value)}\n onClick={() => !firstReadingTime && setFirstReadingTime(format(new Date(), 'HH:mm'))}\n type=\"time\"\n value={firstReadingTime}\n />\n \n \n
\n \n
\n
\n\n {[\"repeated_reading\", \"emergency_care\"].includes(currentStep) && (\n <>\n \n {currentStep == \"repeated_reading\" && !!firstReadingHypertensionStatus && (\n
\n
\n {!!repeatedReadingHypertensionStatus && (\n
\n \n )}\n \n \n \n setRepeatedReadingDate(e.target.value)}\n onClick={() => !repeatedReadingDate && setRepeatedReadingDate(format(new Date(), 'yyyy-MM-dd'))}\n type=\"date\"\n value={repeatedReadingDate}\n />\n \n \n \n setRepeatedReadingTime(e.target.value)}\n onClick={(e) => !repeatedReadingTime && setRepeatedReadingTime(format(new Date(), 'HH:mm'))}\n type=\"time\"\n value={repeatedReadingTime}\n />\n \n \n
\n \n
\n
\n\n {currentStep == \"emergency_care\" && (\n <>\n Repeat blood pressure reading
\n \n {!!repeatedReadingHypertensionStatus && (\n
\n
\n\n {!!valueFromGenericTestResult(test, \"emergency_care_symptoms\") && (\n <>\n Emergency care
\n Is the patient experiencing any of the following:
\n \n \n
\n
\n \n
\n \n handleGenericTestResultChange({ target: { name: \"consented_to_emergency_care\", value: \"true\" } }, test, updateTest)}\n />\n \n handleGenericTestResultChange({ target: { name: \"consented_to_emergency_care\", value: \"false\" } }, test, updateTest)}\n />\n \n
\n
\n {consentedToEmergencyCare == \"false\" && (\n Did patient consent to receive emergency medical services?
\n \n {\n getBase64(e.currentTarget.files[0])\n .then(data => {\n updateTest({\n ...test,\n waiver_base_64: data,\n });\n setAttachWaiverView(null);\n }\n );\n }}\n accept=\"image/*, application/pdf\"\n />\n )}\n
\n )}\n \n )}\n \n )}\n Attach patient consent to care waiver:
\n {!attachWaiverView && (\n <>\n \n setAttachWaiverView(\"camera\")}\n variant=\"outline-primary\"\n >\n Take photo\n setAttachWaiverView(\"upload\")}\n variant=\"outline-primary\"\n >\n Upload waiver\n
\n {!!waiver && (\n \n {\n updateTest({\n ...test,\n waiver_base_64: data\n });\n setAttachWaiverView(null);\n }}\n setShow={() => setAttachWaiverView(null)}\n style={{width: 300, height: 300, borderRadius: 10}}\n />\n
\n )}\n {attachWaiverView == \"upload\" && (\n \n {' '}\n {testConfiguration.checkout_name}\n
\n \n \n Barcode \n \n
\n );\n};\n\nexport default ScanOrGenerateCardBody;","import React, { useContext } from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\n\nimport FloatingLabelInput from \"../../common/components/FloatingLabelInput\";\nimport FloatingLabelSelect from \"../../common/components/FloatingLabelSelect\";\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\n\nconst OrderingFacilityFields = () => {\n\n const {\n dispatch,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n const stateOptions = state.testConfigurationOptions.states.map((state) => {\n return { value: state, label: state }\n });\n const selectedState = stateOptions.find((option) => {\n return option.value == state.testGroupTestConfiguration.ordering_facility_state_abbv;\n });\n\n return (\n <>\n \n setShowScanner(true)}\n variant=\"outline-secondary\"\n >\n Scan barcode\n \n {barcodeGenerationAvailable && (\n handleCreateTest()}\n >\n {\n loading\n ?
\n \n \n Remove service\n \n \n
\n Ordering facility
\nName
\nMailing address
\nCLIA
\nCity
\nState
\nZip
\nPhone number
\nCountry
\nPerforming organization name
\nAddress type code
\n\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n barcode_prepend_string: e.target.value,\n }\n });\n }}\n />\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n barcode_type: barcodeType.value\n }\n });\n }}\n options={state.testConfigurationOptions.barcode_type_options}\n value={selectedBarcodeType}\n />\n \n
\n\n
\n
\n );\n};\n\nexport default LabTestGroupTestConfigurationInputFields;\n","import React, { useContext } from \"react\";\n\nimport Switch from \"../../common/components/Switch\";\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\n\nconst OtcTestGroupTestConfigurationInputFields = () => {\n\n const {\n dispatch,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n return (\n <>\n Barcode prepend string
\nBarcode type
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n use_medical_screening_survey_on_checkout: !state.testGroupTestConfiguration.use_medical_screening_survey_on_checkout\n }\n });\n }}\n subLabel=\"The medical screening survey includes questions that may be relevant to multiple services.\n Enabling this will replace service specific surveys on checkout.\"\n />\n
\n\n Medical screening survey:
\nResult sharing
\nWhen turned on, status notifications and updates will automatically be sent and published to the participant portal.
\n\n \n \n \n
\n {RESUlT_SHARING_OPTIONS.map((option) => {\n return (\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n notification_settings: {\n ...state.testGroupTestConfiguration.notification_settings,\n [option.key]: !state.testGroupTestConfiguration?.notification_settings[option.key]\n }\n }\n });\n }}\n />\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n publish_results_settings: {\n ...state.testGroupTestConfiguration?.publish_results_settings,\n [option.key]: !state.testGroupTestConfiguration?.publish_results_settings[option.key]\n }\n }\n });\n }}\n />\n \n \n );\n })}\n
\n\n {option.label}
\n {option.description}
\n \n Self-reporting requirements
\nWhen turned on, participants will be required to include the information with their submission.
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n require_otc_photo: !state.testGroupTestConfiguration.require_otc_photo\n }\n });\n }}\n subLabel=\"By default a photo is requested. When turned on, participants will be required to provide a result photo.\"\n />\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n require_otc_time: !state.testGroupTestConfiguration.require_otc_time\n }\n });\n }}\n subLabel=\"By default administration time is requested. When turned on, participants will be required to record when the test was administered.\"\n />\n
\n \n );\n};\n\nexport default OtcTestGroupTestConfigurationInputFields;","import React from 'react';\n\nexport function dotRead(obj, str) {\n str = str.split(\".\");\n for (var i = 0; i < str.length; i++)\n obj = obj[str[i]];\n return obj;\n}\n\nconst SelectableRow = ({\n hideCheckboxes,\n item,\n itemComponents = {},\n itemKeys,\n selectedItemIds,\n toggleSelection,\n}) => {\n\n return (\n | \n | \n )}\n {tableHeaders.map((header, idx) => (\n {header} | \n ))}\n
|---|
\n
\n );\n};\n\nexport const ServiceSpecificationTypeComponent = ({ props }) => {\n if (!props?.test_configuration) return ;\n const serviceSpecificationType = props.test_configuration.service_specification_type;\n if (!SERVICE_SPECIFICATION_TYPES[serviceSpecificationType]) return ;\n return (\n \n {props.test_configuration.checkout_name}\n
\n \n {props.test_configuration.test_type}\n
\n );\n};\n\nconst WarningComponent = ({ props }) => {\n const showWarning = props.test_group_test_configuration.status == \"deactivated\";\n if (!showWarning) return ;\n return (\n \n
\n );\n};\n\nexport default TestGroupTestConfigurationsIndex;","import React, { useEffect, useState } from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport { faExclamationTriangle, faCheck} from '@fortawesome/pro-regular-svg-icons';\n\nimport {\n InputWithUnits,\n LabeledField,\n ResultStatus,\n SaveRemoveServiceButtons,\n ServiceCardSubHeader,\n} from \"../ServiceCard\";\nimport {\n calculateBmi,\n convertHeighInFeetAndInchesToHeightInInches,\n convertHeighInInchesToHeightInFeetAndInches,\n getBmiStatus,\n handleGenericTestResultChange,\n idFromGenericTestResult,\n isValidInteger,\n resetGenericTestResultAttributes,\n valueFromGenericTestResult\n} from \"../utils\";\n\nconst VALIDATIONS = {\n feet: {\n min: 0,\n max: 9,\n },\n inches: {\n min: 0,\n max: 12,\n },\n weight: {\n min: 1,\n max: 2000,\n },\n pulse: {\n min: 1,\n max: 300,\n },\n};\n\nconst BMI_STATUSES = {\n underweight: {\n color: \"#D14110\",\n icon: faExclamationTriangle,\n },\n normal: {\n color: \"#048154\",\n icon: faCheck,\n },\n overweight: {\n color: \"#D14110\",\n icon: faExclamationTriangle,\n },\n obese: {\n color: \"#CB2531\",\n icon: faExclamationTriangle,\n },\n};\n\nconst BMIDisplayComponent = ({\n height,\n test,\n updateTest,\n value,\n weight,\n}) => {\n const bmi = calculateBmi(weight, height);\n if (!!bmi && bmi != value) handleGenericTestResultChange({ target: { name: \"bmi\", value: bmi } }, test, updateTest);\n const status = getBmiStatus(bmi);\n\n return (\n \n {\n dispatch({\n type: 'setActiveTab',\n values: \"active\",\n })\n }}\n >\n Active\n \n {statusCount(\"active\")}\n \n \n {\n dispatch({\n type: 'setActiveTab',\n values: \"inactive\",\n })\n }}\n >\n Inactive\n \n {statusCount(\"inactive\")}\n \n \n {current_user.authorized_to_see_deactivated_services && (\n {\n dispatch({\n type: 'setActiveTab',\n values: \"deactivated\",\n })\n }}\n >\n Deactivated\n \n {statusCount(\"deactivated\")}\n \n \n )}\n
\n \n s.test_group_test_configuration.status == state.activeTab)}\n nonSelectableItemIds={nonSelectableItemIds}\n RowComponent={TestGroupTestConfigurationRow}\n selectedItemIds={state.selectedTestGroupTestConfigurationIds}\n setSelectedItemIds={(ids) => dispatch({type: \"setSelectedTestGroupTestConfigurationIds\", values: ids})}\n itemComponents={{\n \"actionsComponent\":
\n \n \n {bmi ? bmi : \"--\"}\n \n {!!status && (\n
\n );\n};\n\nconst VitalsScreeningCardBody = ({\n test,\n submitTests,\n updateTest,\n setIsOpen,\n ...props\n}) => {\n\n const [heightInFeet, setHeightInFeet] = useState(null);\n const [heightInInches, setHeightInInches] = useState(null);\n const height = valueFromGenericTestResult(test, \"height\");\n const pulse = valueFromGenericTestResult(test, \"pulse\");\n const weight = valueFromGenericTestResult(test, \"weight\");\n const saveButtonDisabled = !heightInFeet || !heightInInches || !height || !weight || !pulse;\n const [errors, setErrors] = useState({});\n const [nonResetable, setNonResetable] = useState(!!idFromGenericTestResult(test, \"height\"));\n\n const handleSave = async () => {\n updateTest({...test, administered: true})\n\n const response = await submitTests({ tests: [test] });\n if (response.data.success) {\n setNonResetable(true);\n setIsOpen(false);\n toastr.success(\"Vitals screening saved\");\n } else {\n toastr.error(\"Something went wrong\");\n }\n };\n\n const handleReset = () => {\n if (nonResetable) return;\n setHeightInFeet('');\n setHeightInInches('');\n resetGenericTestResultAttributes(test, updateTest);\n };\n\n const splitHeightIntoFeetAndInches = () => {\n if (!height || !!heightInFeet || !!heightInInches) return;\n const { feet, inches } = convertHeighInInchesToHeightInFeetAndInches(height);\n setHeightInFeet(feet);\n setHeightInInches(inches);\n };\n\n const joinHeightInFeetAndInches = () => {\n if (!heightInFeet && !heightInInches) return;\n const height = convertHeighInFeetAndInchesToHeightInInches(heightInFeet, heightInInches);\n handleGenericTestResultChange({ target: { name: \"height\", value: height } }, test, updateTest);\n };\n\n const validateField = (e) => {\n const { name, value } = e.target;\n const minValue = VALIDATIONS[name].min;\n const maxValue = VALIDATIONS[name].max;\n const newErrors = { ...errors };\n if (!value) {\n newErrors[name] = \"Please enter a value\";\n } else if (!isValidInteger(value) || parseInt(value) < minValue || parseInt(value) > maxValue) {\n newErrors[name] = `Please enter a value between ${minValue} and ${maxValue}`;\n } else {\n newErrors[name] = null;\n }\n setErrors({ ...newErrors });\n };\n\n const handleFieldChange = (e) => handleGenericTestResultChange(e, test, updateTest);\n\n // updates height prop in inches based on feet and inches\n useEffect(() => joinHeightInFeetAndInches(), [heightInFeet, heightInInches]);\n\n // fills feet and inches input fields based on height in inches\n useEffect(() => splitHeightIntoFeetAndInches(), [test]);\n\n return (\n <>\n \n setHeightInFeet(e.target.value)}\n type=\"text\"\n unit=\"ft\"\n value={heightInFeet}\n />\n setHeightInInches(e.target.value)}\n type=\"text\"\n unit=\"in\"\n value={heightInInches}\n />\n
\n \n
\n
\n {displayRemove && (\n handleRemove(slug, testId, tests, setTests)}\n variant=\"link\"\n >\n Remove service\n \n )}\n {onClick && (\n \n {label}\n \n )}\n
\n );\n};\n\nexport const ResultStatus = ({\n className,\n color,\n icon,\n status,\n}) => {\n return (\n {capitalize(status)}
\n \n );\n};\n\nconst ServiceCardHeader = ({\n color,\n handleToggle,\n isOpen,\n serviceCompleted,\n tag,\n tagBackgroundColor,\n tagColor,\n title,\n}) => {\n const lighterColor = hexToRgba(color, 0.07);\n return (\n \n \n {title}\n \n
\n \n {title}\n
\n );\n};\n\nconst ServiceCardBody = ({\n children,\n isOpen,\n notesRef,\n}) => {\n const contentRef = useRef(null);\n\n useEffect(() => {\n const updateHeight = () => {\n if (isOpen) {\n contentRef.current.style.height = `inherit`;\n } else {\n contentRef.current.style.height = '0px';\n }\n };\n\n const handleMouseDown = (e) => {\n if (e.target === notesRef.current) {\n window.addEventListener(\"mousemove\", updateHeight);\n window.addEventListener(\"mouseup\", handleMouseUp);\n }\n };\n\n const handleMouseUp = () => {\n window.removeEventListener(\"mousemove\", updateHeight);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n\n updateHeight(); // Initial height update\n\n // Set up mutation observer for when elements change within the content\n const observer = new MutationObserver(updateHeight);\n if (contentRef.current) {\n observer.observe(contentRef.current, { childList: true, subtree: true });\n }\n\n // Set up mouse down event listener for resizing notes textarea\n const notes = notesRef.current;\n if (notes) {\n notes.addEventListener(\"mousedown\", handleMouseDown);\n }\n\n return () => {\n // Clean up on unmount\n if (observer && contentRef.current) observer.disconnect();\n if (notes) notes.removeEventListener(\"mousedown\", handleMouseDown);\n };\n }, [isOpen, children, notesRef]);\n\n return (\n \n \n
\n \n
\n );\n};\n\nexport const CardTag = ({\n backgroundColor = \"white\",\n color = \"black\",\n text,\n}) => {\n return (\n \n {children}\n
\n \n
\n );\n};\n\nexport const InputWithUnits = ({\n as,\n disabled,\n error,\n inputStyle,\n inputContainerClassName,\n name,\n onBlur,\n onChange,\n type,\n unit,\n value,\n}) => {\n return (\n \n {label}\n
\n {children ? (\n children\n ) : (\n \n
\n );\n};\n\nconst ServiceCard = ({\n containerClassName,\n key,\n serviceSpecification,\n serviceType,\n test,\n tests,\n ...props\n}) => {\n\n const determineCardBody = () => {\n if (!test.id) return ScanOrGenerateCardBody;\n if (!!CUSTOM_CARD_BODIES[serviceSpecification]) return CUSTOM_CARD_BODIES[serviceSpecification];\n return serviceType === \"immunization\" ? GenericVaccineCardBody : GenericTestCardBody;\n };\n\n const [isOpen, setIsOpen] = useState(true);\n const CardBody = determineCardBody();\n const notesRef = useRef(null);\n const resultingFromLabManager = !!getResultsLink(test.test_configuration?.service_specification);\n\n const handleToggle = () => setIsOpen(!isOpen);\n\n const serviceCompleted = test.service_type == \"immunization\"\n ? !!test.administered\n : !resultingFromLabManager || !!test.result;\n\n return (\n \n
\n {error && (\n \n
\n )}\n \n \n
\n );\n};\n\nexport default ServiceCard;","import React, { useState } from 'react';\nimport {\n Button,\n Card,\n Col,\n Modal,\n Row,\n Spinner,\n} from 'react-bootstrap';\n\nimport { CardTag } from './ServiceCard';\nimport FabrxCheckbox from '../../Registration/primary/FabrxCheckbox';\nimport FloatingLabelInput from '../../common/components/FloatingLabelInput';\nimport ModalHeader from '../../common/components/ModalHeader';\nimport { SERVICE_SPECIFICATION_TYPES } from '../../TestGroupTestConfigurations/components/TestGroupTestConfigurationsIndex';\n\n\nconst SelectableTestConfigurationRow = ({\n addTestConfiguration,\n checkBoxChecked,\n removeTestConfiguration,\n testConfiguration,\n}) => {\n\n const serviceType = testConfiguration.service_type == \"other\"\n ? testConfiguration.service_kind_label\n : SERVICE_SPECIFICATION_TYPES[testConfiguration.service_type]['label'];\n const serviceTypeColor = SERVICE_SPECIFICATION_TYPES[testConfiguration.service_type]['color'];\n const serviceTypeBackgroundColor = SERVICE_SPECIFICATION_TYPES[testConfiguration.service_type]['backgroundColor'];\n\n return (\n \n
\n \n Select services for this appointment.
\n\n \n
\n
\n {testConfigurations\n .filter((tc) => filteredTestConfigurationIds.includes(tc.id))\n .map((testConfiguration) => {\n return (\n \n
\n );\n })\n }\n \n
\n {tests.map(test => {\n return (\n \n \n Services\n \n {errored ? (\n
\n \n setShowServicesModal(!showServicesModal)}\n variant=\"link\"\n >\n Add services\n \n
\n \n
\n \n
\n \n
\n {!!subTitle && subTitle}\n \n {title}\n
\n {errored ? (\n\n
\n )}\n \n setShow(!show)}\n variant=\"link\"\n >\n
\n {topRightContent}
\n {showHide && (\n \n
\n \n {children}\n
\n {handleSave && (\n \n handleSave(data)}\n >\n Save\n \n
\n )}\n \n {latestReference.status === 'match_rejected' && (\n \n )}\n
\n );\n};\n\nexport default MatchStatusHandler;\n","import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport { Button, Card } from 'react-bootstrap';\nimport { vaccineCode, manufacturerCode } from '../../common/utils/vaccine';\nimport { Spinner } from 'react-bootstrap';\nimport { format } from 'date-fns';\nimport IISReferences from './IisReferences';\nimport ImmunizationTable from './ImmunizationTableV2';\nimport ImmunizationCheck from './ImmunizationCheckV2';\nimport CheckoutSection from './CheckoutSection';\nimport MatchStatusHandler from './MatchStatusHandler';\n\nconst requestHistoryUpdate = ({ testGroupId, userId }) => {\n const url = `/test_groups/${testGroupId}/participants/${userId}/vaccine_history_updates`;\n return axios.post(url);\n};\n\nconst lastCheckedLabel = reference => {\n return (reference\n ? `${format(new Date(reference.last_checked_at), 'yyyy-MMM-dd')} (${reference.source.toUpperCase()})`\n : \"Never\"\n );\n};\n\nconst vaccinationSourcesLabel = (iisReferences) => {\n const sources = iisReferences.map((reference) =>\n reference.source.toUpperCase(),\n );\n\n if (sources.length >= 1) {\n return `List of vaccines from ${sources.join(', ')} and/or Primary.Health`;\n } else {\n return `List of vaccines from Primary.Health`;\n }\n};\n\nconst uniqueKey = ({ vaccinated_on, vaccine, manufacturer }) => {\n return [\n vaccinated_on,\n vaccineCode(vaccine),\n manufacturerCode(manufacturer),\n ].join('|');\n};\n\nexport const deduplicateHistories = (histories) => {\n const missing_manufacturers = histories.filter(history => history.manufacturer === null);\n const deduplicated = histories.reduce((uniqueHistories, history) => {\n const key = uniqueKey(history);\n if (uniqueHistories[key]) {\n const uniqueHistory = uniqueHistories[key];\n if (uniqueHistory.source == 'primary') {\n uniqueHistories[key] = history; // Give preference to non-Primary record\n }\n if (uniqueHistories[key].source && !uniqueHistories[key].source.includes(history.source)) {\n uniqueHistories[key].source += `, ${history.source}`;\n }\n } else {\n const missing_manufacturer = missing_manufacturers.find(missing => key.includes(uniqueKey(missing)) && key != uniqueKey(missing));\n\n if (missing_manufacturer && !missing_manufacturer.source.includes(history.source)) {\n uniqueHistories[key] = missing_manufacturer;\n uniqueHistories[key].source += `, ${history.source}`;\n var matchWarning = `Warning: Reduced confidence with ${history.source} immunization match. IIS missing manufacturer.`;\n if (uniqueHistories[key].notes) {\n uniqueHistories[key].notes += matchWarning;\n } else {\n uniqueHistories[key].notes = matchWarning;\n }\n } else if (!missing_manufacturer) {\n uniqueHistories[key] = history;\n }\n }\n return uniqueHistories;\n }, {});\n\n return Object.values(deduplicated);\n};\n\nconst sortByDate = (histories) => {\n return histories.sort((a, b) => {\n return new Date(b.vaccinated_on) - new Date(a.vaccinated_on);\n });\n};\n\nconst filterByThreeMonths = (histories) => {\n const threeMonthsAgo = new Date();\n threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);\n\n return histories.filter(\n (history) => new Date(history.vaccinated_on) >= threeMonthsAgo,\n );\n};\n\nconst ImmunizationHistory = (props) => {\n const {\n testGroupId,\n user,\n isHipaaTrained = false,\n histories: propHistories,\n iisReferences: propIISReferences,\n } = props;\n\n const updateImmunizations = ({ vaccineHistories, iisReferences }) => {\n setHistories(vaccineHistories);\n setIISReferences(iisReferences);\n setLatestReference(new IISReferences(iisReferences).mostRecent());\n };\n\n const [histories, setHistories] = useState(propHistories);\n const [iisReferences, setIISReferences] = useState(propIISReferences);\n const [latestReference, setLatestReference] = useState(new IISReferences(iisReferences).mostRecent())\n const allHistories = sortByDate(deduplicateHistories(histories));\n const recentHistories = filterByThreeMonths(allHistories);\n const [activeTab, setActiveTab] = useState('recent');\n\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(false);\n\n const checkNow = () => {\n return requestHistoryUpdate({ testGroupId, userId: user.id })\n .then((response) => {\n updateImmunizations({\n vaccineHistories: response.data.vaccine_histories,\n iisReferences: response.data.iis_references,\n });\n setError(false);\n })\n .catch((error) => {\n setError(true);\n });\n };\n\n const handleCheckNow = () => {\n setLoading(true);\n checkNow().then(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n checkNow(); // check when loading\n }, []);\n\n return (\n \n \n setShowModal(false)}>\n \n Are you sure?\n \n \n \n \n \n \n \n setShowModal(false)}\n >\n Cancel\n \n \n \n \n
\n \n {latestReference?.source.toUpperCase()} user ID:{' '}\n {latestReference?.iis_id}\n
\n \n {latestReference.status === 'ok' && (\n setShowModal(true)}\n >\n Not a match\n \n )}\n {latestReference.status === 'match_rejected' && (\n \n )}\n
\n Please confirm that this patient is not a match.
\n \n Name:{' '}\n {latestReference?.name?.first_name}{' '}\n {latestReference?.name?.other_names}{' '}\n {latestReference?.name?.last_name}\n
\n \n Date of birth:{' '}\n {latestReference?.date_of_birth}\n
\n \n Gender:{' '}\n {latestReference?.gender}\n
\n \n Address:{' '}\n {latestReference?.address?.street}{' '}\n {latestReference?.address?.city},{' '}\n {latestReference?.address?.state}{' '}\n {latestReference?.address?.zip_code}\n
\n \n Phone:{' '}\n {latestReference.phone_number &&\n `(${latestReference.phone_number.area_code}) ${latestReference.phone_number.local_number}`}\n
\n \n Updated: {lastCheckedLabel(latestReference)}\n
\n \n \n
\n \n }\n >\n \n
\n \n\n {vaccinationSourcesLabel(iisReferences)}
\n\n setActiveTab('history')}\n style={{\n cursor: 'pointer',\n borderBottom: activeTab === 'history' ? '1px solid black' : 'none',\n fontWeight: activeTab === 'history' ? 'bold' : 'normal',\n }}\n >\n History\n
\n \n setActiveTab('recent')}\n style={{\n cursor: 'pointer',\n borderBottom: activeTab === 'recent' ? '1px solid black' : 'none',\n fontWeight: activeTab === 'recent' ? 'bold' : 'normal',\n }}\n >\n Last 3 months\n
\n \n {activeTab === 'recent' && (\n isHipaaTrained ? (\n 0 && recentHistories.length === 0}\n />\n ) : (\n \n You do not have access to the patient’s recent history. Please\n contact your site lead for detailed vaccination history.\n \n )\n )}\n {activeTab === 'history' && (\n isHipaaTrained ? (\n \n You do not have access to the patient’s full history. Please\n contact your site lead for detailed vaccination history.\n \n )\n )}\n
\n \n {generateIconOptions ? (\n setShowScanner(true)}\n title={\n cantScanBarcode\n ? 'You do not have permission to scan barcode'\n : buttonText\n }\n />\n ) : (\n \n \n setShowScanner(true)}\n variant={\n cantScanBarcode ? 'outline-secondary' : 'outline-primary'\n }\n size=\"sm\"\n className=\"btn-checkout round-button\"\n disabled={cantScanBarcode}\n aria-disabled={cantScanBarcode}\n aria-label={buttonText}\n >\n {buttonText}\n \n \n \n )}\n {showScanner && (\n setShowScanner(false)}>\n \n \n
\n setShowScanner(false)}\n variant=\"link\"\n className=\"p-0 text-dark\"\n >\n X\n \n \n \n \n \n \n )}\n
\n );\n};\n\nconst AddVaccine = ({ onClick, generateIconOptions }) =>\n generateIconOptions ? (\n \n {' '}\n {testConfiguration.checkout_name}\n
\n - \n
- \n \n Select quantity\n \n \n {[...Array(10)].map((_, idx) => (\n
\n {scanAvailable && (\n \n onScan(unsavedUid)}\n setUnsavedUid={setUnsavedUid}\n unsavedUid={unsavedUid}\n generateIconOptions={generateIconOptions}\n permission_kinds={permission_kinds}\n editable_test_types={editable_test_types}\n />\n \n )}\n {!tubeScanOnly && (\n \n
\n \n ) : (\n \n
\n );\n\n const qualified = testConfiguration.calculate_age_gating_in_days\n ? withinAgeRange(\n appointment.user.age_in_days,\n testConfiguration.minimum_age_in_days,\n testConfiguration.maximum_age_in_days,\n )\n : withinAgeRange(\n appointment.user.age_in_months,\n testConfiguration.minimum_age_in_months,\n testConfiguration.maximum_age_in_months,\n );\n\n return (\n This service is disabled for checkout
\n \n
\n \n );\n};\n\nconst IconArea = styled.div`\n width: 90px;\n flex-shrink: 0;\n flex-grow: 0;\n background-color: ${({ color }) => color};\n border-radius: 12px 0 0 12px;\n\n @media (width <= 768px) {\n width: 70px;\n }\n\n @media (width <= 576px) {\n width: 15px;\n }\n`;\n\nconst CreateTestOfType = ({\n testConfiguration,\n unsavedUid,\n setUnsavedUid,\n appointment,\n addTest,\n addTests = undefined,\n hideComponent,\n isVaccine,\n consentFormsUsers,\n permission_kinds,\n editable_test_types,\n}) => {\n const consentForm =\n testConfiguration.test_group_test_configuration.active_consent_form;\n const cardRef = useRef(null);\n const iconRef = useRef(null);\n\n const actions = testConfiguration.test_group_test_configuration\n .shown_on_checkout ? (\n \n \n \n
\n {actions}
\n \n
\n );\n\n const meetsAgeRequirements = testConfiguration.calculate_age_gating_in_days\n ? withinAgeRange(\n appointment.user.age_in_days,\n testConfiguration.minimum_age_in_days,\n testConfiguration.maximum_age_in_days,\n )\n : withinAgeRange(\n appointment.user.age_in_months,\n testConfiguration.minimum_age_in_months,\n testConfiguration.maximum_age_in_months,\n );\n\n return (\n This service is disabled for checkout
\n \n {currentlySelected.map(option =>\n
\n)\n\nconst MaxItemWarning = ({currentlySelected, maxItems, label}) => (\n \n setCurrentlySelected(currentlySelected.filter(o => o.value !== option.value))}\n /> \n
\n )}\n \n
\n)\n\nconst AsyncMultiSelect = ({\n name,\n selected,\n optionsUrl,\n valueKey = 'id',\n labelKey = 'friendly_name',\n onSelect = () => {},\n style = {},\n label,\n placeholder,\n maxItems,\n creatable = false,\n createOption = undefined,\n formatCreateLabel = undefined,\n isDisabled=false,\n showOptionsBelow=false,\n selectedIcon,\n}) => {\n const SelectComponent = creatable ? CreatableSelect : FloatingLabelSelect;\n\n const [selectOptions, setSelectOptions] = useState([]);\n const [currentlySelected, setCurrentlySelected] = useState([]);\n const [loading, setLoading] = useState(true);\n\n const onChange = (selected) => {\n setCurrentlySelected(selected);\n onSelect(selected);\n };\n\n useEffect(() => {\n axios.get(optionsUrl).then((response) => {\n setLoading(false);\n const options = typeof(response.data.options) == \"string\"\n ? JSON.parse(response.data.options)\n : response.data.options\n setSelectOptions(\n options.map((option) => ({\n value: option[valueKey],\n label: option[labelKey],\n })),\n );\n setCurrentlySelected(\n selected.map((option) => ({\n value: option[valueKey],\n label: option[labelKey],\n })),\n );\n });\n }, []);\n\n const onCreateOption = (inputValue) => {\n createOption(inputValue).then((OptionObj) => {\n const newOption = {\n value: OptionObj[valueKey],\n label: OptionObj[labelKey],\n };\n setSelectOptions([...selectOptions, newOption]);\n onChange([...currentlySelected, newOption]);\n });\n };\n\n const MenuList = (props) => {\n const height = 35;\n const { options, children, maxHeight, getValue } = props;\n const [value] = getValue();\n const initialOffset = options.indexOf(value) * height;\n\n return (\n Maximum {label.toLowerCase()} met. Please remove {currentlySelected.length - maxItems} {label.toLowerCase()}.
\n {children[index]}
}\n \n );\n };\n\n return (\n \n item.value).join(',')\n : ''\n }\n name={name.toLowerCase()}\n />\n {maxItems && currentlySelected.length > maxItems &&\n
\n );\n};\n\nexport default AsyncMultiSelect;\n","import React, { useState, useRef } from 'react';\nimport {\n Row,\n Col,\n Image,\n Dropdown,\n OverlayTrigger,\n Tooltip,\n Button,\n Container,\n} from 'react-bootstrap';\nimport Select from 'react-select';\nimport axios from 'axios';\nimport '../common/locales/i18n';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleExclamation, faCheck, faTimesCircle } from '@fortawesome/pro-regular-svg-icons';\nimport { dataURItoBlob } from '../common/utils';\nimport Webcam from \"../common/components/Webcam\";\nimport { Camera, Digital, Manage, Upload } from '../common/components/Icons';\nimport { pushReminderToSign, additionalConsents } from '../Participants/components/participants/CheckInModal';\nimport { faEnvelope } from '@fortawesome/pro-regular-svg-icons';\n\nconst guardianOptions = [\n { value: 'consented_by_parent_guardian', label: 'Parent / Guardian' },\n {\n value: 'consented_by_decision_maker',\n label: 'Authorized Medical Decision-maker',\n },\n {\n value: 'consented_by_guardian_verbal',\n label: 'Registrar with Guardian (verbal consent obtained)',\n },\n {\n value: 'consented_by_registrar',\n label: 'Registrar (verbal consent obtained)',\n },\n {\n value: 'consented_by_other',\n label: 'Other'\n }\n];\n\nexport const buildGuardianConsent = (user, appointment, testGroup) => {\n const [guardianForm, setGuardianForm] = useState(appointment);\n const [guardianInfoEditDisabled, setGuardianInfoEditDisabled] = useState(true);\n const [savingGuardianInfo, setSavingGuardianInfo] = useState(false);\n\n const updateGuardianInfo = () => {\n setSavingGuardianInfo(true);\n\n const user_consent_form_id = appointment.user_consent_form_id;\n const path = `/test_groups/${testGroup.id}/participants/${user.id}/consent_forms_users`;\n\n if (user_consent_form_id) {\n // .json to prevent redirection\n axios.put(`${path}/${user_consent_form_id}.json`, guardianForm, {}).then(() => {\n setSavingGuardianInfo(false);\n });\n } else {\n axios.post(path, guardianForm).then(() => {\n setSavingGuardianInfo(false);\n });\n }\n };\n\n return (user.errors.guardian_consented || appointment.guardian_name) ? (\n \n \n Guardian consent info{' '}\n {user.errors.guardian_consented?.errored && \n \n \n setGuardianForm(\n {...guardianForm,\n guardian_first_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n \n setGuardianForm(\n {...guardianForm,\n guardian_last_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n \n setGuardianForm({...guardianForm, guardian_email: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n \n setGuardianForm({...guardianForm, guardian_phone_number: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n \n {\n if (!guardianInfoEditDisabled) updateGuardianInfo();\n setGuardianInfoEditDisabled(!guardianInfoEditDisabled);\n }}\n >\n {guardianInfoEditDisabled ? 'Edit' : 'Save'}\n \n )}\n \n
\n
\n \n ) : \n}\n\nconst AdditionalConsentState = ({consentFormUser}) => {\n const consent = consentFormUser || { consent: null, consented: false }\n const declinedConsent = consent.consent == \"no\";\n\n const renderTooltip = (props) => (\n \n Relationship to participant\n x.value == guardianForm.guardian_relationship_type)}\n options={guardianOptions}\n name=\"consent_forms_user[guardian_relationship_type]\"\n onChange={(e) => {\n setGuardianForm({...guardianForm, guardian_relationship_type: e.value})\n }}\n isDisabled={guardianInfoEditDisabled}\n components={{ IndicatorSeparator: () => null }}\n />\n
\n \n \n {showWebcam &&\n
\n \n }\n \n
\n {title} consent
\n \n {consentOption}\n
\n \n \n
\n Consents for {user.first_name} {user.last_name} ({user.date_of_birth})
\n\n {\n ![IAM_POLICYHOLDER, null, undefined, \"\"].includes(formAction[policyHolderKey]) ? (\n
\n );\n};\n\nexport default PolicyHolderFields;\n","import React, { useContext, useState, useRef } from 'react';\nimport '../../../common/locales/i18n';\nimport { useTranslation } from 'react-i18next';\nimport CreatableSelect from 'react-select/creatable';\nimport ErrorMessage from '../../../common/components/ErrorMessage';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport PolicyHolderFields from './PolicyHolderFields';\nimport { buildCustomizedLabel } from '../../../common/locales/langs';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/pro-regular-svg-icons';\nimport { Row, Col, Image, Dropdown } from 'react-bootstrap';\nimport Select from 'react-select';\nimport Webcam from '../../../common/components/Webcam';\nimport { Camera, Upload } from '../../../common/components/Icons';\nimport { dataURItoBlob } from '../../../common/utils';\n\nconst PolicyInformationFields = ({\n setFieldValue,\n values,\n errors,\n handleChange,\n secondary,\n policyHolderNames,\n names={\n insuranceCardFront: \"insurance_card_front\",\n insuranceCardBack: \"insurance_card_back\",\n insuranceCompany: \"insurance_company\",\n insuranceId: \"insurance_id\",\n insuranceGroupNumber: \"insurance_group_number\",\n insurancePolicyHolder: \"insurance_policy_holder\",\n }\n}) => {\n const { t, i18n } = useTranslation();\n const { formAction, setFormAction, testGroup } = useContext(InsuranceContext);\n const {\n insuranceCardFront,\n insuranceCardBack,\n insuranceCompany,\n insuranceId,\n insuranceGroupNumber,\n insurancePolicyHolder,\n } = names\n const insuranceCompanyOptions = testGroup.insurance_companies.map(v => ({ label: v, value: v }))\n const announceFileUpload = (file, nodeId) => {\n const announceFileUploadRoot = document.getElementById(nodeId);\n if (file === undefined) {\n announceFileUploadRoot.style.visibility = 'hidden';\n } else {\n announceFileUploadRoot.style.visibility = 'visible';\n announceFileUploadRoot.focus();\n }\n }\n const [insuranceFrontName, setInsuranceFrontName] = useState(null);\n const [insuranceBackName, setInsuranceBackName] = useState(null);\n const [insuranceImageFront, setInsuranceImageFront] = useState(values.user[insuranceCardFront]);\n const [insuranceImageBack, setInsuranceImageBack] = useState(values.user[insuranceCardBack]);\n const [insuranceImageSide, setInsuranceImageSide] = useState(null);\n const [showWebcam, setShowWebcam] = useState(false);\n const fileFrontRef = useRef(null);\n const fileBackRef = useRef(null);\n\n const updateWebcamImage = (img) => {\n let insuranceCardSide;\n let container = new DataTransfer();\n container.items.add(dataURItoBlob(img, true));\n\n if (insuranceImageSide == \"front\"){\n setInsuranceImageFront(img);\n insuranceCardSide = insuranceCardFront;\n setInsuranceFrontName(container.files[0][\"name\"]);\n } else {\n setInsuranceImageBack(img);\n insuranceCardSide = insuranceCardBack;\n setInsuranceBackName(container.files[0][\"name\"]);\n }\n\n document.getElementById(`${insuranceImageSide}-of-card${insuranceCardSide}`).files = container.files;\n announceFileUpload(container.files[0], `announce-card-${insuranceImageSide}-upload${insuranceCardSide}`);\n setShowWebcam(false);\n }\n\n const errorMessage = (error) => (\n errors[error] && \n \n
\n {t('registration.insurance_policy_holder.policy_dob')}\n
\n ) : null\n }\n \n \n setFieldValue(`user[${insuranceCompany}]`, s.value)}\n options={insuranceCompanyOptions}\n formatCreateLabel={(value) => `Other - click here to add: ${value}`}\n aria-label={t('registration.insurance_information.company_name')}\n className={errors[insuranceCompany] && 'is-invalid'}\n />\n {errorMessage(insuranceCompany)}\n \n {\n setFieldValue(`user[${insurancePolicyHolder}]`, s.value);\n if (secondary) {\n setFormAction({...formAction, secondaryPolicyHolder: s.value});\n } else {\n setFormAction({...formAction, policyHolder: s.value});\n }\n }}\n options={testGroup.policy_holder_options.map((policyHolder) => {\n return { value: policyHolder, label: t(buildCustomizedLabel(testGroup.population, `registration.insurance_policy_holder.${policyHolder}`)) }\n })}\n aria-label={t('registration.insurance_policy_holder.question')}\n />\n \n
\n \n
\n\n \n \n {showWebcam &&\n
\n \n }\n \n \n \n updateWebcamImage(data)}\n setShow={(e) => setShowWebcam(e)}\n style={{width: 350, height: 300, backgroundColor: \"black\"}}\n />\n
\n \n {formAction.requestDriversLicense && (\n {\n setFormAction({\n ...formAction,\n showLicenseInfo: false,\n showSsnInfo: false,\n showNoId: true,\n });\n }}\n checked={formAction.showNoId || false}\n label='No identification'\n radio\n />\n )}\n
\n );\n};\n\nexport default NoInsuranceFields;\n","import React, { useContext, useEffect, useState } from 'react';\nimport '../../../common/locales/i18n';\nimport { useTranslation } from 'react-i18next';\nimport SurveyPreview from '../../../common/components/SurveyPreview';\nimport { buildCustomizedLabel } from '../../../common/locales/langs';\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\nimport ErrorMessage from '../../../common/components/ErrorMessage';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport PolicyInformationFields from './PolicyInformationFields';\nimport NoInsuranceFields from './NoInsuranceFields';\nimport * as SurveyOriginal from \"survey-react\";\nimport { Model } from \"survey-core\";\n\nconst INSURANCE_REQUIRED_FIELDS = [\"insurance_company\", \"insurance_id\"];\nconst MEMBER_NAME_FIELDS = [\"insurance_primary_member_first_name\", \"insurance_primary_member_last_name\"];\nconst MEMBER_DATE_OF_BIRTH_FIELDS = [\n 'insurance_primary_member_date_of_birth(2i)',\n 'insurance_primary_member_date_of_birth(1i)',\n 'insurance_primary_member_date_of_birth(3i)',\n];\nconst SECONDARY_INSURANCE_FIELDS = [\n \"insurance_secondary_company\",\n \"insurance_secondary_id\",\n \"insurance_secondary_policy_holder\"\n];\nconst SECONDARY_MEMBER_FIELDS = [\"insurance_secondary_member_first_name\", \"insurance_secondary_member_last_name\"];\nconst SECONDARY_DATE_OF_BIRTH_FIELDS = [\n 'insurance_secondary_member_date_of_birth(2i)',\n 'insurance_secondary_member_date_of_birth(1i)',\n 'insurance_secondary_member_date_of_birth(3i)',\n]\nconst IAM_POLICYHOLDER = 'i_am';\n\nconst INSURANCE_CARD_FIELDS = {\n primary: [\"insurance_card_front\"],\n secondary: [\"insurance_secondary_card_front\"]\n}\n\nexport const validateInsuranceForm = (formAction) => (values) => {\n const errors = {};\n const submitError = (valueKey, errorKey) => {\n if (!values.user[valueKey]) errors[errorKey ? errorKey : valueKey] = 'registration.errors.required';\n }\n\n const {\n user: {\n insurance_status: insuranceStatus,\n driver_license_number: driverLicense,\n driver_license_state: driverLicenseState,\n social_security_number: socialSecurity,\n },\n test_group: {\n show_only_insurance_survey: showOnlySurveyForWhenNoInsurance,\n insurance_fields_required: requiredFields,\n use_new_surveyjs_validation: newSurveyValidation,\n insurance_survey: insuranceSurvey,\n flipper_flags: flipperFlags,\n },\n } = values;\n if (!(values.user && insuranceStatus !== undefined)) {\n errors.insurance_status = 'registration.errors.option_required';\n }\n if (newSurveyValidation && Object.keys(insuranceSurvey || {}).length > 0) {\n let model;\n if (flipperFlags.upgraded_surveyjs) {\n model = new Model(insuranceSurvey);\n } else {\n model = new SurveyOriginal.Model(insuranceSurvey);\n }\n let data = values.appointment.insurance_answers\n model.data = data || {};\n if (model.hasErrors()) errors.questionnaire = 'registration.errors.survey_unanswered';\n }\n\n if (requiredFields.includes('insurance_card')) {\n INSURANCE_CARD_FIELDS.primary.map(key => submitError(key))\n }\n if (formAction.showInsuranceInformation) {\n INSURANCE_REQUIRED_FIELDS.concat(\"insurance_policy_holder\").map(key => submitError(key));\n\n if (formAction.policyHolder !== IAM_POLICYHOLDER) {\n MEMBER_NAME_FIELDS.map(key => submitError(key));\n MEMBER_DATE_OF_BIRTH_FIELDS.map(key => submitError(key, \"date_of_birth\"));\n }\n if (formAction.showSecondary) {\n SECONDARY_INSURANCE_FIELDS.map(key => submitError(key));\n if (formAction.secondaryPolicyHolder !== IAM_POLICYHOLDER) {\n SECONDARY_MEMBER_FIELDS.map(key => submitError(key));\n SECONDARY_DATE_OF_BIRTH_FIELDS.map(key => submitError(key, \"secondary_date_of_birth\"));\n }\n if (requiredFields.includes('insurance_card')) {\n INSURANCE_CARD_FIELDS.secondary.map(key => submitError(key))\n }\n }\n } else {\n if (\n !driverLicense &&\n !socialSecurity &&\n formAction.participantHasID &&\n !showOnlySurveyForWhenNoInsurance\n )\n errors.no_insurance = 'registration.errors.field_required';\n if (driverLicense && !driverLicenseState)\n errors.driver_license_state = 'registration.errors.field_required';\n }\n return errors;\n};\n\nconst InsuranceForm = ({ values, errors, handleChange, setFieldValue }) => {\n const { t, i18n } = useTranslation();\n const { testGroup, formAction, setFormAction } = useContext(InsuranceContext);\n\n useEffect(() => {\n if (formAction.requireInsurance) setFieldValue('user.insurance_status', 0);\n }, [formAction]);\n\n const noInsuranceSubmitButton = () => {\n const showNoInsuranceForm = formAction.requestDriversLicense ||\n Object.keys(values.test_group.insurance_survey || {}).length > 0 ||\n formAction.requestSocialSecurityNumber;\n\n return (\n \n {\n setFormAction({\n ...formAction,\n showLicenseInfo: true,\n showSsnInfo: false,\n showNoId: false,\n });\n }}\n checked={formAction.showLicenseInfo || values.user.driver_license_number || false}\n label={`Driver's license or state ID # ${formAction.requireDriversLicense ? '*' : ''}`}\n radio\n />\n {(formAction.showLicenseInfo || values.user.driver_license_number) && (\n
\n )}\n {formAction.requestSocialSecurityNumber && (\n \n \n option.value === values.user.driver_license_state,\n )}\n onChange={(s) => {\n setFormAction({ ...formAction, driverLicenseState: s.value });\n setFieldValue('user.driver_license_state', s.value);\n }}\n options={usStateOptions}\n aria-label={t('no_insurance_information.state')}\n className={errors.driver_license_state && 'is-invalid'}\n />\n \n
\n
\n )}\n \n {\n setFieldValue('user[driver_license]', e.currentTarget.files[0]);\n setFileName(e.currentTarget.files[0][\"name\"])\n announceFileUpload(e.currentTarget.files[0], 'announce-card-front-upload-license');\n }}\n name={`user[driver_license]`}\n accept=\"image/*;capture=camera\"\n id=\"driver-license-file-upload\"\n style={{visibility: \"hidden\", width: \"0px\"}}\n />\n \n \n \n
\n \n {\n setFormAction({\n ...formAction,\n showLicenseInfo: false,\n showSsnInfo: true,\n showNoId: false,\n });\n }}\n checked={formAction.showSsnInfo || values.user.social_security_number || false}\n label={`Social security # ${formAction.requireSocialSecurityNumber ? '*' : ''}`}\n radio\n />\n {(formAction.showSsnInfo || values.user.social_security_number) && (\n \n
\n )}\n
\n )}\n {!formAction.requireDriversLicense && !formAction.requireSocialSecurityNumber && (\n \n {\n setFormAction({\n ...formAction,\n showSecondary: !!!formAction.showSecondary,\n });\n }}\n checked={formAction.showSecondary}\n label={t('registration.insurance_information.secondary_insurance_label')}\n />\n\n {formAction.showSecondary && (\n
\n )\n }\n\n return (\n \n {\n setFormAction({\n ...formAction,\n showSecondaryInsuranceBack: !formAction.showSecondaryInsuranceBack\n }\n )}}\n names={{\n insuranceCardFront: \"insurance_secondary_card_front\",\n showInsuranceBack: \"showSecondaryInsuranceBack\",\n insuranceCardBack: \"insurance_secondary_card_back\",\n insuranceCompany: \"insurance_secondary_company\",\n insuranceId: \"insurance_secondary_id\",\n insuranceGroupNumber: \"insurance_secondary_group_number\",\n insurancePolicyHolder: \"insurance_secondary_policy_holder\",\n }}\n policyHolderNames={{\n policyHolderKey: \"secondaryPolicyHolder\",\n primaryMemberFirstName: \"insurance_secondary_member_first_name\",\n primaryMemberLastName: \"insurance_secondary_member_last_name\",\n secondary: true,\n dob: \"secondary_date_of_birth\",\n }}\n />\n
\n )}\n \n \n {errors.insurance_status && \n\n {formAction.showNonInsuranceInformation &&\n (formAction.requestDriversLicense || formAction.requestSocialSecurityNumber) &&\n
\n );\n};\n\nexport default InsuranceForm;\n","import React, { useState, useEffect } from 'react';\nimport { Formik } from 'formik';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport InsuranceForm, { validateInsuranceForm } from './InsuranceForm';\n\nconst IAM_POLICYHOLDER = 'i_am';\n\nconst showInsuranceField = (testGroup, field) =>\n testGroup.insurance_fields_requested.includes(field) ||\n testGroup.insurance_fields_required.includes(field);\nconst requireInsuranceField = (testGroup, field) =>\n testGroup.insurance_fields_required.includes(field);\n\nconst Insurance = (props) => {\n const testGroup = props.test_group;\n\n const [formAction, setFormAction] = useState({\n requestInsurance: showInsuranceField(testGroup, 'insurance'),\n requireInsurance: requireInsuranceField(testGroup, 'insurance'),\n requestDriversLicense: showInsuranceField(testGroup, 'drivers_license'),\n requireDriversLicense: requireInsuranceField(testGroup, 'drivers_license'),\n requestSocialSecurityNumber: showInsuranceField(testGroup, 'ssn'),\n requireSocialSecurityNumber: requireInsuranceField(testGroup, 'ssn'),\n showInsuranceBack: false,\n showInsuranceInformation:\n requireInsuranceField(testGroup, 'insurance') ||\n props.user.insurance_policy_holder,\n showNonInsuranceInformation:\n !requireInsuranceField(testGroup, 'insurance') &&\n !props.user.insurance_policy_holder &&\n (props.user.insurance_status == 1 || props.user.insurance_status == 'do_not_have_health_insurance'),\n policyHolder: props.user.insurance_policy_holder,\n secondaryPolicyHolder: props.user.insurance_secondary_policy_holder,\n showSecondary: !!props.user.insurance_secondary_policy_holder,\n useSSN:\n !showInsuranceField(testGroup, 'drivers_license') &&\n showInsuranceField(testGroup, 'ssn'),\n participantHasID: true,\n memberBirthMonth: null,\n memberBirthYear: null,\n memberBirthDay: null,\n memberSecondaryBirthMonth: null,\n memberSecondaryBirthYear: null,\n memberSecondaryBirthDay: null,\n driverLicenseState: null,\n });\n\n useEffect(() => {\n [\n ['insurance_status', formAction.showInsuranceInformation ? 0 : 1],\n [\n 'insurance_primary_member_date_of_birth(1i)',\n formAction.memberBirthYear,\n ],\n ['insurance_primary_member_date_of_birth(3i)', formAction.memberBirthDay],\n [\n 'insurance_primary_member_date_of_birth(2i)',\n formAction.memberBirthMonth,\n ],\n [\n 'insurance_secondary_member_date_of_birth(1i)',\n formAction.memberSecondaryBirthYear,\n ],\n [\n 'insurance_secondary_member_date_of_birth(3i)',\n formAction.memberSecondaryBirthDay,\n ],\n [\n 'insurance_secondary_member_date_of_birth(2i)',\n formAction.memberSecondaryBirthMonth,\n ]\n ].map((field) => {\n $(`input[name=\"user[${field[0]}]\"][type=hidden]`).remove();\n $('')\n .attr('type', 'hidden')\n .attr('name', `user[${field[0]}]`)\n .attr('value', field[1])\n .appendTo('#checkInModal, #checkInForm');\n });\n }, [formAction.memberBirthMonth,\n formAction.memberBirthYear,\n formAction.memberBirthDay,\n formAction.memberSecondaryBirthMonth,\n formAction.memberSecondaryBirthYear,\n formAction.memberSecondaryBirthDay,\n formAction.showInsuranceInformation,\n ]\n );\n\n const insuranceView = {\n view: (props) => \n {\n setFieldValue('user.insurance_status', 0);\n setFormAction({\n ...formAction,\n showInsuranceInformation: true,\n showNonInsuranceInformation: false,\n });\n }}\n checked={values.user.insurance_status === 0 || values.user.insurance_status === 'have_health_insurance' || formAction.showInsuranceInformation}\n label={t(\n buildCustomizedLabel(\n testGroup.population,\n 'registration.insurance_status.have_health_insurance',\n ),\n )}\n radio\n />\n
\n {formAction.showInsuranceInformation && showInsuranceInformationFields()}\n {!formAction.requireInsurance && (\n \n {noInsuranceSubmitButton()}\n
\n )}\n \n \n setRaces(races)}\n values={{'races': races}}\n context={CheckInContext}\n />\n
\n ),\n showField('ethnicity') && (\n \n \n setEthnicityBlob(ethnicityBlob)}\n values={{'ethnicity_blob': ethnicityBlob}}\n context={CheckInContext}\n />\n
\n ),\n showField('arab_ethnicity') && (\n \n \n setArabEthnicity(arabEthnicity)}\n values={{'arab_ethnicity': arabEthnicity}}\n context={CheckInContext}\n />\n
\n ),\n showField('sex_at_birth') && (\n \n \n setSexAtBirth(sexAtBirth)}\n values={{'sex_at_birth': sexAtBirth}}\n context={CheckInContext}\n />\n
\n ),\n showField('gender_identity') && (\n \n \n setGenderString(genderString)}\n values={{'gender_string': genderString}}\n context={CheckInContext}\n />\n
\n ),\n showField('sexual_orientation') && (\n \n \n setSexualOrientation(sexualOrientation)}\n values={{'sexual_orientation': sexualOrientation}}\n context={CheckInContext}\n />\n
\n ),\n showField('pronoun') && (\n \n \n setPronoun(pronoun)}\n values={{'pronoun': pronoun}}\n context={CheckInContext}\n />\n
\n ),\n (showField('language_preference') || showField('preferred_language')) && (\n \n \n setLanguagePreference(languagePreference)}\n values={{'language_preference': languagePreference}}\n context={CheckInContext}\n />\n
\n )\n ].filter(v => !!v);\n\n const half = Math.ceil(inputFields.length / 2);\n const firstHalf = inputFields.slice(0, half);\n const secondHalf = inputFields.slice(half);\n\n return (\n \n
\n\n \n
\n \n
\n \n
setShow(!show)} className=\"h5-vivid-blue\" data-test-hook=\"demographic_information_collapse\">\n
\n\n Demographic information
\n\n
\n\n \n
\n );\n};\n\nexport default VaccineProgramSection;","import React, { useState } from 'react';\nimport {\n Modal,\n Button,\n Row,\n Col,\n Accordion,\n Collapse,\n Badge,\n Image,\n Dropdown,\n OverlayTrigger,\n Tooltip,\n} from 'react-bootstrap';\nimport printJS from 'print-js';\nimport axios from 'axios';\nimport SurveyPreview from '../../../common/components/SurveyPreview';\nimport '../../../common/locales/i18n';\nimport { ChevronDropDown } from '../../../common/components/Chevron';\nimport { useTranslation } from 'react-i18next';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleExclamation, faEllipsis, faCheck, faArrowRight, faEnvelope, faCircleXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { faPrint } from '@fortawesome/pro-solid-svg-icons';\nimport { today, dataURItoBlob } from '../../../common/utils';\nimport AsyncMultiSelect from '../../../common/components/AsyncMultiSelect';\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\nimport { Camera, Digital, Manage, Shield, Upload } from '../../../common/components/Icons';\nimport { useRef } from 'react';\nimport { buildGuardianConsent, ConsentContainer } from '../../../Consents/ConsentFormsUsers';\nimport { faEye, faRotate } from '@fortawesome/pro-solid-svg-icons';\nimport Insurance from '../insurance/Insurance';\nimport DemographicSection from './CheckinComponents/DemographicSection';\nimport VaccineProgramSection from './CheckinComponents/VaccineProgramSection';\n\nexport const pushReminderToSign = ({ id }) => {\n axios\n .post(`/api/send_consent_reminder_appointment/${id}`)\n .then(() => {\n toastr.success(`Reminder sent!`);\n })\n .catch((error) => {\n const {\n response: { status },\n } = error;\n if (status === 401) {\n toastr.error('Not authorized to send reminder.');\n } else {\n toastr.error('Failed to send reminder.');\n }\n });\n};\n\nconst TestLaneSection = ({ appointment }) => {\n return (\n \n
setShow(!show)} className=\"h5-vivid-blue\" data-test-hook=\"vaccine_programs_collapse\">\n
\n\n Vaccine programs
\n\n {!!appointment?.vaccine_program_options?.vfa_options?.length && (\n
\n \n \n setVfaEligibility(option.value)}\n label={option.label}\n />\n )\n })\n }\n
\n )}\n {!!appointment?.vaccine_program_options?.vfc_options?.length && (\n Vaccine for Adults
\n {appointment?.vaccine_program_options?.vfa_options\n .map((option) => {\n return (\n\n \n setVfcEligibility(option.value)}\n label={option.label}\n />\n )\n })\n }\n
\n )}\n Vaccine for Children
\n {appointment?.vaccine_program_options?.vfc_options\n .map((option) => {\n return (\n\n
setShow(!show)} className=\"h5-vivid-blue\">\n
\n\n {title} {' '}\n { Object.keys(answers).length == 0 &&\n
\n }\n
\n \n
\n {title} {' '}\n { Object.keys(answers).length == 0 &&\n
\n }\n \n \n setAnswers(e.data)} />\n
\n setShow(!show)} className=\"h5-vivid-blue\">\n \n Consent{' '}\n { !consented &&\n
\n
\n \n Consent{' '}\n { !consented &&\n
\n \n \n View\n \n ) : (\n \n \n Sign\n \n\n \n \n \n pushReminderToSign(appointment)}>\n \n \n setShowWebcam(true)} >\n \n fileRef.current.click()}>\n \n \n \n )}\n showWebcam={showWebcam}\n webcamProps={{\n setImageData: (data) => updateWebcamImage(data),\n setShow: setShowWebcam,\n }}\n fileText={fileText}\n fileProps={{\n ref: fileRef,\n id: \"consentFile\",\n name: \"appointment[consent_waiver_image]\",\n onChange: (e) => {\n setFileText(e.target.files[0].name);\n setConsentImage(null);\n },\n }}\n consentImage={consentImage}\n badge={consented\n ? \n
\n )})}\n
\n \n
\n \n \n
\n {additionalConsent.testConfiguration.checkout_name || additionalConsent.testConfiguration.display_name} consent
\n \n {consentFormUser\n ? \n View\n \n : \n Sign
\n \n {dep_appointment.first_name} {dep_appointment.last_name}\n
\n \n {appointment?.available_test_lanes?.map((testLane) => (\n \n \n {testLane.name}\n \n
\n ))}\n \n \n
\n \n
\n \n
\n setShow(!show)} className=\"h5-vivid-blue\">\n
\n
\n }\n \n
Symptoms
\n\n Indicate if any participants have the following symptoms today\n
\n \n {user.dependent_appointments &&\n
\n \n {user.first_name} {user.last_name}\n
\n }\n\n {symptoms.map((symptom, idx) => {\n const active =\n symptomValues[symptom.key] === '1' ||\n symptomValues[symptom.key] === 'true';\n return (\n
\n \n
\n )})}\n \n
\n\n \n
\n );\n}\n\nconst TagSection = ({user, testGroup}) => {\n const [edit, setEdit] = useState(false);\n const [show, setShow] = useState(true);\n const tags = user.user_tags?.map(userTag => (\n {id: userTag.tag_id, friendly_name: userTag.friendly_name}\n )) || []\n const [activeTags, setActiveTags] = useState(tags);\n const originalTagIds = tags.map(t => t.id);\n const inActiveTags = originalTagIds.filter(t => !activeTags.includes(t))\n const totalTags = activeTags.concat(inActiveTags);\n\n const isOriginalTag = (tagId) => originalTagIds.find(id => id == tagId);\n\n return (\n \n
\n \n Insurance {' '}\n { missing &&\n
\n
\n \n Insurance {' '}\n { missing &&\n
\n \n
\n \n
\n\n {edit ? (\n \n {totalTags.map((tagId, idx) => (\n inActiveTags.includes(tagId) ? (\n isOriginalTag(tagId) &&\n \n x.tag_id == tagId).id}\n name={`user[user_tags_attributes][${idx}][id]`}\n />\n \n ) : !isOriginalTag(tagId) &&\n \n ))}\n
\n)};\n\nexport const CheckInInputs = ({\n appointment,\n user,\n tests,\n symptoms,\n testGroup,\n activeSections = [],\n testConfigurations = [],\n disableAdvanced=false,\n checkOut=false,\n}) => {\n const [checkIn, setCheckIn] = useState(true);\n\n const guardianInformation = appointment['has_guardian_information?'] && (\n \n
\n setEdit(!edit)}\n />\n }\n
\n \n Tags{' '}\n
\n\n {\n const newValues = selected ? selected.map(t => t.value) : [];\n setActiveTags(newValues);\n }}\n />\n
\n ) : (\n \n {activeTags.map((tag, idx) => (\n {tag.friendly_name} \n ))}\n
\n )}\n \n Guardian Info: {appointment.consented_guardian_name}\n {appointment.consented_guardian_phone_number &&\n `/ ${appointment.consented_guardian_phone_number}`}\n {appointment.consented_guardian_email &&\n `/ ${appointment.consented_guardian_email}`}\n
\n );\n\n const hasInsuranceSurvey = Object.keys(testGroup.insurance_survey || {}).length > 0;\n const showInsuranceSurvery = (testGroup.show_only_insurance_survey || testGroup.show_insurance_survey) &&\n hasInsuranceSurvey;\n const showInsuranceSection = testGroup.insurance_fields_requested.includes('insurance') || testGroup.insurance_fields_required.includes('insurance');\n\n const sections = {\n guardian_information: guardianInformation,\n test_lane: appointment.available_test_lanes?.length > 0 && \n \n \n {sections[section]}\n \n )}\n {!disableAdvanced &&\n \n \n Advanced\n \n \n setCheckIn(!checkIn)}\n >\n
\n \n \n }\n \n );\n};\n\nconst CheckInModal = ({\n setShow,\n show,\n appointment,\n user,\n symptoms,\n testGroup,\n testConfigurations=[],\n redirect = true,\n overrideCheckin = () => {},\n}) => {\n const handleClose = () => setShow(false);\n\n const appointmentIsToday = appointment.on_demand\n ? true\n : today(appointment.appointment_slot.localized_day);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n const form = document.querySelector('#checkInModal')\n const formData = new FormData(form)\n\n axios({\n url: `/test_groups/${testGroup.id}/appointments/${appointment.id}`,\n method: \"post\",\n data: formData,\n headers: { 'content-type': 'multipart/form-data' },\n })\n .then((response) => {\n (response.status == 200) && toastr.success('Checked In');\n overrideCheckin(response.status == 200);\n window.location.reload()\n });\n };\n\n return (\n {user.date_of_birth} (Age: {user.age})
\n {!appointmentIsToday && (\n \n This appointment is not scheduled for today.\n
\n )}\n \n setShowGuardianModal(!showGuardianModal)}\n size=\"sm\"\n >\n Guardian consent info\n \n \n \n Group consent \n \n \n \n \n {savingGuardianInfo ? (\n Saving...\n ) : (\n \n setShowGuardianModal(false)}\n variant=\"outline-primary\"\n className=\"mx-2\"\n >\n Cancel\n \n {\n if (!guardianInfoEditDisabled) updateGuardianInfo();\n setGuardianInfoEditDisabled(!guardianInfoEditDisabled);\n }}\n className=\"mx-2\"\n >\n {guardianInfoEditDisabled ? 'Edit' : 'Save'}\n \n \n )}\n \n \n
\n ) : \n}\n\nconst AdditionalConsentState = ({consentFormUser}) => {\n const consent = consentFormUser || { consent: null, consented: false }\n const declinedConsent = consent.consent == \"no\";\n\n const renderTooltip = (props) => (\n \n setGuardianForm(\n {...guardianForm,\n guardian_first_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm(\n {...guardianForm,\n guardian_last_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm({...guardianForm, guardian_email: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm({...guardianForm, guardian_phone_number: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n x.value == guardianForm.guardian_relationship_type)}\n options={guardianOptions}\n name=\"consent_forms_user[guardian_relationship_type]\"\n onChange={(e) => {\n setGuardianForm({...guardianForm, guardian_relationship_type: e.value})\n }}\n isDisabled={guardianInfoEditDisabled}\n components={{ IndicatorSeparator: () => null }}\n />\n
\n\n \n \n {showWebcam &&\n
\n \n }\n \n
\n \n {title} consent\n {isMobileView && {badge}}\n
\n \n {consentOption}\n
\n \n \n
\n Consents for {user.first_name} {user.last_name} ({user.date_of_birth})
\n\n
\n \n Request additional consents
\n\n {requestableConsentForms.map((cf) => {\n return (\n {\n if (selectedConsentFormIds.includes(cf.id)) {\n const updatedSelectedConsetForms = selectedConsentFormIds.filter(id => id !== cf.id)\n setSelectedConsentFormIds(updatedSelectedConsetForms)\n } else {\n setSelectedConsentFormIds([...selectedConsentFormIds, cf.id])\n }\n }}\n checked={selectedConsentFormIds.includes(cf.id)}\n label={cf.label}\n />\n )\n })}\n
\n \n setShowModal(false)}\n >\n Close\n \n {\n const response = await bulkRequestConsent();\n if (response.status === 200) {\n toastr.success(\"Additional consents requested\");\n setShowModal(false);\n } else {\n toastr.error(\"Something went wrong\");\n }\n }}\n >\n Request\n \n
\n \n
setShow(!show)}>\n
\n\n {title} {' '}\n { surveyHasErrors &&\n
\n }\n
\n \n
\n {title} {' '}\n { surveyHasErrors &&\n
\n }\n \n \n setAnswers(e.data)} />\n
\n setShow(!show)}>\n \n Consent{' '}\n { !consented &&\n
\n
\n \n Consent{' '}\n { !consented &&\n
\n \n \n \n View\n \n ) : (\n \n \n Sign\n \n\n \n \n \n pushReminderToSign(appointment)}>\n \n \n setShowWebcam(true)} >\n \n fileRef.current.click()}>\n \n \n \n )}\n showWebcam={showWebcam}\n webcamProps={{\n setImageData: (data) => updateWebcamImage(data),\n setShow: setShowWebcam,\n }}\n fileText={fileText}\n fileProps={{\n ref: fileRef,\n id: \"consentFile\",\n name: \"appointment[consent_waiver_image]\",\n onChange: (e) => {\n setFileText(e.target.files[0].name);\n setConsentImage(null);\n },\n }}\n consentImage={consentImage}\n badge={!consented &&
\n {consentImage && \n \n
\n \n
\n )})}\n
\n Required consent
\n\n
\n )}\n\n {additionalConsents(testConfigurations).map(additionalConsent => {\n const consentFormUser = user.consent_forms_users.find(consentFormUser => consentFormUser.consent_form_id == additionalConsent.id);\n const requiredConsent = additionalUserConsents.find(a => a.id == additionalConsent.id)\n return (\n Additional consents
\n {additionalUserConsents.length > 0 &&\nThese consents are required for specific services to be administered
\n }\n\n
\n \n {!isMobileView() && (\n \n
\n \n {additionalConsent.testConfiguration.checkout_name || additionalConsent.testConfiguration.display_name} consent\n {isMobileView() && !!consentFormUser && {additionalConsentState(consentFormUser)}}\n
\n \n {consentFormUser\n ? \n View\n \n : \n Sign\n \n }\n
\n \n {dep_appointment.first_name} {dep_appointment.last_name}\n
\n \n {appointment?.available_test_lanes?.map((testLane) => (\n \n \n {testLane.name}\n \n
\n ))}\n \n \n
\n \n
\n \n
\n setShow(!show)}>\n
\n\n Symptoms\n {Object.values(symptomValues).some(v => v === \"1\" || v === \"true\") && (\n
\n
\n }\n \n
\n Symptoms\n {Object.values(symptomValues).some(v => v === \"1\" || v === \"true\") && (\n \n )}\n
\n \n {user.dependent_appointments &&\n
\n \n {user.first_name} {user.last_name}\n
\n }\n\n {symptoms.map((symptom, idx) => {\n const active =\n symptomValues[symptom.key] === '1' ||\n symptomValues[symptom.key] === 'true';\n return (\n
\n \n
\n )})}\n \n
\n\n {edit ? (\n \n {allTagIds.map((tagId, idx) => (\n inActiveTagIds.includes(tagId) ? (\n isOriginalTag(tagId) &&\n <>\n x.tag_id == tagId).id}\n name={`user[user_tags_attributes][${idx}][id]`}\n />\n \n ) : !isOriginalTag(tagId) &&\n \n ))}\n
\n)};\n\nconst InsuranceSection = ({ user, appointment, testGroup }) => {\n let missingState;\n\n if(testGroup.insurance_information_required) {\n missingState = !user.insurance_policy_holder;\n } else {\n missingState = !(user.insurance_policy_holder || user.drivers_license_number || user.social_security_number);\n }\n\n const [show, setShow] = useState(true);\n const [missing, setMissing] = useState(missingState)\n\n\n return (\n \n
\n \n Tags{' '}\n {activeTags.length > 0 && (\n
\n
\n \n Tags{' '}\n {activeTags.length > 0 && (\n \n )}\n
\n \n {\n const newValues = selected ? selected.map(t => t.value) : [];\n setActiveTags(newValues);\n setInActiveTagIds(originalTagIds.filter(t => !newValues.includes(t)));\n }}\n />\n
\n ) : (\n \n setEdit(!edit)}\n />\n {activeTags.map((tag, idx) => (\n {tag.friendly_name} \n ))}\n
\n )}\n \n
\n\n \n
\n );\n}\n\nexport const CheckInInputs = ({\n appointment,\n user,\n symptoms,\n tests,\n testGroup,\n activeSections = [],\n testConfigurations = [],\n disableAdvanced=false,\n setSurveyMissingAnswer,\n checkOut=false,\n}) => {\n const [checkIn, setCheckIn] = useState(true);\n\n const guardianInformation = appointment['has_guardian_information?'] && (\n \n
\n \n Insurance{' '}\n { missing &&\n
\n
\n \n Insurance{' '}\n { missing &&\n \n )}\n
\n \n
\n \n Guardian Info: {appointment.consented_guardian_name}\n {appointment.consented_guardian_phone_number &&\n `/ ${appointment.consented_guardian_phone_number}`}\n {appointment.consented_guardian_email &&\n `/ ${appointment.consented_guardian_email}`}\n
\n );\n\n const showInsuranceSection = testGroup.insurance_fields_requested.includes('insurance') || testGroup.insurance_fields_required.includes('insurance');\n\n const sections = {\n guardian_information: guardianInformation,\n test_lane: appointment.available_test_lanes?.length > 0 && \n \n \n {sections[section]}\n \n )}\n {!disableAdvanced &&\n \n \n Advanced\n \n \n setCheckIn(!checkIn)}\n >\n
\n \n \n }\n \n );\n};\n\nconst CheckInModal = ({\n setShow,\n show,\n appointment,\n user,\n symptoms,\n testGroup,\n testConfigurations=[],\n redirect = true,\n overrideCheckin = () => {},\n}) => {\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n\n const appointmentIsToday = appointment.on_demand\n ? true\n : today(appointment.appointment_slot.localized_day);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n const form = document.querySelector('#checkInModal')\n const formData = new FormData(form)\n\n axios({\n url: `/test_groups/${testGroup.id}/appointments/${appointment.id}`,\n method: \"post\",\n data: formData,\n headers: { 'content-type': 'multipart/form-data' },\n })\n .then(() => {\n checkIn && toastr.success('Checked In');\n overrideCheckin(checkIn);\n handleClose();\n });\n };\n\n return (\n \n This appointment is not scheduled for today.\n
\n )}\n {modalContent['body']}
\n {onSave && (\n{errorDetails}
}\n\n To disregard this message and administer the service please type\n your initials in the box and select Save anyway.\n
\n\n {groupedErrors.length > 0 && (\n
\n )\n}\n\nconst UserErrors = ({ test_group_id, appointment, user }) => {\n const errorData = user.errors;\n\n if (errorData['phone_number'] || errorData['email'])\n delete errorData['contact_information'];\n\n const errors = Object.keys(errorData).filter(\n (errorKey) => errorData[errorKey].errored,\n );\n\n const hasMissingInformation = errors.some(\n (errorKey) =>\n getError(errorKey, errorData, test_group_id, user, appointment)\n .missingInformation,\n );\n\n const alertClass = errorRequiresConfirmation(user.errors)\n ? 'danger'\n : 'warning';\n\n return (\n \n {groupedErrors.map((errorKey) => {\n const { errorMessage, errorUrl, btnTxt, btnAction } = getCheckoutErrors(\n errorKey,\n test_group_id,\n user,\n appointment,\n );\n\n return (\n
\n )}\n \n This person is missing critical information.\n
\nPlease fix by clicking the links below before proceeding.
\n \n
\n {errorMessage}\n
\n )}\n \n {subtext}\n
\n \n );\n })}\n }\n
Chosen Test Services
\n {appointment.chosen_test_configurations.map((testConfiguration) => (\n}\n
\n \n
\n \n
\n
\n );\n\n const checkoutHeader = (\n \n New visit for {user.first_name} {user.last_name}\n
\n \n\n {user.date_of_birth} (age: {user.age})\n
\n\n
\n \n );\n };\n\n const ServicesModal = ({\n showServicesModal,\n setShowServicesModal,\n selectedTestConfigurationIds,\n setSelectedTestConfigurationIds,\n specificTestConfigurations,\n }) => {\n const [\n newSelectedTestConfigurationIds,\n setNewSelectedTestConfigurationIds,\n ] = useState(selectedTestConfigurationIds);\n const [filteredTestConfigurationIds, setFilteredTestConfigurationIds] =\n useState(specificTestConfigurations.map((tc) => tc.id));\n const [searchInput, setSearchInput] = useState('');\n\n const addTestConfiguration = (testConfigurationId) => {\n if (!newSelectedTestConfigurationIds.includes(testConfigurationId)) {\n const updatedTestConfigurationIds =\n newSelectedTestConfigurationIds.concat(testConfigurationId);\n setNewSelectedTestConfigurationIds(updatedTestConfigurationIds);\n }\n };\n\n const removeTestConfiguration = (testConfigurationId) => {\n const updatedTestConfigurationIds = [...newSelectedTestConfigurationIds];\n const index = updatedTestConfigurationIds.indexOf(testConfigurationId);\n if (index > -1) updatedTestConfigurationIds.splice(index, 1);\n setNewSelectedTestConfigurationIds(updatedTestConfigurationIds);\n };\n\n const processSearchResults = (searchInput) => {\n setSearchInput(searchInput);\n const processedSearchInput = searchInput.trim().toUpperCase();\n const filteredIds = specificTestConfigurations\n .filter((tc) => {\n return (\n tc.checkout_name\n ?.trim()\n .toUpperCase()\n .indexOf(processedSearchInput) > -1 ||\n tc.display_name\n ?.trim()\n .toUpperCase()\n .indexOf(processedSearchInput) > -1\n );\n })\n .map((tc) => tc.id);\n setFilteredTestConfigurationIds(filteredIds);\n };\n\n return (\n \n \n
\n \n
\n );\n })}\n \n {header}\n
\n {test_group.flipper_flags.checkout_services_v2 ? (\n{error} }\n
\n \n {test_group.flipper_flags.checkout_services_v2 ? (\n
Services
\n\n \n
\n );\n }\n })}\n \n {activeTests.length > 0 ? (\n <>\n {activeTests.length} active service\n {activeTests.length > 1 && 's'}\n \n ) : (\n 'No active services'\n )}\n
\n {tests.map((test, index) => {\n const qualified = test.test_configuration.calculate_age_gating_in_days ? (\n withinAgeRange(\n user.age_in_days,\n test.test_configuration.minimum_age_in_days,\n test.test_configuration.maximum_age_in_days,\n )\n ) : (\n withinAgeRange(\n user.age_in_months,\n test.test_configuration.minimum_age_in_months,\n test.test_configuration.maximum_age_in_months,\n )\n );\n if (['vitals_screening', 'hypertension_screening'].includes(test.test_configuration.service_specification)) {\n return (\n \n
\n ) : (\n \n
\n \n {useServicesModalView ? (\n setShowServicesModal(true)}\n className=\"my-2\"\n >\n Add Service\n \n ) : (\n
\n Add services
\n )}\n\n
\n \n switchServicesViewIcon()}\n />\n
\n \n {servicesViewIcon.type === 'column' ? (\n \n {specificTestConfigurations\n .filter((tc) =>\n selectedTestConfigurationIds.includes(tc.id),\n )\n .map((testConfiguration, idx) => {\n return (\n \n setShowAddTests(useServicesModalView)\n }\n addTest={addTest}\n addTests={addTests}\n appointment={appointment}\n testConfiguration={testConfiguration}\n isVaccine={isVaccine(\n testConfiguration.service_specification,\n )}\n consentFormsUsers={\n appointment.user.consent_forms_users\n }\n permission_kinds={permission_kinds}\n editable_test_types={editable_test_types}\n />\n \n );\n })}\n
\n ) : (\n
\n \n {specificTestConfigurations\n .filter((tc) =>\n selectedTestConfigurationIds.includes(tc.id),\n )\n .map((testConfiguration, idx) => {\n return (\n \n \n setShowAddTests(useServicesModalView)\n }\n addTest={addTest}\n addTests={addTests}\n appointment={appointment}\n testConfiguration={testConfiguration}\n isVaccine={isVaccine(\n testConfiguration.service_specification,\n )}\n consentFormsUsers={\n appointment.user.consent_forms_users\n }\n permission_kinds={permission_kinds}\n editable_test_types={editable_test_types}\n />\n \n \n );\n })}\n
\n )}\n \n {test_group.checkout_options.includes(\n 'enable_print_all_vaccines',\n ) && (\n
\n \n {hasInvalidTestUid && (\n \n \n
\n )}\n \n {spinner ? (\n \n setShowAddTests(!showAddTests)}\n aria-expanded={showAddTests}\n className=\"my-2\"\n block\n >\n {\n saveRecordsButtonOnClick();\n showSpinner(true);\n }}\n variant=\"primary\"\n data-test-hook=\"save\"\n className=\"my-2\"\n block\n >\n Complete checkout\n \n {surveyMissingAnswer && (\n
\n )}\n
\n {confirmationError && (\n \n Please complete the required survey questions above.\n
\n )}\n {!unsavedChanges && (\n No changes made
\n )}\n \n \n setIsGuardianDetailsVisible(!isGuardianDetailsVisible)}\n style={{\n color: 'black',\n textDecoration: 'underline',\n cursor: 'pointer',\n }}\n >\n {isGuardianDetailsVisible ? 'Hide guardian details' : 'Show guardian details'}\n
\n\n {isGuardianDetailsVisible && (\n <>\n {consentedGuardianName && (\n \n
\n )}\n {consentedGuardianPhoneNumber && (\n \n
\n )}\n {consentedGuardianEmail && (\n \n
\n )}\n \n )}\n \n );\n};\n\nexport default GuardianInformation;","import React, { useState, useRef } from 'react';\nimport styled from 'styled-components';\nimport {\n Row,\n Col,\n Image,\n Dropdown,\n OverlayTrigger,\n Tooltip,\n Button,\n Modal,\n} from 'react-bootstrap';\nimport ModalHeader from '../common/components/ModalHeader';\nimport Select from 'react-select';\nimport axios from 'axios';\nimport '../common/locales/i18n';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleExclamation, faCheck, faEnvelope, faCircleXmark, faEllipsisH } from '@fortawesome/pro-regular-svg-icons';\nimport { dataURItoBlob } from '../common/utils';\nimport Webcam from \"../common/components/Webcam\";\nimport { Camera, Digital, Manage, Upload } from '../common/components/Icons';\nimport { pushReminderToSign, additionalConsents } from '../Participants/components/participants/CheckInModal';\nimport GuardianInformation from './GuardianInformation';\n\nconst guardianOptions = [\n { value: 'consented_by_parent_guardian', label: 'Parent / Guardian' },\n {\n value: 'consented_by_decision_maker',\n label: 'Authorized Medical Decision-maker',\n },\n {\n value: 'consented_by_guardian_verbal',\n label: 'Registrar with Guardian (verbal consent obtained)',\n },\n {\n value: 'consented_by_registrar',\n label: 'Registrar (verbal consent obtained)',\n },\n {\n value: 'consented_by_other',\n label: 'Other'\n }\n];\n\nexport const buildGuardianConsent = (user, appointment, testGroup) => {\n const [guardianForm, setGuardianForm] = useState(appointment);\n const [guardianInfoEditDisabled, setGuardianInfoEditDisabled] = useState(true);\n const [savingGuardianInfo, setSavingGuardianInfo] = useState(false);\n const [showGuardianModal, setShowGuardianModal] = useState(false);\n const onHide = () => setShowGuardianModal(false);\n const updateGuardianInfo = () => {\n setSavingGuardianInfo(true);\n\n const user_consent_form_id = appointment.user_consent_form_id;\n const path = `/test_groups/${testGroup.id}/participants/${user.id}/consent_forms_users`;\n\n if (user_consent_form_id) {\n // .json to prevent redirection\n axios.put(`${path}/${user_consent_form_id}.json`, guardianForm, {}).then(() => {\n setSavingGuardianInfo(false);\n });\n } else {\n axios.post(path, guardianForm).then(() => {\n setSavingGuardianInfo(false);\n });\n }\n };\n\n return (user.errors.guardian_consented || appointment.guardian_name) ? (\n \n setShowGuardianModal(!showGuardianModal)}\n size=\"sm\"\n >\n Guardian consent info\n \n \n \n Group consent \n \n \n \n \n {savingGuardianInfo ? (\n Saving...\n ) : (\n \n setShowGuardianModal(false)}\n variant=\"outline-primary\"\n className=\"mx-2\"\n >\n Cancel\n \n {\n if (!guardianInfoEditDisabled) updateGuardianInfo();\n setGuardianInfoEditDisabled(!guardianInfoEditDisabled);\n }}\n className=\"mx-2\"\n >\n {guardianInfoEditDisabled ? 'Edit' : 'Save'}\n \n \n )}\n \n \n
\n ) : \n}\n\nconst AdditionalConsentState = ({consentFormUser}) => {\n const consent = consentFormUser || { consent: null, consented: false }\n const declinedConsent = consent.consent == \"no\";\n\n const renderTooltip = (props) => (\n \n setGuardianForm(\n {...guardianForm,\n guardian_first_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm(\n {...guardianForm,\n guardian_last_name: e.target.value,\n })}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm({...guardianForm, guardian_email: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n setGuardianForm({...guardianForm, guardian_phone_number: e.target.value})}\n disabled={guardianInfoEditDisabled}\n />\n
\n\n \n x.value == guardianForm.guardian_relationship_type)}\n options={guardianOptions}\n name=\"consent_forms_user[guardian_relationship_type]\"\n onChange={(e) => {\n setGuardianForm({...guardianForm, guardian_relationship_type: e.value})\n }}\n isDisabled={guardianInfoEditDisabled}\n components={{ IndicatorSeparator: () => null }}\n />\n
\n\n \n \n {showWebcam &&\n
\n \n }\n \n
\n \n {title} consent\n {isMobileView && {badge}}\n
\n \n
\n \n {!consented && (\n \n Pending signature\n \n )}\n {consentOption}\n
\n \n \n
\n \n {\n ![IAM_POLICYHOLDER, null, undefined, \"\"].includes(formAction[policyHolderKey]) ? (\n
\n );\n};\n\nexport default PolicyHolderFields;\n","import React, { useContext, useState, useRef } from 'react';\nimport '../../../common/locales/i18n';\nimport { useTranslation } from 'react-i18next';\nimport CreatableSelect from 'react-select/creatable';\nimport ErrorMessage from '../../../common/components/ErrorMessage';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport PolicyHolderFields from './PolicyHolderFieldsV2';\nimport { buildCustomizedLabel } from '../../../common/locales/langs';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck } from '@fortawesome/pro-regular-svg-icons';\nimport { Row, Col, Image, Dropdown } from 'react-bootstrap';\nimport Select from 'react-select';\nimport Webcam from '../../../common/components/Webcam';\nimport { Camera, Upload } from '../../../common/components/Icons';\nimport { dataURItoBlob } from '../../../common/utils';\n\nconst PolicyInformationFields = ({\n setFieldValue,\n values,\n errors,\n handleChange,\n secondary,\n policyHolderNames,\n names={\n insuranceCardFront: \"insurance_card_front\",\n insuranceCardBack: \"insurance_card_back\",\n insuranceCompany: \"insurance_company\",\n insuranceId: \"insurance_id\",\n insuranceGroupNumber: \"insurance_group_number\",\n insurancePolicyHolder: \"insurance_policy_holder\",\n }\n}) => {\n const { t, i18n } = useTranslation();\n const { formAction, setFormAction, testGroup } = useContext(InsuranceContext);\n const {\n insuranceCardFront,\n insuranceCardBack,\n insuranceCompany,\n insuranceId,\n insuranceGroupNumber,\n insurancePolicyHolder,\n } = names\n const insuranceCompanyOptions = testGroup.insurance_companies.map(v => ({ label: v, value: v }))\n const announceFileUpload = (file, nodeId) => {\n const announceFileUploadRoot = document.getElementById(nodeId);\n if (file === undefined) {\n announceFileUploadRoot.style.visibility = 'hidden';\n } else {\n announceFileUploadRoot.style.visibility = 'visible';\n announceFileUploadRoot.focus();\n }\n }\n const [insuranceFrontName, setInsuranceFrontName] = useState(null);\n const [insuranceBackName, setInsuranceBackName] = useState(null);\n const [insuranceImageFront, setInsuranceImageFront] = useState(values.user[insuranceCardFront]);\n const [insuranceImageBack, setInsuranceImageBack] = useState(values.user[insuranceCardBack]);\n const [insuranceImageSide, setInsuranceImageSide] = useState(null);\n const [showWebcam, setShowWebcam] = useState(false);\n const fileFrontRef = useRef(null);\n const fileBackRef = useRef(null);\n\n const updateWebcamImage = (img) => {\n let insuranceCardSide;\n let container = new DataTransfer();\n container.items.add(dataURItoBlob(img, true));\n\n if (insuranceImageSide == \"front\"){\n setInsuranceImageFront(img);\n insuranceCardSide = insuranceCardFront;\n setInsuranceFrontName(container.files[0][\"name\"]);\n } else {\n setInsuranceImageBack(img);\n insuranceCardSide = insuranceCardBack;\n setInsuranceBackName(container.files[0][\"name\"]);\n }\n\n setFieldValue(`user[${insuranceCardSide}]`, img);\n document.getElementById(`${insuranceImageSide}-of-card${insuranceCardSide}`).files = container.files;\n announceFileUpload(container.files[0], `announce-card-${insuranceImageSide}-upload${insuranceCardSide}`);\n setShowWebcam(false);\n }\n\n const errorMessage = (error) => (\n errors[error] && \n \n setFormAction({...formAction, primaryMemberFirstName: s.target.value})}\n onChange={(s) => setFieldValue(`user[${primaryMemberFirstName}]`, s.target.value)}\n aria-label={t('registration.insurance_policy_holder.policy_first_name')}\n aria-invalid={!!errors[primaryMemberFirstName]}\n id=\"primary_first_name\"\n />\n {errors[primaryMemberFirstName] && setFormAction({...formAction, primaryMemberLastName: s.target.value})}\n onChange={(s) => setFieldValue(`user[${primaryMemberLastName}]`, s.target.value)}\n aria-label={t('registration.insurance_policy_holder.policy_last_name')}\n aria-invalid={!!errors[primaryMemberLastName]}\n id=\"primary_last_name\"\n />\n {errors[primaryMemberLastName] &&
\n
\n ) : null\n }\n \n
\n {errors[dob] && \n {t('registration.insurance_policy_holder.policy_dob')}\n
\n \n \n setFieldValue(`user[${insuranceCompany}]`, s.value)}\n options={insuranceCompanyOptions}\n formatCreateLabel={(value) => `Other - click here to add: ${value}`}\n aria-label={t('registration.insurance_information.company_name')}\n className={errors[insuranceCompany] && 'is-invalid'}\n />\n {errorMessage(insuranceCompany)}\n \n setFormAction({...formAction, insuranceId: s.target.value})}\n onChange={(s) => setFieldValue(`user[${insuranceId}]`, s.target.value)}\n aria-label={t('registration.insurance_information.id_number')}\n aria-invalid={!!errorMessage(insuranceId)}\n />\n {errorMessage(insuranceId)}\n \n
\n \n setFormAction({...formAction, insuranceGroupNumber: s.target.value})}\n onChange={(s) => setFieldValue(`user[${insuranceGroupNumber}]`, s.target.value)}\n aria-label={t('registration.insurance_information.group_number')}\n />\n \n {\n setFieldValue(`user[${insurancePolicyHolder}]`, s.value);\n if (secondary) {\n setFormAction({...formAction, secondaryPolicyHolder: s.value});\n } else {\n setFormAction({...formAction, policyHolder: s.value});\n }\n }}\n options={testGroup.policy_holder_options.map((policyHolder) => {\n return { value: policyHolder, label: t(buildCustomizedLabel(testGroup.population, `registration.insurance_policy_holder.${policyHolder}`)) }\n })}\n aria-label={t('registration.insurance_policy_holder.question')}\n />\n \n
\n \n
\n\n \n \n {showWebcam &&\n
\n \n }\n \n \n \n updateWebcamImage(data)}\n setShow={(e) => setShowWebcam(e)}\n style={{width: 350, height: 300, backgroundColor: \"black\"}}\n />\n
\n \n {formAction.requestDriversLicense && (\n {\n setFormAction({\n ...formAction,\n showLicenseInfo: false,\n showSsnInfo: false,\n showNoId: true,\n });\n }}\n checked={formAction.showNoId || false}\n label='No identification'\n radio\n />\n )}\n
\n );\n};\n\nexport default NoInsuranceFields;\n","import React, { useContext, useEffect } from 'react';\nimport '../../../common/locales/i18n';\nimport { useTranslation } from 'react-i18next';\nimport { buildCustomizedLabel } from '../../../common/locales/langs';\nimport FabrxCheckbox from '../../../Registration/primary/FabrxCheckbox';\nimport ErrorMessage from '../../../common/components/ErrorMessage';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport PolicyInformationFields from './PolicyInformationFieldsV2';\nimport NoInsuranceFields from './NoInsuranceFieldsV2';\nimport * as SurveyOriginal from \"survey-react\";\nimport { Model } from \"survey-core\";\nimport CheckboxCard from '../../../common/components/CheckBoxCard';\nimport { Row, Col } from 'react-bootstrap';\n\nconst INSURANCE_REQUIRED_FIELDS = [\"insurance_company\", \"insurance_id\"];\nconst MEMBER_NAME_FIELDS = [\"insurance_primary_member_first_name\", \"insurance_primary_member_last_name\"];\nconst MEMBER_DATE_OF_BIRTH_FIELDS = [\n 'insurance_primary_member_date_of_birth(2i)',\n 'insurance_primary_member_date_of_birth(1i)',\n 'insurance_primary_member_date_of_birth(3i)',\n];\nconst SECONDARY_INSURANCE_FIELDS = [\n \"insurance_secondary_company\",\n \"insurance_secondary_id\",\n \"insurance_secondary_policy_holder\"\n];\nconst SECONDARY_MEMBER_FIELDS = [\"insurance_secondary_member_first_name\", \"insurance_secondary_member_last_name\"];\nconst SECONDARY_DATE_OF_BIRTH_FIELDS = [\n 'insurance_secondary_member_date_of_birth(2i)',\n 'insurance_secondary_member_date_of_birth(1i)',\n 'insurance_secondary_member_date_of_birth(3i)',\n]\nconst IAM_POLICYHOLDER = 'i_am';\n\nconst INSURANCE_CARD_FIELDS = {\n primary: [\"insurance_card_front\"],\n secondary: [\"insurance_secondary_card_front\"]\n}\n\nexport const validateInsuranceForm = (formAction) => (values) => {\n const errors = {};\n const submitError = (valueKey, errorKey) => {\n if (!values.user[valueKey]) errors[errorKey ? errorKey : valueKey] = 'registration.errors.required';\n }\n\n const {\n user: {\n insurance_status: insuranceStatus,\n driver_license_number: driverLicense,\n driver_license_state: driverLicenseState,\n social_security_number: socialSecurity,\n },\n test_group: {\n show_only_insurance_survey: showOnlySurveyForWhenNoInsurance,\n insurance_fields_required: requiredFields,\n use_new_surveyjs_validation: newSurveyValidation,\n insurance_survey: insuranceSurvey,\n flipper_flags: flipperFlags,\n },\n } = values;\n if (!(values.user && insuranceStatus !== undefined)) {\n errors.insurance_status = 'registration.errors.option_required';\n }\n if (newSurveyValidation && Object.keys(insuranceSurvey || {}).length > 0) {\n let model;\n if (flipperFlags.upgraded_surveyjs) {\n model = new Model(insuranceSurvey);\n } else {\n model = new SurveyOriginal.Model(insuranceSurvey);\n }\n let data = values.appointment.insurance_answers\n model.data = data || {};\n if (model.hasErrors()) errors.questionnaire = 'registration.errors.survey_unanswered';\n }\n\n if (requiredFields.includes('insurance_card')) {\n INSURANCE_CARD_FIELDS.primary.map(key => submitError(key))\n }\n if (formAction.showInsuranceInformation) {\n INSURANCE_REQUIRED_FIELDS.concat(\"insurance_policy_holder\").map(key => submitError(key));\n\n if (formAction.policyHolder !== IAM_POLICYHOLDER) {\n MEMBER_NAME_FIELDS.map(key => submitError(key));\n MEMBER_DATE_OF_BIRTH_FIELDS.map(key => submitError(key, \"date_of_birth\"));\n }\n if (formAction.showSecondary) {\n SECONDARY_INSURANCE_FIELDS.map(key => submitError(key));\n if (formAction.secondaryPolicyHolder !== IAM_POLICYHOLDER) {\n SECONDARY_MEMBER_FIELDS.map(key => submitError(key));\n SECONDARY_DATE_OF_BIRTH_FIELDS.map(key => submitError(key, \"secondary_date_of_birth\"));\n }\n if (requiredFields.includes('insurance_card')) {\n INSURANCE_CARD_FIELDS.secondary.map(key => submitError(key))\n }\n }\n } else {\n if (\n !driverLicense &&\n !socialSecurity &&\n formAction.participantHasID &&\n !showOnlySurveyForWhenNoInsurance\n )\n errors.no_insurance = 'registration.errors.field_required';\n if (driverLicense && !driverLicenseState)\n errors.driver_license_state = 'registration.errors.field_required';\n }\n return errors;\n};\n\nconst InsuranceForm = ({ values, errors, handleChange, setFieldValue }) => {\n const { t, i18n } = useTranslation();\n const { testGroup, formAction, setFormAction } = useContext(InsuranceContext);\n\n useEffect(() => {\n // To be able to submit insurance form from checkout page\n setFormAction({\n ...formAction,\n insuranceCompany: values.user.insurance_company,\n insuranceCardFront: values.user.insurance_card_front,\n insuranceCardBack: values.user.insurance_card_back,\n insuranceSecondaryCardFront: values.user.insurance_secondary_card_front,\n insuranceSecondaryCardBack: values.user.insurance_secondary_card_back,\n driverLicense: values.user.driver_license,\n insuranceSecondaryCompany: values.user.insurance_secondary_company,\n });\n }, [\n values.user.insurance_company,\n values.user.insurance_card_front,\n values.user.insurance_card_back,\n values.user.insurance_secondary_card_front,\n values.user.insurance_secondary_card_back,\n values.user.driver_license,\n values.user.insurance_secondary_company,\n ]);\n\n useEffect(() => {\n if (formAction.requireInsurance) setFieldValue('user.insurance_status', 0);\n }, [formAction]);\n\n const noInsuranceSubmitButton = () => {\n const showNoInsuranceForm = formAction.requestDriversLicense ||\n Object.keys(values.test_group.insurance_survey || {}).length > 0 ||\n formAction.requestSocialSecurityNumber;\n\n return (\n \n {\n setFormAction({\n ...formAction,\n showLicenseInfo: true,\n showSsnInfo: false,\n showNoId: false,\n });\n }}\n checked={formAction.showLicenseInfo || values.user.driver_license_number || false}\n label={`Driver's license or state ID # ${formAction.requireDriversLicense ? '*' : ''}`}\n radio\n />\n {(formAction.showLicenseInfo || values.user.driver_license_number) && (\n
\n )}\n {formAction.requestSocialSecurityNumber && (\n \n \n option.value === values.user.driver_license_state,\n )}\n onChange={(s) => {\n setFormAction({ ...formAction, driverLicenseState: s.value });\n setFieldValue('user.driver_license_state', s.value);\n }}\n options={usStateOptions}\n aria-label={t('no_insurance_information.state')}\n className={errors.driver_license_state && 'is-invalid'}\n />\n \n
\n
\n )}\n \n {\n setFieldValue('user[driver_license]', e.currentTarget.files[0]);\n setFileName(e.currentTarget.files[0][\"name\"])\n announceFileUpload(e.currentTarget.files[0], 'announce-card-front-upload-license');\n }}\n name={`user[driver_license]`}\n accept=\"image/*;capture=camera\"\n id=\"driver-license-file-upload\"\n style={{visibility: \"hidden\", width: \"0px\"}}\n />\n \n \n \n
\n \n {\n setFormAction({\n ...formAction,\n showLicenseInfo: false,\n showSsnInfo: true,\n showNoId: false,\n });\n }}\n checked={formAction.showSsnInfo || values.user.social_security_number || false}\n label={`Social security # ${formAction.requireSocialSecurityNumber ? '*' : ''}`}\n radio\n />\n {(formAction.showSsnInfo || values.user.social_security_number) && (\n \n
\n )}\n
\n )}\n {!formAction.requireDriversLicense && !formAction.requireSocialSecurityNumber && (\n \n \n {errors.insurance_status && \n {\n setFieldValue('user.insurance_status', 0);\n setFormAction({\n ...formAction,\n showInsuranceInformation: true,\n showNonInsuranceInformation: false,\n });\n }}\n />\n \n {!formAction.requireInsurance && (\n
\n {formAction.showInsuranceInformation && showInsuranceInformationFields()}\n \n\n {formAction.showNonInsuranceInformation &&\n (formAction.requestDriversLicense || formAction.requestSocialSecurityNumber) &&\n
\n );\n};\n\nexport default InsuranceForm;\n","import React, { useState, useEffect } from 'react';\nimport { Formik } from 'formik';\nimport InsuranceContext from '../../../Insurance/contexts/InsuranceContext';\nimport InsuranceForm, { validateInsuranceForm } from './InsuranceFormV2';\n\nconst IAM_POLICYHOLDER = 'i_am';\n\nconst Insurance = (props) => {\n const [\n formAction,\n setFormAction,\n testGroup\n ] = [\n props.formAction,\n props.setFormAction,\n props.test_group\n ];\n\n useEffect(() => {\n [\n ['insurance_status', formAction.showInsuranceInformation ? 0 : 1],\n [\n 'insurance_primary_member_date_of_birth(1i)',\n formAction.memberBirthYear,\n ],\n ['insurance_primary_member_date_of_birth(3i)', formAction.memberBirthDay],\n [\n 'insurance_primary_member_date_of_birth(2i)',\n formAction.memberBirthMonth,\n ],\n [\n 'insurance_secondary_member_date_of_birth(1i)',\n formAction.memberSecondaryBirthYear,\n ],\n [\n 'insurance_secondary_member_date_of_birth(3i)',\n formAction.memberSecondaryBirthDay,\n ],\n [\n 'insurance_secondary_member_date_of_birth(2i)',\n formAction.memberSecondaryBirthMonth,\n ]\n ].map((field) => {\n $(`input[name=\"user[${field[0]}]\"][type=hidden]`).remove();\n $('')\n .attr('type', 'hidden')\n .attr('name', `user[${field[0]}]`)\n .attr('value', field[1])\n .appendTo('#checkInModal, #checkInForm');\n });\n }, [formAction.memberBirthMonth,\n formAction.memberBirthYear,\n formAction.memberBirthDay,\n formAction.memberSecondaryBirthMonth,\n formAction.memberSecondaryBirthYear,\n formAction.memberSecondaryBirthDay,\n formAction.showInsuranceInformation,\n ]\n );\n\n const insuranceView = {\n view: (props) => \n \n \n {(formikProps) => (\n
\n )}\n \n \n \n \n \n {insuranceView.view(formikProps)}\n
\n \n {allConsentsSigned ? (\n <>All consents signed\n ) : (\n <>{`${signedConsentCount} of ${totalConsentCount} consents signed`}\n )}\n
\n );\n\n return (\n {appointment['has_guardian_information?'] ? \"Guardian\" : \"Participant\"} has not signed the current active consent.
\n )}\n\n {dep_appointment.first_name} {dep_appointment.last_name}\n
\n \n {appointment?.available_test_lanes?.map((testLane) => (\n \n \n {testLane.name}\n \n
\n ))}\n \n \n
\n \n
\n \n
\n Tags assign someone into a population.
\nAvailable tags
\n\n {activeTags.map((tag) => {\n const label = selectTagOptions.find(x => x.value == tag)?.label;\n return (\n \n {label}\n onRemove(tag)}\n path=\"/images/icons/icon-x.svg\"\n style={{ width: 14 }}\n />\n
\n );\n })}\n \n )}\n {totalTags.map((tagId, idx) => (\n inActiveTags.includes(tagId) ? (\n isOriginalTag(tagId) &&\n <>\n \n \n \n {sections[section]}\n \n )}\n {!disableAdvanced &&\n \n \n Advanced\n \n \n setCheckIn(!checkIn)}\n >\n
\n \n \n }\n \n );\n};\n\nconst CheckInModal = ({\n setShow,\n show,\n appointment,\n user,\n symptoms,\n testGroup,\n testConfigurations=[],\n redirect = true,\n overrideCheckin = () => {},\n}) => {\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n\n const appointmentIsToday = appointment.on_demand\n ? true\n : today(appointment.appointment_slot.localized_day);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n const form = document.querySelector('#checkInModal')\n const formData = new FormData(form)\n\n axios({\n url: `/test_groups/${testGroup.id}/appointments/${appointment.id}`,\n method: \"post\",\n data: formData,\n headers: { 'content-type': 'multipart/form-data' },\n })\n .then(() => {\n checkIn && toastr.success('Checked In');\n overrideCheckin(checkIn);\n handleClose();\n });\n };\n\n return (\n \n This appointment is not scheduled for today.\n
\n )}\n {appointment.follow_up_time && (\n Follow Up: {appointment.follow_up_time}
\n )}\n \n {icon && \n {label}\n
\n \n);\n\nconst SidebarItem = ({\n keyName,\n data,\n isActive,\n accordionState,\n toggleAccordion,\n scrollToSection,\n sidebarKeys,\n activeSection,\n setActiveSection,\n}) => (\n \n
\n);\n\nconst SidebarSubItem = ({\n data,\n isActive,\n keyName,\n scrollToSection,\n setActiveSection\n}) => (\n \n {isActive && }\n (data.isAccordion ? toggleAccordion(keyName) : scrollToSection(keyName))}\n >\n
\n {data.isAccordion && accordionState[keyName] && (\n \n {Object.keys(data.subtabs)\n .filter((subKey) => sidebarKeys.includes(subKey))\n .map((subKey) => (\n
\n )}\n \n {isActive && }\n {\n scrollToSection(keyName);\n setActiveSection(keyName);\n }}\n >\n
\n);\n\nconst CheckoutSideBar = ({ activeSection, setActiveSection, sidebarKeys }) => {\n const [accordionState, setAccordionState] = useState({ survey: false });\n\n const toggleAccordion = (key) => {\n setAccordionState((prev) => ({ ...prev, [key]: !prev[key] }));\n };\n\n const scrollToSection = (key) => {\n const headerHeight = document.getElementById('header-container').offsetHeight;\n const section = document.getElementById(`${key}_section_container`);\n const sectionPosition = section.getBoundingClientRect().top + window.pageYOffset;\n const offsetPosition = sectionPosition - headerHeight - 180;\n\n window.scrollTo({ top: offsetPosition, behavior: 'smooth' });\n };\n\n return (\n \n {testGroup.name}\n
\n \n {user.full_name}\n {!!user.pronoun && ({user.pronoun})}\n
\n \n {user.date_of_birth} ({user.age} yrs)\n
\n \n \n \n
\n \n \n );\n};\n\nconst CheckoutPage = ({\n test_group,\n test_configurations,\n appointment,\n current_user,\n symptoms,\n vaccine_service_specifications,\n permission_kinds,\n editable_test_types,\n}) => {\n const [tests, _setTests] = useState(sortTests(appointment.tests));\n const setTests = (tests) => _setTests(sortTests(tests));\n const [unsavedChanges, setUnsavedChanges] = useState(false);\n const [showErrorModal, setShowErrorModal] = useState(false);\n const [unsavedUidByTestConfigurationId, setUnsavedUidByTestConfigurationId] =\n useState({});\n const [surveyMissingAnswer, setSurveyMissingAnswer] = useState(false);\n\n const specificTestConfigurations = test_configurations.filter(\n (tc) => tc.service_specification !== 'rapid_general',\n );\n const useServicesModalView = specificTestConfigurations.length >= 9;\n\n const [currentAdministratorName, setCurrentAdministratorName] = useState(null);\n const [currentAdministratorDegree, setCurrentAdministratorDegree] = useState(null);\n const [currentAdministratorInitials, setCurrentAdministratorInitials] = useState(null);\n\n const { user } = appointment;\n const [showAddTests, setShowAddTests] = useState(\n tests.length === 0 || useServicesModalView,\n );\n\n const isVaccine = (specification) => {\n return vaccine_service_specifications.includes(specification);\n };\n\n const updateTest = (test) => {\n setUnsavedChanges(true);\n let index = tests.map((t) => t.id).indexOf(test.id);\n\n // Concat the front, with the new test with the back\n setTests(\n tests\n .slice(0, index)\n .concat([test])\n .concat(tests.slice(index + 1, tests.length)),\n );\n };\n\n const redirectToLink = () => {\n const queryString = window.location.search;\n const urlParams = new URLSearchParams(queryString);\n const redirectTo = urlParams.get('redirect_to');\n\n if (redirectTo) {\n return redirectTo;\n }\n return `/test_groups/${test_group.slug}/participants`;\n };\n\n const saveDataToLocalStorage = () => {\n // sticky message that is displayed after saving and redirecting to participants page\n const orderAdministeredMessage = `\n Order administered for ${user.first_name} ${user.last_name}.\n Need to make a change? Click here to return to ${user.first_name}\n ${user.last_name}'s checkout.`;\n\n localStorage.setItem('orderAdministeredMessage', orderAdministeredMessage);\n };\n\n const submitTests = ({\n tests,\n bypassInitials = null,\n skipCheckout = true,\n }) => {\n const body = {\n appointment_id: appointment.id,\n bypassed_consent: !!bypassInitials,\n skip_checkout: skipCheckout,\n tests,\n };\n return axios.post(\n `/test_groups/${test_group.slug}/tests_batch_create`,\n body,\n );\n };\n\n const handleCheckinSubmit = () => {\n const form = document.querySelector('#checkInForm');\n const formData = new FormData(form);\n\n axios({\n url: `/test_groups/${test_group.id}/appointments/${appointment.id}`,\n method: \"post\",\n data: formData,\n headers: { 'content-type': 'multipart/form-data' },\n });\n };\n\n useEffect(() => {\n function setSidebarHeight() {\n const sidebar = document.getElementById('checkout-sidebar');\n const viewContainer = document.getElementById('checkout-view-container');\n\n if (window.innerWidth < 992) {\n viewContainer.style.width = `100%`;\n viewContainer.style.marginLeft = `0px`;\n } else if (!!sidebar) {\n viewContainer.style.width = `calc(100% - ${sidebar.offsetWidth}px)`;\n viewContainer.style.marginLeft = `223px`;\n }\n }\n\n const throttledSetSidebarHeight = throttle(setSidebarHeight, 200);\n\n setSidebarHeight();\n window.addEventListener('resize', throttledSetSidebarHeight);\n window.addEventListener('scroll', throttledSetSidebarHeight);\n\n return () => {\n window.removeEventListener('resize', throttledSetSidebarHeight);\n window.removeEventListener('scroll', throttledSetSidebarHeight);\n throttledSetSidebarHeight.cancel(); // Cancel any pending execution\n };\n }, []);\n\n\n const checkinInCheckoutOptions = test_group.checkout_options\n .concat(test_group.on_demand_only ? ['consent'] : [])\n .filter(onlyUnique)\n .sort((a, b) => SECTIONS_IN_ORDER.indexOf(a) - SECTIONS_IN_ORDER.indexOf(b));\n\n const saveTests = (\n force,\n redirectAfterSubmit = true,\n bypassInitials = null,\n ) => {\n // Build the tests that are not saved yet.\n const vaccinesWithoutAdministered = tests\n .filter((t) => isVaccine(t.test_configuration.service_specification))\n .filter((t) => t.administered === null);\n if (vaccinesWithoutAdministered.length > 0 && !force) {\n // Show modal\n setShowErrorModal(true);\n return;\n }\n\n // Update tests that do not show the administer button\n tests\n .filter((t) => t.test_configuration.hide_administered_button)\n .map((t) => updateTest({ ...t, administered: true }));\n\n let unsavedTests = [];\n for (const [testConfigurationId, uid] of Object.entries(\n unsavedUidByTestConfigurationId,\n )) {\n if (uid && uid.length > 4) {\n unsavedTests.push({\n test_configuration_id: testConfigurationId,\n appointment_id: appointment.id,\n uid: uid,\n });\n }\n }\n setUnsavedChanges(false);\n\n const appointmentId =\n appointment.follow_up_appointment_id || appointment.id;\n\n if (checkinInCheckoutOptions.length > 0) handleCheckinSubmit();\n\n const anyTestGotAdministered = tests.some((test) => test['administered']);\n\n submitTests({ tests: tests.concat(unsavedTests), bypassInitials, skipCheckout: false })\n .then((_response) => {\n if (redirectAfterSubmit) {\n if (anyTestGotAdministered) saveDataToLocalStorage();\n location.href = redirectToLink();\n }\n })\n .catch((error) => {\n alert('Something went wrong: ' + error.response.data.message);\n });\n };\n\n const [redirectCallbackPath, setRedirectCallbackPath] = useState(null);\n\n useEffect(() => {\n if (redirectCallbackPath) {\n location.href = redirectCallbackPath;\n }\n }, [redirectCallbackPath]);\n\n useEffect(() => {\n const bodyTag = document.querySelector('body');\n bodyTag.style.backgroundColor = '#FBFBFB';\n }, []);\n\n const [submitCheckoutAttempted, setSubmitCheckoutAttempted] = useState(false);\n const { contentRef } = StickyHeader();\n\n const [sidebarKeys, setSidebarKeys] = useState([]);\n const [activeSection, setActiveSection] = useState(sidebarKeys[0]);\n\n useEffect(() => {\n function setActiveSectionOnMouseEnter(event) {\n // to set the active section based on mouse enter\n const sectionId = event.currentTarget.id;\n const sectionKey = sectionId?.replace('_section_container', '');\n setActiveSection(sectionKey);\n }\n\n const sections = document.querySelectorAll('.checkout-section');\n sections.forEach((section) => {\n section.addEventListener('mouseenter', setActiveSectionOnMouseEnter);\n });\n\n return () => {\n sections.forEach((section) => {\n section.removeEventListener('mouseenter', setActiveSectionOnMouseEnter);\n });\n };\n }, []);\n\n return (\n \n
\n );\n};\n\nCheckoutPage.propTypes = checkoutShape;\n\nexport default CheckoutPage;\n","import React, { useState } from 'react';\nimport { Button } from 'react-bootstrap';\nimport Modal from 'react-bootstrap/Modal';\nimport ModalHeader from '../../common/components/ModalHeader';\nimport { Row, Col } from 'react-bootstrap';\n\nconst logAttemptRequest = ({ id: test_id, test_group: { id } }) => {\n const notes = $(`#notes-${test_id}`).val();\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n case_report_history: {\n test_id,\n case_report_status: 'attempted_contact',\n case_report_notes: notes !== '' ? notes : null,\n },\n }),\n };\n\n return fetch(`/test_groups/${id}/case_reports`, requestOptions);\n};\n\nconst logAttempt = (test, attempted, setAttempted, setLogging, setOpen) => {\n setLogging(true);\n logAttemptRequest(test).then((response) => {\n if (response.status === 200) {\n setAttempted(attempted !== null ? attempted + 1 : 0);\n toastr.success('Attempt logged');\n\n setOpen(false);\n } else {\n toastr.error('Failed to log attempt');\n }\n setLogging(false);\n });\n};\n\nconst LogAttemptModal = ({\n test,\n open = false,\n setOpen,\n attempted,\n setAttempted,\n}) => {\n const [logging, setLogging] = useState(false);\n const onHide = () => setOpen(false);\n\n return (\n \n
\n \n
\n \n
\n \n logAttempt(test, attempted, setAttempted, setLogging, setOpen)\n }\n >\n Log\n \n
\n \n { groupName } - { location }\n
\n { groupName } - { location }\n
\n { attempted !== null ? `${attempted} attempt(s)` : null }\n
\n { test.user.date_of_birth }\n
\n { age(test.user.date_of_birth) } years\n
\n \n \n \n
\n \n\n
\n );\n};\n\nexport default CaseReports;\n","import React from \"react\";\nimport { OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport axios from 'axios';\n\nconst TooltipIcon = ({ placement = \"bottom\", tooltip, iconClass, className = \"\", style = {} }) => (\n | \n | \n Barcode | \nStatus | \nAssignment | \nStatus | \nResult | \nPreviously positive | \nResulted at | \nSymptoms | \n\n | Name | \nState | \nPhone number | \nUpdate | \nCase report | \nExternal links | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| \n \n We could not find any tests matching your search criteria.\n \n | \n
\n
\n
\n \n
\n Bulk:\n
\n\n
\n \n \n window.confirm(\n 'Are you sure you assign those cases to yourself?',\n ) && assignTests(tests, selection)\n }\n >\n Assign selected to me\n \n
\n \n \n
\n \n \n
\n \n
\n );\n};\n\nexport default ActionIconsTableItem;","import React from \"react\";\nimport { capitalize } from 'lodash';\n\nconst SimpleTableBadge = ({\n props,\n textPropKey,\n urlPropKey,\n}) => {\n const label = capitalize(props[textPropKey]);\n const url = urlPropKey ? props[urlPropKey] : null;\n\n const badgeContent = (\n \n {!!notes && (\n
\n \n {tooManyAuthAttempts && (\n
\n \n More actions}\n >\n \n \n \n \n \n \n {\n e.preventDefault();\n handleResetAttempts(reset_attempts, handleFetchTests);\n }}\n >\n Reset attempts\n \n \n \n \n View case report\n \n \n \n \n View order details\n \n \n \n
\n {label}
)}\n : props[textPropKey];\n return (\n \n \n {urlPropKey ? (\n \n {label}\n \n ) : (\n label\n )}\n
\n \n
\n );\n};\n\nexport default CaseReportsTable;\n","import React, { useEffect, useRef, useState } from 'react';\nimport DatePicker, { DateObject } from 'react-multi-date-picker';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styled from 'styled-components';\nimport { faArrowRight, faXmark } from '@fortawesome/pro-solid-svg-icons';\n\nconst CustomInput = styled.input`\n width: ${({ width }) => width}px;\n margin: 0 4px;\n padding-top: 3px;\n border-width: 0 0 2px;\n border-color: transparent;\n\n &:focus {\n border-color: var(--vivid-blue);\n }\n`;\n\nconst ClearButton = styled.button`\n padding: 12px;\n font-size: 0.9em;\n width: 18px;\n height: 18px;\n min-width: unset;\n min-height: unset;\n\n &:not(:hover) {\n background-color: unset !important;\n border-color: transparent !important;\n }\n\n & > * {\n fill: #cbd2e0 !important;\n color: #cbd2e0 !important;\n }\n\n &:hover {\n color: #999999;\n }\n`;\n\nconst RangeInput = ({\n placeholder = 'Date range',\n rangeIsToday = false,\n sameDate = false,\n openCalendar,\n clearValues,\n startDayInputRef,\n endDayInputRef,\n format,\n stringDates,\n value,\n}) => {\n const [from, to] = rangeIsToday\n ? ['Today', 'Today']\n : stringDates || value?.split(' ~ ');\n const unset = (!from && !to) || sameDate;\n const [focused, setFocused] = useState(false);\n\n const collapsed = (from === 'Today' && to === 'Today') || (unset && !focused);\n\n const startDayInputProps = collapsed\n ? {\n className: `w-100 px-2 ${from && to && sameDate ? 'text-center' : ''}`,\n placeholder,\n onFocus: () => {\n unset && setFocused(true);\n openCalendar();\n },\n }\n : {\n className: 'text-center',\n width: format.length * 16,\n placeholder: 'Start date',\n onFocus: openCalendar,\n onBlur: () => setTimeout(() => setFocused(false), 200),\n };\n\n return (\n \n
\n {children}
\n);\n\nexport const Footer = ({ children }) => (\n {children}
\n);\n\n// Can be opened through a button with data-bs-toggle=\"offcanvas\" and custom data-bs-target\n// or through the show prop\nconst SideBar: FC\n
\n )}\n {children}\n \n \n {title}\n
\n \n {subTitle && (\n{subTitle}
\n )}\n \n
\n \n \n );\n};\n\nexport default FilterSideBar;","import React from \"react\";\nimport { OverlayTrigger, Tooltip } from 'react-bootstrap';\n\nimport { humanize } from \"../utils\";\n\nconst FilterTabs = ({\n handleTabClick,\n options=[],\n selectedTab,\n}) => {\n return (\n <>\n \n setSideBarFieldValue(\"q\", e.target.value)}\n className=\"my-3\"\n prependIcon=\"search\"\n />\n
\n \n \n Services \n {\n setSideBarFieldValue(\n \"test_configuration_ids\",\n values\n )\n }}\n />\n \n
\n \n \n Result \n setSideBarFieldValue(\"result\", result)}\n selected={resultOptions.filter(o => o.value === sideBarFilters.result)}\n />\n \n
\n \n \n Status \n setSideBarFieldValue(\"test_state\", testState)}\n selected={statusOptions.filter(o => o.value === sideBarFilters.test_state)}\n />\n \n
\n \n \n Date(s) of service \n setSideBarFilters({...sideBarFilters, start_day: \"\", end_day: \"\"})}\n date_format= \"MM/DD\"\n end_day_field_name= \"end_day\"\n onChange={(start, end) => setSideBarFilters({...sideBarFilters, start_day: start.format(\"YYYY-MM-DD\"), end_day: end.format(\"YYYY-MM-DD\")})}\n placeholder=\"\"\n start_day_field_name= \"start_day\"\n values={[sideBarFilters.start_day, sideBarFilters.end_day]}\n />\n \n
\n \n \n Resulted by \n setSideBarFieldValue(\"resulted_by_id\", administeredById)}\n selected={administeredByOptions.filter((option) => option.value === sideBarFilters.resulted_by_id)}\n />\n \n
\n \n \n Location \n setSideBarFieldValue(\"appointment_slot_group_id\", id)}\n selected={locationOptions.filter(o => o.value === sideBarFilters.appointment_slot_group_id)}\n />\n \n
\n \n \n Case report status \n setSideBarFieldValue(\"case_report_status\", status)}\n selected={caseReportStatusOptions.filter(o => o.value === sideBarFilters.case_report_status)}\n />\n \n
\n \n \n Populations \n \n sideBarFilters.populations?.includes(option.value)\n )}\n onChange={(s) =>\n setSideBarFieldValue(\n \"populations\",\n (s || []).map((s) => s.value)\n )\n }\n options={populationOptions}\n isMulti={true}\n filledValue={!!sideBarFilters.populations?.length}\n />\n \n
\n \n \n Published \n setSideBarFieldValue(\"published\", status)}\n selected={publishedOptions.filter(o => o.value === sideBarFilters.published)}\n />\n \n
\n \n \n Vaccine manufacturer \n setSideBarFieldValue(\"vaccine_route_id\", vm)}\n selected={vaccineManufacturerOptions.filter(o => o.value === sideBarFilters.vaccine_route_id)}\n />\n \n
\n \n \n Apply filters\n \n
\n - \n {options.map((option) => {\n const { count, tooltip, value } = option;\n const tabIsActive = selectedTab === value;\n return (\n
\n All filters}\n >\n \n \n \n \n
\n \n {label}\n
\n \n
\n \n {title}\n
\n \n updateFilter('organizationId', o.value)}\n options={organizationOptions}\n filledValue={organizationId && selectedOrganizationOption?.label}\n label=\"Organization\"\n isSearchable={true}\n />\n
\n );\n};\n\nexport default OrganizationDropdown;\n","import React, { useEffect, useState, useRef } from 'react';\nimport Select, {\n CheckboxOption,\n} from '../../common/components/Select';\nimport { components } from 'react-select';\n\nconst ValueContainer = ({ ...props }) => {\n const selectedValues = props.getValue();\n const label = selectedValues.map((item) => item.label).join(\", \") || props.selectProps.placeholder;\n return (\n \n updateFilter('status', values.join(\",\"))}\n options={STATUS_OPTIONS}\n placeholder=\"Group status\"\n value={status?.split(\",\")}\n valueKey=\"value\"\n onMenuOpen={() => setIsOpen(true)}\n onMenuClose={() => setIsOpen(false)}\n menuIsOpen={isOpen}\n />\n
\n );\n};\n\nexport default StatusDropdown;\n","import React, { useCallback, useMemo, useState, useEffect } from 'react';\nimport { Button, ButtonGroup } from 'react-bootstrap';\nimport OrganizationDropdown from './OrganizationDropdown';\nimport StatusDropdown from './StatusDropdown';\nimport FloatingLabelInput from '../../common/components/FloatingLabelInput';\nimport TooltipWrapper from '../../common/components/TooltipWrapper';\n\nconst STATUSES = [\n { value: '', label: 'All Statuses' },\n { value: '0', label: 'Demo' },\n { value: '1', label: 'Draft' },\n { value: '2', label: 'Active' },\n { value: '3', label: 'Archived' },\n { value: '4', label: 'Read only' },\n { value: '6', label: 'Template' },\n];\n\nexport const pluralize = (size, string) => {\n let value = `${size} ${string}`;\n return size > 1 ? `${value}s` : value;\n};\n\nconst getStatus = (status) => {\n return STATUSES.filter(o => status.split(\",\").includes(o.value)).map(o => o.label).join(\", \");\n};\n\nexport const SearchBar = ({ inputValue, setInputValue, updateSearchFilter }) => {\n return (\n \n setInputValue(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n updateSearchFilter(inputValue);\n }\n }}\n />\n
\n \n );\n};\n\nconst FilterBar = ({ inputValue, setInputValue, updateSearchFilter }) => {\n\n useEffect(() => {\n const handler = setTimeout(() => {\n updateSearchFilter(inputValue);\n }, 600);\n\n return () => {\n clearTimeout(handler);\n };\n }, [inputValue]);\n\n return (\n \n {\n setInputValue(e.target.value);\n }}\n />\n
\n );\n};\n\nconst BulkButtons = ({\n bulkEditEnabled,\n setBulkEditEnabled,\n selectedTestGroups,\n}) => (\n \n {bulkEditEnabled ? (\n
\n \n
\n \n
\n {!bulkEditEnabled && (\n \n updateSearchFilter(inputValue)}\n >\n Search\n \n
\n )}\n {user.canBulkEdit && (\n \n
\n \n {pluralize(testGroupsCount, 'result')}\n {Object.values(filters).filter((val) => !!val).length > 0 && (\n
\n {icon && (\n 
\n )}\n
\n \n);\n\nconst redirectTo = (url) => () => {\n window.location = url;\n};\n\nconst DailyOperations = ({\n test_group: {\n on_demand_only,\n active_test_configurations_count,\n extensions,\n appointments_path,\n participant_list_path,\n send_communication_path,\n test_configurations,\n case_reports_path,\n errored_case_reports_path,\n statistics_path,\n participants_import_path,\n },\n}) => (\n \n )}\n {header}
\n {children}
\n \n
\n);\n\nexport default DailyOperations;","import React, { useMemo, useState } from 'react';\nimport FloatingLabelSelect from './FloatingLabelSelect';\n\nconst makeOptions = (collection, valueKey, labelKey, options = {}) =>\n collection.map((opt) => {\n const value = opt[valueKey];\n let label = opt[labelKey];\n\n if (\n options['truncateLabelAt'] &&\n label.length > options['truncateLabelAt']\n ) {\n label = `${label.slice(0, options['truncateLabelAt'])}...`;\n }\n\n return { value, label };\n });\n\nconst MultiSelect = ({\n name,\n selected,\n opts,\n valueKey = 'id',\n label,\n labelKey = 'friendly_name',\n style = {},\n shouldAutoSubmit = false,\n truncateLabelAt = null,\n}) => {\n const selectOptions = useMemo(() =>\n makeOptions(opts, valueKey, labelKey, { truncateLabelAt }),\n );\n\n const [currentlySelected, setCurrentlySelected] = useState(\n makeOptions(selected, valueKey, labelKey, { truncateLabelAt }),\n );\n\n const onChange = (selected) => {\n setCurrentlySelected(selected);\n if (shouldAutoSubmit) {\n const path = window.location.pathname;\n const urlParams = new URLSearchParams(window.location.search);\n urlParams.delete(name.toLowerCase());\n if (selected) {\n urlParams.set(\n name.toLowerCase(),\n selected.map((item) => item.value).join(','),\n );\n }\n window.location.href = `${path}?${urlParams.toString()}`;\n }\n };\n\n return (\n \n {extensions.student_profiles ? (\n \n \n
\n {test_configurations.length !== 0 && (\n \n View your school's student roster here\n {active_test_configurations_count === 0\n ? '.'\n : ', and checkout students as well.'}\n
\n \n ) : (\n\n {\n on_demand_only\n ? 'View and checkout participants'\n : 'View appointments, check patients in & out'\n }\n
\n \n )}\n\n \n
\n )}\n Input test results for POC services
\n \n\n \n
\n View test results and vaccination records
\n {errored_case_reports_path && (\n Errors found\n )}\n \n\n \n
\n \n Send custom emails & SMS to participants\n
\n \n\n \n View data visualizations on daily operations\n \n
\n {extensions.student_profiles && (\n \n \n Import student profiles and vaccination records\n \n
\n )}\n \n {!shouldAutoSubmit && (\n item.value).join(',')\n : ''\n }\n name={name.toLowerCase()}\n />\n )}\n null }}\n name=\"name\"\n onChange={onChange}\n isMulti\n filledValue={Array.isArray(currentlySelected) && !!currentlySelected.length}\n />\n
\n );\n};\n\nexport default MultiSelect;\n","import React, { useState, useEffect } from 'react';\nimport axios from 'axios';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Select from './Select';\n\nconst AsyncSelect = ({\n name,\n selected: selectedProp,\n optionsUrl,\n placeholder = '',\n onChange: onChangeProp = () => {},\n style = {},\n ...props\n}) => {\n const [selectOptions, setSelectOptions] = useState([]);\n const [selected, setSelected] = useState(selectedProp);\n const [loading, setLoading] = useState(false);\n\n const onChange = (value) => {\n setSelected(value);\n onChangeProp(value);\n };\n\n useEffect(() => {\n setLoading(true);\n axios.get(optionsUrl).then((response) => {\n setLoading(false);\n const options = typeof(response.data.options) == \"string\"\n ? JSON.parse(response.data.options)\n : response.data.options\n setSelectOptions(options);\n });\n }, []);\n\n return (\n \n {loading\n ? } options={[]} />\n :
\n );\n};\n\nexport default AsyncSelect;\n","import React from 'react';\nimport { Calendar } from 'react-multi-date-picker';\nimport { useField } from 'formik';\n\nexport const weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n\nconst MultiDatePickerField = ({\n MultiDateComponent = Calendar,\n multiple = true,\n ...props\n}) => {\n const [field, meta, helpers] = useField(props);\n const { value } = meta;\n const { setValue } = helpers;\n\n const onChange = (array) => {\n setValue(array.map((objectDate) => objectDate.format('YYYY-MM-DD')));\n };\n\n return (\n \n \n \n \n \n {HOURS.map((hour, idx) => (\n \n ))}\n \n \n \n \n \n \n {MINUTES.map((minuteOption, idx) => (\n \n {minuteOption[1]}\n \n ))}\n \n \n
\n);\n\nexport default TimeField;\n","import React, { useState } from 'react';\nimport { Formik, Field, Form } from 'formik';\nimport MultiDatePickerField from '../../common/components/MultiDatePickerField';\nimport MultiSelectField from '../../common/components/MultiSelectField';\nimport TimeField from '../../common/components/TimeField';\n\nconst AppointmentSlotsForm = ({\n initialDates,\n locations,\n onSubmit: propOnSubmit,\n loadingSlots,\n}) => {\n const [errors, setErrors] = useState({});\n\n const validate = (values) => {\n const errors = {};\n if (!(values.appointment_dates && values.appointment_dates.length > 0))\n errors.appointment_dates = 'You should select one date at least';\n if (!values.start_time_hour) errors.start_time_hour = 'Required';\n if (!values.start_time_minute) errors.start_time_minute = 'Required';\n if (!values.end_time_hour) errors.end_time_hour = 'Required';\n if (!values.end_time_minute) errors.end_time_minute = 'Required';\n if (\n !(\n values.appointment_slot_group_ids &&\n values.appointment_slot_group_ids.length > 0\n )\n )\n errors.appointment_slot_group_ids = 'Required';\n if (\n values.start_time_hour &&\n values.start_time_minute &&\n values.end_time_hour &&\n values.end_time_minute &&\n (parseInt(values.start_time_hour) > parseInt(values.end_time_hour) ||\n (parseInt(values.start_time_hour) === parseInt(values.end_time_hour) &&\n parseInt(values.start_time_minute) >\n parseInt(values.end_time_minute)))\n )\n errors.impossible_time_range = true;\n if (!values.capacity && !values.access_key_capacity)\n errors.capacity = 'Required';\n if (!values.access_key_capacity && !values.capacity)\n errors.access_key_capacity = 'Required';\n\n return errors;\n };\n\n const onSubmit = (values) => {\n const errors = validate(values);\n setErrors(errors);\n if (Object.keys(errors).length > 0) return;\n propOnSubmit && propOnSubmit(values);\n };\n\n return (\n {details['hours']}
\n \n \n {({ values, handleSubmit }) => (\n \n \n \n )}\n \n
\n );\n};\n\nexport default StagedSlots;\n","import React, { useState, useMemo } from 'react';\nimport axios from 'axios';\nimport AppointmentSlotsForm from './AppointmentSlotsForm';\nimport StagedSlots from './StagedSlots';\n\nexport const NewAppointmentSlots = ({\n locations: propLocations,\n stage_url,\n create_url,\n dates: initialDates = null,\n location_id: initialLocationId = null,\n}) => {\n const [appointmentDates, setAppointmentDates] = useState(null);\n const [slotConfigurations, setSlotConfigurations] = useState([]);\n const [loadingSlots, setLoadingSlots] = useState(false);\n const [processingSlots, setProcessingSlots] = useState(false);\n\n const locations = useMemo(() => {\n return propLocations.map((location) => ({\n value: location[0],\n label: location[1],\n }));\n }, [propLocations]);\n\n const stageChanges = (values) => {\n setLoadingSlots(true);\n setAppointmentDates(null);\n axios\n .post(stage_url, values)\n .then((response) => {\n setLoadingSlots(false);\n const { data } = response;\n if (data.success) {\n setSlotConfigurations(data.appointment_slot_attrs);\n setAppointmentDates(values.appointment_dates.sort());\n }\n })\n .catch(() => setLoadingSlots(false));\n };\n\n const createStaged = (values) => {\n setProcessingSlots(true);\n axios\n .post(create_url, values)\n .then((response) => {\n const { data } = response;\n if (data.success) {\n window.location = data.redirect_path;\n } else {\n setProcessingSlots(false);\n }\n })\n .catch(() => setProcessingSlots(false));\n };\n\n return (\n \n These are the appointment slots you are about to create. Please review\n and edit as necessary before saving.\n
\n{details['hours']}
\n \n \n See slots\n \n
\n | Location name | \nDay | \nHours | \nStandard capacity | \nAccess key capacity | \n
|---|
\n \n
\n {}}\n style={{\n opacity: 0,\n position: 'absolute',\n bottom: 5,\n left: 37,\n zIndex: -10,\n }}\n />\n {isBulkClone ? (\n \n {slotGroups.map((sg) =>\n sg.appointment_slots.map((as, idx) => (\n \n ) : (\n \n \n )}\n {targetDates.map((td, idx) => (\n \n ))}\n
\n \n );\n};\n\nconst CloneSlotsModal = ({\n show,\n onHide,\n groupsToClone,\n cloneDayPath,\n cloneSlotsPath,\n isBulkClone,\n}) => (\n \n
\n \n Bulk actions\n \n
\n);\n\nconst TableHeaders = () => (\n \n \n \n Cancel\n \n {\n e.preventDefault();\n bulkClone();\n }}\n >\n Clone\n \n {\n e.preventDefault();\n if (window.confirm(\"Freeze selected appointment slots?\")) {\n freezeAppointmentSlots();\n }\n }}\n >\n Freeze\n \n \n Reschedule\n \n \n Update\n \n
\n \n
\n \n \n
\n \n
\n \n
\n Shared\n
\n
\n \n Shared\n
\n
\n Standard capacity\n Access key capacity\n
\n \n
\n \n
\n Group\n
\n
\n \n Group\n
\n
\n Standard capacity\n Access key capacity\n
\n \n
\n \n \n
\n \n
\n \n \n
\n {details['hours']}
\n \n {\n e.preventDefault();\n cloneDay(groupIndex);\n }}\n href=\"#\"\n >\n \n Dose management\n \n )}\n
\n {details['hours']}
\n \n \n {({ values, handleSubmit }) => (\n \n \n \n )}\n \n
\n );\n};\n\nexport default StagedSlots;\n","import React, { useState } from 'react';\nimport axios from 'axios';\nimport SharedCapacitiesForm from './SharedCapacitiesForm';\nimport StagedSlots from './StagedSlots';\n\nexport const NewSharedCapacities = ({\n stage_url,\n create_url,\n dates: initialDates = null,\n}) => {\n const [dates, setDates] = useState(null);\n const [staged, setStaged] = useState(false);\n const [slotConfigurations, setSlotConfigurations] = useState([]);\n const [loadingSlots, setLoadingSlots] = useState(false);\n const [processingSlots, setProcessingSlots] = useState(false);\n\n const stageChanges = (values) => {\n setStaged(false);\n setLoadingSlots(true);\n\n axios\n .post(stage_url, values)\n .then((response) => {\n setLoadingSlots(false);\n const { data } = response;\n if (data.success) {\n setSlotConfigurations(data.slot_groups);\n setDates(values.dates.sort());\n setStaged(true);\n }\n })\n .catch(() => setLoadingSlots(false));\n };\n\n const createStaged = (values) => {\n setProcessingSlots(true);\n axios\n .post(create_url, values)\n .then((response) => {\n const { data } = response;\n if (data.success) {\n window.location = data.redirect_path;\n } else {\n setProcessingSlots(false);\n }\n })\n .catch(() => setProcessingSlots(false));\n };\n\n return (\n \n These are the appointment slots you are about to create. Please review\n and edit as necessary before saving.\n
\n\n \n Standard capacity\n Access key capacity\n
\n \n \n
\n \n \n Standard capacity\n Access key capacity\n
\n \n \n
\n {details['hours']}
\n \n \n Create\n \n {\n e.preventDefault();\n setDisplayNewSlot(false);\n }}\n >\n
\n ) : (\n \n
\n \n {\n e.preventDefault();\n setDisplayNewSlot(true);\n }}\n >\n + New slot\n \n
\n {details['hours']}
\n {slotCount > 0 && (\n \n \n Add slots\n \n
\n )}\n | \n \n \n No slots for this day \n | \n
\n \n {title}\n \n {count}\n
\n \n);\n\nexport const ThreeLineItem = ({ title, count, footer, style, tooltip }) => {\n const Wrapper = tooltip ? TooltipWrapper : React.Fragment;\n const wrapperProps = tooltip ? { tooltip } : {};\n\n return (\n \n {title}\n {count}\n {footer}\n
\n \n \n {children}\n
\n \n
\n\n {title}\n \n
\n
\n \n );\n};\n\nconst UpperIndicators = ({\n total_capacity,\n booked,\n active_booked,\n projected,\n bellowTarget,\n}) => {\n return (\n \n
\n
\n \n \n {formatNumberWithCommas(bellowTarget * -1)} under target\n \n ) : (\n \n {formatNumberWithCommas(bellowTarget)} over target\n \n )\n }\n tooltip=\"Total projected (administered + checked in + remaining)\"\n />\n
\n );\n};\n\nconst LowerIndicators = ({\n remaining,\n checked_in,\n administered_tests,\n no_shows,\n refused,\n doseManagementData: { discarded = 0 },\n preferences,\n}) => (\n \n {formatNumberWithCommas(active_booked)} - Active appointments:\n appointments to be administered\n
\n\n\n {formatNumberWithCommas(booked)} - Total appointments: total\n appointments booked from capacity\n
\n \n }\n />\n\n \n Appointment progress\n \n
\n);\n\nconst LateralPanel = (props) => {\n return (\n \n \n \n \n 1 ? 'No shows' : 'No show'}\n count={formatNumberWithCommas(no_shows)}\n style={{ color: 'var(--bs-red)' }}\n tooltip={`>${\n (preferences && preferences.no_show_interval) || 60\n } min past appointment time and not checked in`}\n />\n \n
\n \n
\n );\n};\n\nexport default DaySummary;\n","import DaySummary from './DaySummary'\nexport { DetailCard } from './components/Cards'\nexport default DaySummary\n","import React, { useCallback, useEffect, useRef } from 'react';\n\nconst PopOverWindow = ({\n open,\n onHide,\n title = undefined,\n children,\n position,\n style = {},\n}) => {\n const containerRef = useRef(null);\n const positionStyle =\n position === 'left'\n ? { left: 0, right: 'unset' }\n : { right: 0, left: 'unset' };\n\n const handleClickOutside = useCallback(\n (event) => {\n if (containerRef.current && !containerRef.current.contains(event.target))\n onHide();\n },\n [containerRef],\n );\n\n useEffect(() => {\n if (open) {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }\n }, [open]);\n\n return open ? (\n \n \n {title}\n \n \n
\n )}\n\n {children}
\n \n ) : null;\n};\n\nexport default PopOverWindow;\n","import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PopOverWindow from '../../common/components/PopOverWindow';\nimport { faGear } from '@fortawesome/pro-regular-svg-icons';\n\nconst PreferencesPopOver = ({\n open,\n onHide,\n doseManagementData,\n setDoseManagementData,\n preferences,\n setPreferences,\n}) => {\n const [discarded, setDiscarded] = useState(\n doseManagementData && doseManagementData.discarded,\n );\n const [noShowInterval, setNoShowInterval] = useState(\n preferences && preferences.no_show_interval,\n );\n\n const savePreferences = () => {\n onHide();\n setDoseManagementData && setDoseManagementData({ discarded });\n setPreferences && setPreferences({ no_show_interval: noShowInterval });\n };\n\n return (\n \n setDiscarded(e.target.value)}\n />\n \n
\n\n {preferences && setPreferences && (\n \n setNoShowInterval(e.target.value)}\n />\n \n
\n \n setOpen(!open)}\n style={{\n borderColor: '#dee2e6',\n color: 'var(--primary)',\n }}\n >\n setOpen(false)}\n {...props}\n />\n
\n );\n};\n\nexport default Preferences;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport axios from 'axios';\nimport DatePicker, { DateObject } from 'react-multi-date-picker';\n\nconst HighlightedDatePicker = ({ remoteUrl, value, multiple, ...props }) => {\n const [monthData, setMonthData] = useState({});\n\n const fetchMonthData = (month, year) => {\n axios.get(remoteUrl, { params: { month, year } }).then((response) => {\n const { data } = response;\n setMonthData({ ...monthData, ...data });\n });\n };\n\n useEffect(() => {\n const {\n month: { number: month },\n year,\n } = new DateObject(multiple ? value[value.length - 1] : value);\n\n fetchMonthData(month, year);\n }, [value]);\n\n return (\n \n
\n \n
\n \n
\n
\n setSecondDoseModalOpen(true)}\n >\n Follow up availability\n \n
\n \n {loading && (\n \n
\n )}\n {!firstRender && (\n \n {' '}\n Loading...\n
\n \n \n Update\n \n \n Cancel\n \n \n Reschedule\n \n \n Freeze\n \n
\n \n);\n\nconst TableHeaders = () => {\n return (\n \n \n toggleActionPanel(id)}\n />\n \n
\n \n
\n {details['hours']}
\n \n {\n e.preventDefault();\n cloneDay(groupIndex);\n }}\n href=\"#\"\n >\n \n
\n \n
\n \n
\n \n
\n \n );\n};\n","import React from 'react';\nimport { Badge } from 'react-bootstrap';\nimport { getError } from '../../../CheckoutPage/components/UserErrors'\nimport { today } from '../../../common/utils';\nimport { sentenceCase } from \"sentence-case\";\n\nconst linkedAppointmentBadge = (appointment) => {\n let variant = \"info text-dark\"\n let message, warning;\n let requiresBadge = true\n\n\n const type = {\n booster: appointment.appointment_type == \"booster\",\n additional: appointment.appointment_type == \"additional\",\n supplemental: appointment.appointment_type == \"supplemental\",\n other: appointment.appointment_type != null && appointment.appointment_type != \"default\",\n }\n\n const overRideMessage = () => {\n variant = \"info text-dark\"\n requiresBadge = false;\n\n if (type.booster) {\n message = \"Booster\"\n variant = \"success-shade-600\"\n } else if (type.additional) {\n message = \"Additional\"\n variant = \"secondary-shade-500\"\n } else if (type.supplemental) {\n message = \"Supplemental\"\n variant = \"warning-shade-600\"\n } else {\n const capitalizedString = appointment.appointment_type.charAt(0).toUpperCase() + appointment.appointment_type.slice(1);\n message = capitalizedString;\n }\n }\n\n if (type.other) overRideMessage();\n\n return ({requiresBadge, variant, message, warning})\n}\n\nconst Badges = ({testGroupId, appointment, user}) => {\n const errors = user.primary_user_id ? (\n Object.keys(user.errors).filter(errorKey => (\n user.errors[errorKey].errored &&\n [\"name\", \"date_of_birth\", \"guardian_consented\"].includes(errorKey)\n ))\n ) : Object.keys(user.errors).filter(errorKey => user.errors[errorKey].errored)\n\n const guardianConsented = (\n !errors.find(errorKey => errorKey === \"guardian_consented\") &&\n appointment.test_group.minimum_age_of_consent &&\n user.age < appointment.test_group.minimum_age_of_consent &&\n appointment.test_group.show_guardian_consented_badge\n )\n\n const linkedAppointmentBadgeVariables = linkedAppointmentBadge(appointment)\n const appointmentIsToday = appointment.on_demand ? true : today(appointment.appointment_slot.localized_day);\n\n return (\n \n
\n \n \n
\n \n
\n \n { errorUrl ? (\n \n {sentenceCase(errorMessage)}\n \n ) : (\n \n {sentenceCase(errorMessage)}\n \n )\n }\n
\n )\n })}\n { linkedAppointmentBadgeVariables.requiresBadge &&\n { appointmentSlotGroup.title }
\n { !!appointment.archived_status &&\n \n {user.last_name}, {user.first_name}\n
\n {appointment.is_global_search && (\n \n {global_search.test_group_name}\n \n )}\n \n {user.phone_number && (\n
\n {user.phone_formatted} {verifiedCheck(user.phone_verified)}\n
\n )}\n {user.email && (\n \n {user.email} {verifiedCheck(user.email_verified)}\n
\n )}\n \n
\n );\n } else if (user.error) {\n return (\n \n
\n );\n } else {\n return null;\n }\n};\n\nconst MultiAddTestGroupUser = ({\n testGroupId,\n tags = [],\n populations = [],\n styling = {},\n sendReg = false,\n accessKeys = [],\n}) => {\n const newUserTemplate = {\n accessCode: '',\n firstName: '',\n lastName: '',\n email: '',\n phoneNumber: '',\n tags: [],\n populationId: populations.length === 1 ? populations[0].id : null,\n accessKey: null,\n saved: false,\n error: false,\n };\n\n const [show, setShow] = useState(false);\n const [users, setUsers] = useState([\n { ...newUserTemplate }, // Initialize it with 1 empty user\n ]);\n\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n\n const handleSubmit = () => {\n let success = true;\n const promises = [];\n\n // Submit this to the API.\n users.forEach((user, index) => {\n if (user.saved) {\n // Don't try to submit saved users.\n return;\n }\n\n const isValid = user.accessCode || (user.firstName && user.lastName);\n if (!isValid) {\n setField('Needs an access code or name.', 'error', index);\n return;\n }\n\n const payload = {\n user: {\n first_name: user.firstName,\n last_name: user.lastName,\n email: user.email,\n phone_number: user.phoneNumber,\n tags: user.tags,\n },\n population_id: user.populationId,\n access_key: user.accessKey,\n access_code: user.accessCode,\n test_group_id: testGroupId,\n send_reg_link: true,\n };\n\n const request = fetch('/api/test_group_users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload),\n })\n .then((response) => {\n if (response.status === 200) {\n setField(true, 'saved', index);\n } else {\n success = false;\n setField('Failed to save', 'error', index);\n }\n })\n .catch((response) => {\n success = false;\n setField('Failed to save', 'error', index);\n });\n\n promises.push(request);\n });\n\n Promise.all(promises).then(() => {\n if (success) {\n window.location.reload();\n toastr.success('The self-registration link(s) has been successfully sent.');\n }\n });\n };\n\n const setField = (value, fieldName, index) => {\n const newUsers = users.slice(0, index);\n const user = users[index];\n const newUser = { ...user };\n newUser[fieldName] = value;\n newUsers.push(newUser);\n newUsers.concat(users.slice(index + 1));\n\n setUsers(newUsers);\n };\n\n const tagOptions = tags.map((tag) => ({\n value: tag.id,\n label: tag.friendly_name,\n }));\n const accessKeyOptions = accessKeys.map((key) => ({\n value: key.value,\n label: key.friendly_name,\n }));\n\n const populationOptions = populations.map((population) => ({\n value: population.id,\n label: population.name,\n }));\n\n const buttonStyling = styling.button;\n\n return (\n <>\n {buttonStyling ? (\n \n setUsers(users.length > 1 ? users.filter(u => u != user) : [{ ...newUserTemplate }])}\n >\n Remove user\n
\n \n \n Cancel\n \n \n Send link\n \n
\n \n {stepNumber}. {title}\n
\n {children}\n \n );\n};\n\nconst NewParticipant = ({\n testGroupSlug,\n tags,\n populations,\n displayForceAdd,\n ...props\n}) => {\n const [population, setPopulation] = useState({});\n const [accessKey, setAccessKey] = useState({});\n const [accessKeyOptions, setAccessKeyOptions] = useState(props.access_keys);\n\n const defaultRegistrationLink = `/r/${testGroupSlug}?continue_as_guest=1`;\n const defaultForceAddLink = `/test_groups/${testGroupSlug}/participants/new`;\n\n const [collectSignature, setCollectSignature] = useState(true);\n const [registerLink, setRegisterLink] = useState(null);\n const [forceAddLink, setForceAddLink] = useState(defaultForceAddLink);\n\n return (\n \n
\n \n Participant(s) registers and selects timeslot\n independently.\n
\n {population.id ? (\n\n
\n \n I will register and select timeslot for the participant.\n
\n {population.id ? (\n\n
\n \n I will register the participant bypassing the schedule. (No\n Dose Wasted End of Day)\n
\n {displayForceAdd && population.id ? (\n \n ) : (\n \n )}\n \n\n
\n);\n\nexport default StudentProfileCard;\n","import React, { useCallback, useEffect, useReducer, useState } from 'react';\nimport { Card, Col, Row, Spinner } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronUp, faUpRightFromSquare } from '@fortawesome/pro-regular-svg-icons';\n\nimport { humanize } from '../../common/utils';\nimport { StudentStatusIcon } from '../../School/components/StudentProfiles';\nimport MultipleMatchResolver from '../../CheckoutPage/components/MultipleMatchResolver';\nimport StudentProfileCard from './widgets/StudentProfileCard';\nimport axios from 'axios';\n\nconst ViewMoreLessBadge = ({\n cardExpanded,\n hiddedElementCount,\n setCardExpanded,\n}) => {\n const label = cardExpanded\n ? 'View less'\n : `View more (${hiddedElementCount})`;\n return (\n \n \n Student profile\n \n \n
\n \n
\n \n {user.full_name}\n
\n DOB: {user.date_of_birth}
\n Gender: {user.sex_at_birth?.charAt(0)?.toUpperCase()}
\n \n Address:\n
\n \n {user.address_1}\n {user.address_1 &&
}\n {user.city}, {user.state} {user.postal_code}\n
\n }\n {user.city}, {user.state} {user.postal_code}\n
\n Phone:{' '}\n {user.phone_number.replace(\n PHONE_NUMBER_REGEX_VALIDATOR,\n '$1 ($2$3) $4-$5',\n )}\n
\n {dataToDisplay}
;\n } else {\n const dataKeys = Object.keys(dataToDisplay);\n moreThanThreeKeys = dataKeys.length > 3;\n const numberOfLinesToDisplay = moreThanThreeKeys ? 2 : 3;\n const keysToDisplay = cardExpanded\n ? dataKeys\n : dataKeys.slice(0, numberOfLinesToDisplay);\n if (displayOverdueDates) {\n keysToDisplay.sort((a, b) => {\n const dateA = new Date(dataToDisplay[a]);\n const dateB = new Date(dataToDisplay[b]);\n return dateA > dateB ? 1 : dateB > dateA ? -1 : 0;\n });\n }\n numberOfHiddenKeys = dataKeys.length - keysToDisplay.length;\n body = (\n <>\n {keysToDisplay.map((key) => {\n return (\n \n \n {key}\n \n {displayDataValues && dataToDisplay[key] && (\n <>\n {displayOverdueDates && ' due date'}\n {': '}\n {dataToDisplay[key]}\n \n )}\n
\n );\n })}\n \n );\n }\n\n return (\n \n \n
\n {body}\n {moreThanThreeKeys && (\n
\n );\n};\n\nconst buildGuardianInfo = (student_profile) => {\n const { parent_guardian_name, parent_phone_number, parent_email_address } =\n student_profile;\n return !!parent_guardian_name\n ? [parent_guardian_name, parent_phone_number, parent_email_address]\n .filter((v) => !!v)\n .join(' | ')\n : 'n/a';\n};\n\nconst UserSummary = ({\n testGroupUser: { user, student_profile },\n cardExpanded,\n setCardExpanded,\n}) => {\n const userSummary = {\n 'Student ID': student_profile.student_id || 'n/a',\n 'Parent/Guardian': buildGuardianInfo(student_profile),\n Gender: user.gender_string || 'n/a',\n };\n\n return (\n \n
\n {body}\n {moreThanThreeKeys && (\n \n {studentImmunizationStatusFilters.map((f) => {\n return (\n reloadWithUpdatedComplianceParam(f.param)}\n />\n )\n })}\n
\n )\n}\n\nexport default StudentImmunizationStatusFilters;\n","import React, { useState } from 'react';\nimport { Card, Row, Col, Button, Alert } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faWalking,\n faHandHoldingMedical,\n faLaptopMedical,\n} from '@fortawesome/pro-solid-svg-icons';\nimport FabrxCheckbox from '../../Registration/primary/FabrxCheckbox';\n\nconst ColSection = ({\n stepNumber,\n title,\n colSize = { xs: 12, md: 6 },\n children,\n}) => {\n return (\n \n {stepNumber}. {title}\n
\n {children}\n \n );\n};\n\nconst NewAppointment = ({\n testGroupSlug,\n populations,\n accessKeys,\n testGroupUser,\n user,\n allowAccessCodeRegistration,\n allowMultipleRegistrations,\n ...props\n}) => {\n const [population, setPopulation] = useState({});\n const [accessKey, setAccessKey] = useState({value: ''});\n const [notificationMessage, setNotificationMessage] = useState('');\n const [collectSignature, setCollectSignature] = useState(true);\n\n const forceAppointmentLink = `/test_groups/${testGroupSlug}/test_group_users/${testGroupUser.id}/new_appointment_on_behalf`;\n const appointmentLink = `/a/${testGroupSlug}/new?registration_type=${population.name}&key=${accessKey.value}&on_behalf_registration=true&access_code=${testGroupUser.accessCode}&last_name=${user.lastName}&date_of_birth=${user.dateOfBirth}${collectSignature ? '' : '&consent_bypass=horse-drawn-wagon'}`\n\n const sendSelfAppointmentRegistration = () => {\n let payload = {}\n fetch(`/test_groups/${testGroupUser.testGroupId}/test_group_users/${testGroupUser.id}/send_self_appointment`, {\n method: \"POST\",\n redirect: 'follow',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify(payload),\n }).then(response => {\n setNotificationMessage(`Email sent to the participant. Redirecting to the participants page..`)\n setTimeout(() => {window.location.href = response.url}, 2000)\n });\n }\n\n return (\n \n {notificationMessage && (\n \n setNotificationMessage('')}>\n {notificationMessage}\n \n
\n )}\n \n \n \n {populations.map((p) => {\n let active = false\n if (population.id) {\n active = population.id === p.id;\n } else {\n active = testGroupUser.populationId == p.id;\n setPopulation(p);\n }\n return (\n {setPopulation(p)}}\n >\n {p.friendlyName || p.name}\n \n );\n })}\n \n \n {accessKeys.length > 0 && (\n \n \n {accessKeys.map((key) => {\n let active = false\n if (accessKey) {\n active = accessKey.value === key.value;\n }\n\n return (\n { setAccessKey(key); }}\n >\n {key.friendly_name || key.value}\n \n );\n })}\n \n \n )}\n\n \n \n \n {allowAccessCodeRegistration && allowMultipleRegistrations && (\n \n
\n \n
\n \n setCollectSignature(!collectSignature)}\n label=\"Collect signature on this device (disable for consent bypass)\"\n />\n
\n \n \n
\n \n Participant selects appointment timeslot\n independently.\n
\n \n \n )}\n\n
\n \n I will select timeslot for the participant's appointment.\n
\n \n\n
\n \n I will register the participant bypassing the schedule. (No\n Dose Wasted End of Day)\n
\n \n \n \n \n \n \n \n );\n};\n\nexport default NewAppointment;\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport axios from 'axios';\nimport DatePicker, { DateObject } from 'react-multi-date-picker';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleExclamation, faTriangleExclamation } from '@fortawesome/pro-regular-svg-icons'\nimport styled, { css } from 'styled-components';\nimport Select from '../../common/components/Select';\nimport { Row, Col } from 'react-bootstrap';\nimport HelpText from '../../common/components/HelpText';\n\nconst SwitchContainer = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n padding: 4px;\n background: #ffffff;\n box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04),\n 0px 2px 4px rgba(96, 97, 112, 0.16);\n border-radius: 4px;\n`;\n\nconst SwitchOption = styled.div`\n padding: 5px 9px;\n cursor: pointer;\n font-size: 14px;\n line-height: 24px;\n border-radius: 4px;\n\n ${({ selected }) =>\n selected &&\n css`\n color: white;\n background: #2862FA;\n font-weight: 600;\n `}\n`;\n\nconst CustomSwitch = ({\n options,\n setValue,\n showAllSlots,\n value: selectedValue,\n}) => (\n\n \n {options.map(({ value, label }, idx) => (\n setValue(value)}\n selected={value === selectedValue}\n >\n {label}\n \n ))}\n \n
\n);\n\nconst LocationTimeSelect = ({\n slotType,\n appointment_slot_availabilities_url,\n appointment_slot_groups,\n appointment_slots_url,\n}) => {\n const [loading, setLoading] = useState(false);\n const [availableSlots, setAvailableSlots] = useState([]);\n const [allSlotsFiltered, setAllSlotsFiltered] = useState([]);\n const [selectedLocation, setSelectedLocation] = useState(null);\n const [selectedDate, setSelectedDate] = useState(new DateObject());\n const [selectedAppointmentSlot, setSelectedAppointmentSlot] = useState(null);\n\n const fetchAvailableSlots = useCallback(() => {\n setLoading(true);\n\n axios.post(appointment_slot_availabilities_url).then(({ data }) => {\n setAvailableSlots(data.appointment_slot_groups);\n setLoading(false);\n });\n });\n\n const fetchAllSlotsFiltered = useCallback(() => {\n setLoading(true);\n\n axios\n .get(appointment_slots_url, {\n params: {\n start_on: selectedDate.format('YYYY-MM-DD'),\n end_on: selectedDate.format('YYYY-MM-DD'),\n appointment_slot_group_id: selectedLocation,\n },\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n .then(({ data }) => {\n setAllSlotsFiltered(data.appointment_slots);\n setLoading(false);\n });\n }, [selectedLocation, selectedDate]);\n\n const locationOptions = useMemo(\n () =>\n slotType === 'available_slots'\n ? availableSlots.map(({ id: value, title: label }) => ({\n value,\n label,\n }))\n : slotType === 'all_slots'\n ? appointment_slot_groups.map(([label, value]) => ({\n value,\n label,\n }))\n : [],\n [slotType, availableSlots, appointment_slot_groups],\n );\n\n const appointmentSlotsOptions = useMemo(\n () =>\n (slotType === 'available_slots'\n ? availableSlots.find((loc) => loc.id === selectedLocation)\n ?.appointment_slots || []\n : slotType === 'all_slots'\n ? allSlotsFiltered\n : []\n ).map(({ id: value, localized_starts_at_with_location: label }) => ({\n value,\n label,\n })),\n [slotType, availableSlots, allSlotsFiltered, selectedLocation],\n );\n\n useEffect(() => {\n fetchAvailableSlots();\n }, [slotType]);\n\n useEffect(() => {\n if (slotType === 'all_slots' && !!selectedLocation) fetchAllSlotsFiltered();\n }, [slotType, selectedLocation, selectedDate]);\n\n useEffect(() => {\n if (selectedAppointmentSlot) $('#edit_appointment').data('dirty', true);\n }, [selectedAppointmentSlot]);\n\n return (\n \n \n setSelectedLocation(locId)}\n placeholder={\n slotType === 'available_slots' && loading ? (\n \n \n
\n \n
\n \n )}\n
\n \n setSelectedAppointmentSlot(slotId)}\n isDisabled={loading || !selectedLocation}\n placeholder={\n slotType === 'all_slots' && loading ? (\n \n
\n )}\n {selectedLocation && (\n \n \n
\n );\n};\n\nexport default Reschedule;\n","import { createContext } from 'react';\n\n// Export an empty context\nexport default createContext({});","import React, { useState, useContext, useEffect } from \"react\";\nimport { Button, Image, Alert, Row, Col } from \"react-bootstrap\";\nimport OtcContext from '../contexts/OtcContext';\nimport BarcodeScanner from \"../../common/components/BarcodeScanner\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { verifyIfPhone } from \"./OtcFlow\";\nimport ErrorMessage from \"../../common/components/ErrorMessage\";\n\nconst OtcCodeReader = () => {\n\n const {\n t,\n verifyBarcode,\n activeErrors,\n clearError,\n clearErrors,\n barcodeScanned,\n flow,\n barcode,\n setBarcode,\n barcodeConfirmation,\n setBarcodeConfirmation,\n testConfiguration,\n setError,\n setNextButtonDisabled,\n stepNumber,\n barcodeReaderSkipped,\n showManualInput,\n setShowManualInput,\n } = useContext(OtcContext);\n\n const [showBarcodeScanner, setShowBarcodeScanner] = useState(false);\n const [showExample, setShowExample] = useState(false);\n\n const barcodeIsValid = barcode => {\n if (!testConfiguration.acceptable_code_formats) return true;\n return barcode.match(new RegExp(testConfiguration.acceptable_code_formats)) ? true : false;\n }\n\n // for passing QR scanner in system test:\n const createId = (length) => {\n var result = '';\n var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n var charactersLength = characters.length;\n for ( var i = 0; i < length; i++ ) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n return result;\n }\n\n useEffect(() => {\n if (barcodeScanned) {\n const stream = document.querySelectorAll('video')[0]?.srcObject;\n if (stream) stream.getTracks().forEach(track => track.stop())\n }\n },[barcodeScanned])\n\n const Scanner = () => {\n return (\n \n Reschedule appointment?\n
\n \n {!activeErrors[\"incorrect_barcode_format\"] && (\n {\n if (barcodeIsValid(uid)) {\n verifyBarcode(uid)\n clearError(\"incorrect_barcode_format\")\n } else {\n setError(\"incorrect_barcode_format\")\n }\n }}\n />\n )}\n {\n if (!verifyIfPhone()) {\n const barcode = createId(6)\n setBarcode(barcode)\n verifyBarcode(barcode)\n }\n }}\n data-test-hook=\"createtestbarcode\"\n style={{width: \"1px\", height: \"1px\", cursor: \"default\", color: \"#FBFBFB\"}}\n >.
\n \n {\n setShowBarcodeScanner(false)\n clearErrors()\n }}\n >\n {\" \"}{t(\"employer_testing.code_reader.try_again\")}\n \n \n
\n \n )\n }\n\n const BarcodeScannerTrigger = () => {\n return (\n \n {activeErrors[\"incorrect_barcode_format\"] && (\n
\n \n {t(\"employer_testing.code_reader.not_working\")}\n \n {flow === \"self_checkouts\" ? t(\"employer_testing.code_reader.click_to_scan\") : t(\"self_administration.scan_barcode\")}\n
\n \n )\n }\n\n const AlreadyScannedError = () => {\n return (\n \n
\n )\n }\n\n const SuccessfulScanMessage = () => {\n return (\n \n {\n setShowBarcodeScanner(true);\n clearErrors();\n }}\n >\n {t(\"employer_testing.code_reader.scan_new_test_card\")}\n \n
\n \n {verifyIfPhone() ? (\n \n
\n )}\n\n {activeErrors[\"already_scanned\"] ? (\n
\n )\n\n const universalScanner = (\n \n {\n if (verifyIfPhone()) setShowExample(!showExample)\n window.scrollTo(0, document.body.scrollHeight)\n }}\n >\n {!showExample\n ? ({t(\"otc.show_example\")}
\n ) : (\n {stepNumber}. {t(\"otc.scan_code\")}
\n{t(\"otc.qr_code_description\")}
\n\n
\n )}\n \n
\n {stepNumber}. {t(\"otc.scan_code\")}
\n{t(\"otc.qr_code_description\")}
\n \n\n {showBarcodeScanner ? (\n
\n )\n )}\n \n
\n )}\n \n
\n )\n\n const manualInput = (\n \n
\n\n {activeErrors[\"already_scanned\"] ? (\n {stepNumber}. {t(\"otc.scan_test_barcode\")}
\n{t(\"otc.barcode_description\")}
\n\n {showBarcodeScanner ? (\n
\n )\n )}\n \n
\n )}\n \n
\n \n \n
\n {t(\"otc.or\")}
\n \n \n setShowManualInput(true)}\n data-test-hook=\"manualinput\"\n variant=\"link\"\n size=\"sm\"\n >\n {t(\"self_administration.enter_barcode_manually\")}\n \n
\n \n {\n setBarcode(e.target.value)\n e.target.value === barcodeConfirmation ? clearError(\"barcodes_dont_match\") : setError(\"barcodes_dont_match\")\n barcodeIsValid(e.target.value) ? clearError(\"incorrect_barcode_format\") : setError(\"incorrect_barcode_format\")\n e.target.value === barcodeConfirmation && barcodeIsValid(e.target.value) ? setNextButtonDisabled(false) : setNextButtonDisabled(true)\n }}\n data-test-hook=\"barcodeinput\"\n placeholder=\"PB000000\"\n className=\"form-control mb-3\"\n autoFocus\n />\n {t(\"self_administration.confirm_barcode_input\")}:\n {\n setBarcodeConfirmation(e.target.value)\n e.target.value === barcode ? clearError(\"barcodes_dont_match\") : setError(\"barcodes_dont_match\")\n barcodeIsValid(e.target.value) ? clearError(\"incorrect_barcode_format\") : setError(\"incorrect_barcode_format\")\n e.target.value === barcode && barcodeIsValid(e.target.value) ? setNextButtonDisabled(false) : setNextButtonDisabled(true)\n }}\n placeholder=\"PB000000\"\n className=\"form-control mb-3\"\n />\n\n
\n )\n\n return (\n 1. {t(\"otc.enter_barcode\")}
\n\n {t(\"self_administration.enter_barcode\")}:\n\n {activeErrors[\"incorrect_barcode_format\"] && (\n
\n\n \n
\n {activeErrors[\"already_scanned\"] && (\n \n \n
\n {t(\"otc.or\")}
\n \n \n setShowManualInput(false)}\n variant=\"link\"\n size=\"sm\"\n >\n {t(\"otc.scan_qr_code\")}\n \n
\n \n {showManualInput\n ? manualInput\n : flow === \"self_checkouts\"\n ? abbottScanner\n : universalScanner\n }\n
\n )\n}\n\nexport default OtcCodeReader;\n","import React from \"react\";\nimport { Image, Col, Row, Card } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircle } from \"@fortawesome/pro-regular-svg-icons\";\n\n\nconst ResultCard = ({ imgSrc, key, text, onSelect, isSelected, testConfiguration }) => {\n\n const showWideImage = testConfiguration?.results_schema?.otc?.images?.results?.__wide;\n\n return (\n onSelect()}>\n ![](\"/images/icons/icon-radio-button-selected-green.svg\"){kind=icon}
\n ) : (\n handleClick(\"negative\")} className=\"pointer p-2\">\n
\n )}\n \n \n ) : (\n handleClick(\"positive\")} className=\"pointer p-2\">\n
\n )}\n \n {t(\"otc.choose_result_option_custom\", {test_name: selectedKit ? prettyTestKitNames[selectedKit] : testConfiguration.display_name})}
\n ) : (\n{t(\"otc.choose_result_option\")}
\n )}\n {options.map((option) => {\n return (\n\n {\n if (result === option) {\n setResult(null);\n setNextButtonDisabled(true);\n } else {\n setResult(option);\n setNextButtonDisabled(false);\n }\n }}\n />\n
\n );\n })}\n \n )\n }\n\n const MultiplexResultOptions = () => {\n return (\n <>\n For each result, please select the option matching a green positive LED light shown on your test
\n\n Negative -\n Positive +\n
\n {multiplexSubTests.map((st) => {\n return (\n \n
\n )\n })}\n \n )\n }\n\n return (\n \n
\n )\n}\n\nexport default OtcResultsEntry;\n","import React, { useContext, useState } from \"react\";\nimport OtcContext from '../contexts/OtcContext';\nimport LocalizedMarkdown from \"../../Registration/components/registration/fields/LocalizedMarkdown\";\nimport { Card, Row, Col } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport format from 'date-fns/format';\nimport { verifyIfPhone } from \"./OtcFlow\";\nimport { useTranslation } from 'react-i18next';\nimport { faChevronDown, faChevronUp } from '@fortawesome/pro-solid-svg-icons';\n\nconst formatDate = (date) => {\n if (!date) return;\n const dateParts = date.split(\"-\");\n return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`\n}\n\nexport const MultiplexResults = ({\n multiplexSubTests,\n multiplexResult,\n simplifiedSummary=false,\n testConfiguration,\n}) => {\n\n const { t, i18n } = useTranslation();\n const [resultMarkdown, setResultMarkdown] = useState(null);\n\n const ResultBadge = ({\n subTestKey,\n subTestLabel,\n subTestResult,\n simplifiedSummary,\n setResultMarkdown,\n selected,\n }) => {\n\n let icon;\n if (subTestResult === \"positive\") {\n icon = {stepNumber}. {t(\"otc.enter_result\")}
\n {isTestMultiplex ?![](\"/images/icons/icon-plus-circle.svg\"/){kind=icon}
\n } else if (subTestResult === \"negative\") {\n icon = ![](\"/images/icons/icon-minus-circle.svg\"/){kind=icon}
\n }\n\n return (\n \n {subTestLabel}: {t(`employer_testing.results.${subTestResult}`)} {icon}\n {!simplifiedSummary && (\n selected ? (\n setResultMarkdown(null)}\n >\n More info setResultMarkdown({subTestKey: subTestKey, subTestResult: subTestResult})}\n >\n More info
\n )\n }\n\n return (\n \n \n \n )}\n
\n )\n}\n\nconst OtcSummary = () => {\n\n const {\n t,\n user,\n dateOfBirth,\n result,\n testConfiguration,\n resultDate,\n resultTime,\n allowSelfResulting,\n testGroup,\n appointment,\n hideConfirmationPageLink,\n isTestMultiplex,\n multiplexSubTests,\n multiplexResult,\n } = useContext(OtcContext);\n\n const adminSection = (\n \n {multiplexSubTests.map((st) => {\n return (\n
\n {!simplifiedSummary && resultMarkdown && (\n \n
\n )\n\n const dateToDisplay = resultDate ? new Date(resultDate) : new Date()\n if (resultDate) dateToDisplay.setHours(dateToDisplay.getHours() + (dateToDisplay.getTimezoneOffset() / 60))\n const formattedDate = format(dateToDisplay, 'MMMM dd, yyyy')\n const formattedDateOfBirth = formatDate(user.date_of_birth ? user.date_of_birth : `${dateOfBirth.year}-${dateOfBirth.month}-${dateOfBirth.day}`);\n\n const resultSection = (\n {t(\"otc.test_submitted\", {first_name: user.first_name, test: testConfiguration.display_name})}
\n\n \n
\n\n \n \n
\n {isTestMultiplex ? (\n \n \n )}\n \n\n {!hideConfirmationPageLink && (\n \n )}\n
\n )\n\n return (\n {t(\"otc.results\")}
\n\n{user.full_name}
\n{t(\"otc.dob\")} {formattedDateOfBirth}
\n \n
\n
\n \n {testConfiguration.display_name}
\n \n {!verifyIfPhone() && t(\"otc.administered\")}{\" \"}\n {formattedDate}\n {resultDate && resultTime && ` at ${format(new Date(`${resultDate.replace(/-/g, \"/\")} ${resultTime}`), 'h:mm aaa')}`}\n
\n {!isTestMultiplex && (\n {t(`employer_testing.results.${result}`)}
\n )}\n \n {allowSelfResulting ? resultSection : adminSection}\n
\n )\n}\n\nexport default OtcSummary;\n","import React, { useContext } from 'react';\nimport { Button, Image } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport OtcContext from '../contexts/OtcContext';\nimport LocalizedMarkdown from \"../../Registration/components/registration/fields/LocalizedMarkdown\";\n\n\nconst OtcInstructions = () => {\n\n const { t, i18n, flow, testConfiguration, stepNumber } = useContext(OtcContext);\n\n const mainImageUrl = {\n self_checkouts: '/images/abbott/abbott_kit_with_frame.png',\n general_self_checkouts: '/images/all_rapid_boxes_with_frame.png',\n self_admin: '/images/self_admin_logo_with_frame.png',\n };\n\n const resultsSchemaMainImage = () =>\n testConfiguration.results_schema?.otc?.images?.main;\n\n const resultsSchemaLocaleSpecificValue = (resources) => {\n if (!resources) return null;\n\n return resources[i18n.language] || Object.values(resources)[0];\n };\n\n const resultsSchemaVideo = () =>\n resultsSchemaLocaleSpecificValue(testConfiguration.results_schema?.otc?.videos);\n\n const resultsSchemaInstructions = () =>\n resultsSchemaLocaleSpecificValue(testConfiguration.results_schema?.otc?.instructions);\n\n const videoUrl =\n resultsSchemaVideo() ||\n (flow === 'self_checkouts' && 'https://www.youtube.com/watch?v=baQQfoX-JXo&t=313s');\n\n const instructionsUrl =\n resultsSchemaInstructions() ||\n (flow === 'self_checkouts' && 'https://primarybio-public.s3.us-east-2.amazonaws.com/BinaxNOW_COVID-19_Antigen_Self_Test_Prod.pdf?r[…]3e3012cb7552404c78a7232a7f9b89b6cd59dcde65b99c');\n\n const displayButtons = ![\"general_self_checkouts\", \"self_admin\"].includes(flow)\n\n return (\n \n
\n )\n}\n\nexport default OtcInstructions;\n","import React, { useContext, useState } from \"react\";\nimport { FormControl } from \"react-bootstrap\";\nimport OtcContext from '../contexts/OtcContext';\nimport ErrorMessage from \"../../common/components/ErrorMessage\";\nimport CheckboxCard from \"../../common/components/CheckBoxCard\";\n\nconst OtcDateOfTest = () => {\n\n const {\n t,\n verifyAndSetResultDate,\n resultDate,\n setResultDate,\n resultTime,\n setResultTime,\n setNextButtonDisabled,\n activeErrors,\n setError,\n isDateInPastThirtyDays,\n clearErrors,\n stepNumber,\n testTakenToday,\n setTestTakenToday,\n testGroupTestConfiguration,\n } = useContext(OtcContext);\n\n const today = new Date();\n\n const enterToday = () => {\n let date = today;\n verifyAndSetResultDate(`${date.getFullYear()}-${(\"0\" + (date.getMonth() + 1)).slice(-2)}-${(\"0\" + date.getDate()).slice(-2)}`);\n if (resultTime !== \"\" || !testGroupTestConfiguration.require_otc_time) setNextButtonDisabled(false);\n clearErrors();\n }\n\n const enterCurrentTime = () => {\n setResultTime(`${(\"0\" + today.getHours()).slice(-2)}:${(\"0\" + today.getMinutes()).slice(-2)}`);\n if (resultDate !== \"\") setNextButtonDisabled(false);\n }\n\n return (\n \n
\n {stepNumber}. {t(\"otc.review_instructions\")}
\n {displayButtons ? (\n\n
\n ) : (\n {t(\"otc.follow_instructions_or_below\")}
\n\n window.open(videoUrl, '_blank')}\n className=\"otc-button\"\n >\n {t(\"otc.watch_video\")} \n {t(\"otc.view_instructions\")}
\n {t(\"otc.follow_instructions\")}
\n )}\n\n {\n enterToday();\n setTestTakenToday(\"yes\");\n }}\n />\n\n {\n setTestTakenToday(\"no\");\n setResultDate(\"\");\n setNextButtonDisabled(true);\n }}\n />\n\n {testTakenToday === \"no\" && (\n enterCurrentTime()}\n style={{width: \"1px\", height: \"1px\", cursor: \"default\", color: \"#FBFBFB\"}}\n >\n \n
\n \n )\n}\n\nexport default OtcDateOfTest;","import React, { useState, useContext, useCallback, useRef } from 'react';\nimport { Button, Image, Row, Col } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport OtcContext from '../contexts/OtcContext';\nimport PhotoUploader from './PhotoUploader';\nimport Webcam from 'react-webcam';\nimport ErrorMessage from '../../common/components/ErrorMessage';\nimport { verifyIfPhone, verifyIfSpecificDevice } from './OtcFlow';\n\n\nconst OtcPhoto = () => {\n const {\n t,\n setNextButtonDisabled,\n showWebCam,\n setShowWebCam,\n testImageData,\n setTestImageData,\n flow,\n setError,\n activeErrors,\n stepNumber,\n testConfiguration,\n } = useContext(OtcContext);\n\n const webcamRef = useRef(null);\n const [cameraView, setCameraView] = useState(\"environment\");\n const [showExample, setShowExample] = useState(false);\n const usePhonesUploadOptions = verifyIfSpecificDevice([\"iPhone\", \"iPad\", \"Android\"]);\n\n const capture = useCallback(\n () => {\n const imageData = webcamRef.current.getScreenshot();\n setTestImageData(imageData);\n setNextButtonDisabled(false);\n },\n [webcamRef]\n );\n\n const resultsSchemaExampleImage = () =>\n testConfiguration.results_schema?.otc?.images?.example;\n\n const exampleImageUrl =\n resultsSchemaExampleImage() ||\n (flow === 'self_checkouts' && '/images/abbott/abbott_example.png');\n\n const viewExampleButton =\n resultsSchemaExampleImage() || flow === 'self_checkouts';\n\n const [file, setFile] = useState(null);\n const fileName = file ? file[\"name\"] : null;\n const fileType = testImageData\n ? testImageData.split(\";\")[0] === \"data:application/pdf\"\n ? \"pdf\"\n : null\n : null\n\n return (\n {stepNumber}. {testGroupTestConfiguration.require_otc_time ? t(\"otc.steps.enter_date_and_time\") : t(\"otc.steps.enter_date\")}
\n{t(\"otc.did_you_take_test_today\")}
\n\n \n {\n verifyAndSetResultDate(e.target.value);\n if (!isDateInPastThirtyDays(e.target.value)) {\n setNextButtonDisabled(true);\n setError(\"test_not_in_last_thirty_days\");\n } else if (isDateInPastThirtyDays(e.target.value) && (resultTime !== \"\" || !testGroupTestConfiguration.require_otc_time)) {\n setNextButtonDisabled(false);\n clearErrors();\n } else {\n setNextButtonDisabled(true);\n clearErrors();\n }\n }}\n />\n
\n )}\n\n {activeErrors[\"test_not_in_last_thirty_days\"] && (\n {t(\"otc.what_day_did_you_take_test\")}
\n \n {\n setResultTime(e.target.value);\n resultDate !== \"\" && e.target.value !== \"\" && isDateInPastThirtyDays(resultDate)\n ? setNextButtonDisabled(false)\n : setNextButtonDisabled(true)\n }}\n data-test-hook=\"timeoftest\"\n />\n
\n )}\n\n {t(\"otc.what_time_did_you_take_test\")}
\n \n {\n setShowExample(!showExample);\n }}\n >\n {!showExample\n ? ({t(\"otc.show_example\")}
\n\n {stepNumber}. {t(\"otc.take_result_photo\")}
\n{t(\"otc.take_result_photo_description\")}
\n\n {viewExampleButton && (\n\n {(testImageData || showWebCam) && (\n 
\n )\n )}\n\n {showWebCam && !usePhonesUploadOptions && (\n \n {\n testImageData ? setTestImageData(null) : capture();\n }}\n >\n {\n cameraView === \"user\" ? setCameraView(\"environment\") : setCameraView(\"user\")\n }}\n >\n
\n )}\n
\n {t(\"otc.my_result\")}
\n )}\n \n\n {!showWebCam && (\n {\n usePhonesUploadOptions\n ? document.getElementById(\"file-upload-trigger\").click()\n : setShowWebCam(!showWebCam)\n }}\n >\n
\n )}\n\n {showWebCam && !testImageData && (\n \n {usePhonesUploadOptions ? t(\"otc.add_image\") : t(\"otc.take_photo\")}\n
\n \n capture()}\n />\n \n
\n )}\n\n {showWebCam && testImageData && (\n fileType === \"pdf\" ? (\n \n
\n ) : (\n \n {!usePhonesUploadOptions && (\n
\n\n {activeErrors[\"file_too_large\"] && (\n \n
\n
\n )}\n {t(\"otc.or\")}
\n \n
\n {\n setCertifyCheckboxChecked(!certifyCheckboxChecked)\n setNextButtonDisabled(certifyCheckboxChecked)\n }}\n />\n
\n )\n}\n\nexport default OtcConfirmation;","import React, { useContext } from 'react';\nimport ResultCard from './ResultCard';\nimport OtcContext from '../contexts/OtcContext';\nimport ErrorMessage from '../../common/components/ErrorMessage';\n\nconst OtcClarifyResult = () => {\n\n const options = {\n 'no_lines': 'did_not_result',\n 'blue_control_line_only': 'blue_control_line_only',\n 'pink_sample_line_only': 'pink_sample_line_only',\n 'blue_control_line_and_pink_sample_line': 'blue_control_line_and_pink_sample_line',\n 'still_not_sure': 'still_not_sure'\n };\n\n const {\n t,\n didNotResultReason,\n setDidNotResultReason,\n setNextButtonDisabled,\n activeErrors,\n } = useContext(OtcContext);\n\n return (\n \n
\n {stepNumber}. {allowSelfResulting ? t(\"otc.confirm_result\") : t(\"otc.confirm_information\")}
\n\n \n \n
\n \n {t(\"otc.name\")} {user.full_name}\n
\n {allowSelfResulting ? (\n <>\n \n {t(\"otc.date\")} {format(new Date(`${resultDate.replace(/-/g, \"/\")} ${resultTime}`), 'MMMM dd, yyyy')}\n {resultTime && ` at ${format(new Date(`${resultDate.replace(/-/g, \"/\")} ${resultTime}`), 'h:mm aaa')}`}\n
\n \n {isTestMultiplex ? (\n
\n \n ) : (\n <>\n \n {t(\"otc.date\")} {format(new Date(), 'MMMM dd, yyyy')} at {format(new Date(), 'h:mm aaa')}\n
\n {barcode && (\n \n {t(\"otc.barcode\")} {barcode}\n
\n )}\n \n )}\n \n
\n )\n}\n\nexport default OtcClarifyResult;\n","import React, { useContext } from \"react\";\nimport OtcContext from \"../contexts/OtcContext\";\nimport { Image } from \"react-bootstrap\";\nimport ErrorMessage from \"../../common/components/ErrorMessage\";\nimport OldDateOfBirthInput from \"../../common/components/OldDateOfBirthInput\";\nimport { useTranslation } from \"react-i18next\";\nimport { createContext } from \"react\";\nimport FloatingLabelInput from \"../../common/components/FloatingLabelInput\";\nexport const VerifyDateOfBirthContext = createContext({});\n\nexport default function OtcVerifyDateOfBirth() {\n const {\n t,\n dateOfBirth,\n setDateOfBirth,\n firstName,\n activeErrors,\n flow,\n sections,\n allowSelfResulting,\n testConfiguration,\n testGroup,\n isArchived,\n } = useContext(OtcContext);\n\n const stepsArray = sections.filter(section => section.description);\n\n const resultsSchemaMainImage = () =>\n testConfiguration.results_schema?.otc?.images?.main;\n\n const mainImageUrl = {\n \"self_checkouts\": \"/images/abbott/abbott_box_with_frame.png\",\n \"general_self_checkouts\": \"/images/all_rapid_boxes_with_frame.png\",\n \"self_admin\": \"/images/self_admin_logo_with_frame.png\",\n }\n\n const resultsSchemaTestName = () =>\n testConfiguration.results_schema?.otc && t(\"otc.record_results_for_generic\", {name: testConfiguration.results_schema.label})\n\n const testNames = {\n \"self_checkouts\": t(\"otc.record_results_for_abbott\"),\n \"general_self_checkouts\": t(\"otc.record_results\"),\n \"self_admin\": t(\"otc.record_results\"),\n }\n const imageUrl = testConfiguration.logo_url || resultsSchemaMainImage() || mainImageUrl[flow];\n const imageClassName = \"text-center\";\n const imageStyle = {maxHeight: \"310px\"}\n const name = allowSelfResulting\n ? (resultsSchemaTestName() || testNames[flow])\n : ([\"general_self_checkouts\"].includes(flow)\n ? t(\"otc.activate_a_kit\")\n : t(\"otc.activate_a_kit_for_test\", {test: testConfiguration.display_name}));\n const title = t('otc.date_of_birth_question', { first_name: firstName });\n const subtitle = t('otc.confirm_dob_to_continue');\n const requestLastName = false;\n return (\n {t(\"otc.clarify_results\")}
\n{t(\"otc.choose_result_option\")}
\n\n {Object.entries(options).map(([optionText, optionImage]) => {\n return\n {\n if (didNotResultReason === optionText) {\n setDidNotResultReason(null);\n setNextButtonDisabled(true);\n } else {\n setDidNotResultReason(optionText);\n setNextButtonDisabled(false);\n }\n }} />\n
\n })}\n\n {activeErrors[\"generic_error\"] && (\n \n {imageUrl && (\n
\n )\n}\n","import React, { useContext } from \"react\";\nimport OtcContext from '../contexts/OtcContext';\nimport FloatingLabelSelect from \"../../common/components/FloatingLabelSelect\";\nimport { useMediaQuery } from \"react-responsive\";\n\n\nconst OtcTestKitSelector = () => {\n\n const {\n t,\n allTestKits,\n prettyTestKitNames,\n selectedKit,\n setSelectedKit,\n setNextButtonDisabled,\n stepNumber,\n } = useContext(OtcContext);\n\n const kits = Object.keys(allTestKits).filter(t => t !== \"other\");\n const kitOptions = kits.map((kit) => {\n return { value: kit, label: prettyTestKitNames[kit] }\n });\n\n const compareDisplayNames = (a,b) => {\n return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;\n }\n\n kitOptions.sort(compareDisplayNames).push({ value: \"other\", label: \"Other\" });\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' });\n\n return (\n \n
\n )}\n\n {name && {name}
}\n {description && (\n\n
\n
\n )}\n\n {t(\"otc.todays_test_process\")}
\n {description}\n\n
\n
\n {title}
\n{subtitle}
\n {requestLastName && (\n\n {\n setLastName(e.target.value);\n }}\n label={t('registration.last_name_label') + \" *\"}\n validation={\n activeErrors['incorrect_date_of_birth'] ? 'is-invalid' : ''\n }\n />\n
\n )}\n \n \n {activeErrors[\"incorrect_date_of_birth\"] && (\n
\n \n option.value === selectedKit)}\n onChange={(s) => {\n setSelectedKit(s.value);\n setNextButtonDisabled(false);\n }}\n className=\"test-kit-selector\"\n options={kitOptions}\n components={{ IndicatorSeparator: () => null }}\n filledValue={selectedKit}\n label={t(\"general_self_checkout.find_your_test\")}\n />\n
\n )\n}\n\nexport default OtcTestKitSelector;","import React, { useContext } from 'react';\nimport { Card, Button, Row, Col } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport OtcContext from '../contexts/OtcContext';\nimport PrimaryHeartOutline from '../../common/components/Icons/PrimaryHeartOutline';\nimport { createContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nexport const ViralSurveillanceOptInContext = createContext({});\n\nconst Section = (props) => {\n return ;\n};\n\nconst SectionItem = (props) => {\n return ;\n};\n\nconst OTCButton = (props) => {\n return ;\n};\n\nconst steps = [\n {\n label: 'viral_surveillance.opt_in.section_1_text_1',\n },\n {\n label: 'viral_surveillance.opt_in.section_1_text_2',\n },\n {\n label: 'viral_surveillance.opt_in.section_1_text_3',\n },\n];\n\nconst cards = [\n {\n image: '/images/primary_clock_and_calendar.svg',\n alt: 'primary_clock_and_calendar',\n title: 'viral_surveillance.opt_in.section_2.card_1_title',\n text: 'viral_surveillance.opt_in.section_2.card_1_text',\n },\n {\n image: '/images/primary_light_bulb.svg',\n alt: 'primary_light_bulb',\n title: 'viral_surveillance.opt_in.section_2.card_2_title',\n text: 'viral_surveillance.opt_in.section_2.card_2_text',\n },\n {\n image: '/images/primary_success_shield.svg',\n alt: 'primary_success_shield',\n title: 'viral_surveillance.opt_in.section_2.card_3_title',\n text: 'viral_surveillance.opt_in.section_2.card_3_text',\n },\n];\n\nexport default function () {\n const { handleSurveillance, testStripCreated, stepForward } =\n useContext(OtcContext);\n const showOptOut = true;\n return (\n {stepNumber}. {t(\"otc.which_test_did_you_take\")}
\n\n{t('viral_surveillance.opt_in.title')}
\n{t('viral_surveillance.opt_in.subtitle')}
\n\n \n \n \n
\n ))}\n handleSurveillance(true)}\n data-test-hook=\"yestoparticipate\"\n >\n {t('viral_surveillance.opt_in.sign_up')}\n \n
\n \n {t('viral_surveillance.opt_in.section_1_title')}\n
\n {steps.map(({ label }, index) => (\n{t(label)}
\n \n \n {t('viral_surveillance.opt_in.section_2_title')}\n
\n\n 
\n
\n \n {t(title)}\n
\n \n {t(text)}
\n \n stepForward()} data-test-hook=\"gotoprofile\">\n {t('viral_surveillance.opt_in.continue_to_result')}\n \n
\n {t('viral_surveillance.opt_in.create_page_title')}
\n\n {t('viral_surveillance.opt_in.create_page_text_1')}\n
\n {t('viral_surveillance.opt_in.create_page_text_2')}\n
\n
\n )\n}\n\nexport default OtcSurvey;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\n\nconst Welcome = () => {\n const { t } = useTranslation();\n\n return (\n {stepNumber}. {t(\"otc.answer_survey\")}
\n\n \n
\n \n );\n};\n\nexport default Welcome;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\n\nconst StepOne = (props) => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.welcome_title')}\n
\n{t('public_test_groups.demo.instructions.welcome_text_1')}
\n{t('public_test_groups.demo.instructions.welcome_text_2')}
\n\n
\n \n \n
\n \n );\n};\n\nexport default StepOne;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepTwo = () => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.step_one_title')}\n
\n{t('public_test_groups.demo.instructions.step_one_text_1')}
\n{t('public_test_groups.demo.instructions.step_one_text_2')}
\n\n
\n \n \n
\n \n );\n};\n\nexport default StepTwo;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepThree = () => {\n const { t } = useTranslation();\n return (\n \n {t('public_test_groups.demo.instructions.step_two_title')}\n
\n\n
\n \n \n
\n \n {t('public_test_groups.demo.instructions.step_three_title')}\n
\n- \n
- \n
\n
\n - \n
- \n
\n
\n \n \n );\n};\n\nexport default StepThree;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport ReactMarkdown from 'react-markdown';\nimport { useTranslation } from 'react-i18next';\n\nconst StepFour = () => {\n const { t } = useTranslation();\n\n return (\n \n \n
\n \n {t('public_test_groups.demo.instructions.step_four_title')}\n
\n- \n
- \n
\n
\n - \n
- \n
\n
\n \n \n );\n};\n\nexport default StepFour;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepFive = () => {\n const { t } = useTranslation();\n\n return (\n \n \n
\n \n {t('public_test_groups.demo.instructions.step_five_title')}\n
\n- \n
- \n
\n
\n - \n
- {t('public_test_groups.demo.instructions.step_five_text_2')} \n
\n
\n \n \n );\n};\n\nexport default StepFive;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepSix = () => {\n const { t } = useTranslation();\n\n return (\n \n \n
\n \n );\n};\n\nexport default StepSix;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepSeven = () => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.step_six_title')}\n
\n\n
\n \n \n
\n \n );\n};\n\nexport default StepSeven;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepEight = () => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.step_seven_title')}\n
\n\n
\n \n \n
\n \n );\n};\n\nexport default StepEight;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst StepNine = () => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.step_eight_title')}\n
\n\n
\n \n
\n );\n};\n\nexport default StepNine;\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nconst StepTen = () => {\n const { t } = useTranslation();\n\n return (\n \n {t('public_test_groups.demo.instructions.step_nine_title')}\n
\n{t('public_test_groups.demo.instructions.step_nine_text_1')}
\n \n- \n
- {t('public_test_groups.demo.instructions.step_nine_text_2')} \n
- {t('public_test_groups.demo.instructions.step_nine_text_3')} \n
- {t('public_test_groups.demo.instructions.step_nine_text_4')} \n
\n \n
\n \n );\n};\n\nexport default StepTen;\n","import i18n from \"i18next\";\n\nexport const languageObject = {\n en: 'English',\n es: 'Español',\n hmn: 'Hmong',\n so: 'Soomaali',\n};\n\nexport const lang = () => {\n if (Object.keys(languageObject).includes(i18n.language))\n return i18n.language;\n else return 'en';\n};\n","import React, { useEffect, useState } from 'react';\nimport Welcome from './components/Welcome';\nimport StepOne from './components/StepOne';\nimport StepTwo from './components/StepTwo';\nimport StepThree from './components/StepThree';\nimport StepFour from './components/StepFour';\nimport StepFive from './components/StepFive';\nimport StepSix from './components/StepSix';\nimport StepSeven from './components/StepSeven';\nimport StepEight from './components/StepEight';\nimport StepNine from './components/StepNine';\nimport StepTen from './components/StepTen';\nimport { Container, Button, Row, Col } from 'react-bootstrap';\nimport Header from '../../../Registration/components/Header';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { useTranslation } from 'react-i18next';\nimport { languageObject } from '../../common/utils';\nimport { lang } from '../../common/utils';\n\nexport const otcInstructionSubSteps = [\n \n {t('public_test_groups.demo.instructions.step_ten_title')}\n
\n\n
\n \n
\n );\n};\n\nexport default DemoInstructions;\n","import React, { useState, useEffect } from \"react\";\nimport { Button, Container, Row, Col, ProgressBar } from \"react-bootstrap\";\nimport axios from 'axios';\nimport Header from '../../Registration/components/Header';\nimport OtcContext from '../contexts/OtcContext';\nimport OtcCodeReader from \"./OtcCodeReader\";\nimport OtcResultsEntry from \"./OtcResultsEntry\";\nimport OtcSummary from \"./OtcSummary\";\nimport OtcInstructions from \"./OtcInstructions\";\nimport OtcDateOfTest from \"./OtcDateOfTest\";\nimport OtcPhoto from \"./OtcPhoto\";\nimport OtcConfirmation from \"./OtcConfirmation\";\nimport OtcClarifyResult from \"./OtcClarifyResult\";\nimport OtcVerifyDateOfBirth from \"./OtcVerifyDateOfBirth\";\nimport OtcTestKitSelector from \"./OtcTestKitSelector\";\nimport OtcSurveillance from \"./OtcSurveillance\";\nimport OtcSurvey from \"./OtcSurvey\";\nimport { useTranslation } from 'react-i18next';\nimport * as SurveyOriginal from \"survey-react\";\nimport { Model, StylesManager } from \"survey-core\";\nimport SwitchUsers from \"../../MembersPortal/components/partials/SwitchUsers\";\nimport { setHousehold } from \"../../MembersPortal/components/utils\";\nimport AlertHeader from \"../../common/components/AlertHeader\";\nimport { otcInstructionSubSteps } from \"../../PublicTestGroups/Demo/Instructions/Instructions\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTriangleExclamation } from \"@fortawesome/pro-regular-svg-icons\";\nimport \"survey-core/plugins/bootstrap-integration\";\n\nexport const verifyIfPhone = () => {\n return /Android|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)\n};\n\nexport const verifyIfSpecificDevice = (deviceArray) => {\n const devices = new RegExp(deviceArray.join(\"|\"));\n return devices.test(navigator.userAgent);\n};\n\nexport const widthOfScreen = () => {\n return window.innerWidth;\n}\n\nconst OtcFlow = ({\n test_group,\n flippers,\n appointment,\n test_configuration,\n user,\n test_group_test_configuration,\n controller,\n flow,\n all_test_kits,\n pretty_test_kit_names,\n}) => {\n\n const today = new Date();\n const params = new URLSearchParams(window.location.search);\n const [currentStep, setCurrentStep] = useState(0);\n const [test, setTest] = useState(null);\n const [result, setResult] = useState(null);\n const [multiplexResult, setMultiplexResult] = useState(null);\n const [didNotResultReason, setDidNotResultReason] = useState(null);\n const [barcode, setBarcode] = useState(\"\");\n const [barcodeConfirmation, setBarcodeConfirmation] = useState(null);\n const [barcodeScanned, setBarcodeScanned] = useState(false);\n const [numberOfScanTries, setNumberOfScanTries] = useState(0);\n const [barcodeReaderSkipped, setBarcodeReaderSkipped] = useState(false);\n const [showManualInput, setShowManualInput] = useState(false);\n const [showWebCam, setShowWebCam] = useState(false);\n const [testImageData, setTestImageData] = useState(null);\n const [certifyCheckboxChecked, setCertifyCheckboxChecked] = useState(false);\n const [nextButtonDisabled, setNextButtonDisabled] = useState(false);\n const [displayFooterButtons, setDisplayFooterButtons] = useState(true);\n const [dateOfBirth, setDateOfBirth] = useState({day: null, month: null, year: null});\n const [progress, setProgress] = useState(10);\n const [resultDate, setResultDate] = useState(\"\");\n const [resultTime, setResultTime] = useState(\"\");\n const [testTakenToday, setTestTakenToday] = useState(null);\n const [resultInLastThirtyDays, setResultInLastThirtyDays] = useState(true);\n const hasSurvey = Object.keys(test_configuration.survey).length > 0;\n const allowSelfResulting = test_group_test_configuration.allow_self_resulting;\n const needsToScanQRCode = flow === \"self_checkouts\" || test_configuration.generate_record_configuration === \"scan_only\"\n const [selectedKit, setSelectedKit] = useState(null);\n const [selectedTestType, setSelectedTestType] = useState(null);\n const [loading, setLoading] = useState(false);\n const [loggedIn, setLoggedIn] = useState(null);\n const isTestLucira = test_configuration.service_specification === \"naat_lucira_flu_ab_covid19\";\n const isTestMultiplex = flow === \"self_admin\" && allowSelfResulting && isTestLucira;\n const [testStripCreated, setTestStripCreated] = useState(false);\n const isArchived = user.archived;\n const instructionFlowAvailable = flow === \"quidel_self_checkouts\";\n const showMultiStepInstructions = instructionFlowAvailable && flippers.quidel_detailed_otc_instructions;\n const showPhotoStep = allowSelfResulting && (test_group_test_configuration.request_otc_photo || test_group_test_configuration.require_otc_photo);\n\n const { t, i18n } = useTranslation();\n let model;\n if (flippers.upgraded_surveyjs) {\n StylesManager.applyTheme(\"bootstrap\");\n model = new Model(test_configuration.survey)\n } else {\n SurveyOriginal.StylesManager.applyTheme(\"bootstrap\");\n model = new SurveyOriginal.Model(test_configuration.survey)\n }\n model.render();\n model.locale = i18n.language;\n\n let multiplexSubTests = [];\n if (isTestLucira) {\n multiplexSubTests = test_configuration.results_schema.results.map(\n ({ type, label, possible_values }) => {\n const resultOptions = possible_values.map(({ label, value, icon }) => {\n return {\n name: label,\n value: value,\n icon: ['fa', icon],\n };\n });\n return {\n key: type,\n label: label,\n resultOptions: resultOptions,\n };\n },\n );\n };\n\n const [activeErrors, setActiveErrors] = useState({});\n const errorOptions = {\n \"incorrect_date_of_birth\": t(\"otc.incorrect_dob\"),\n \"unanswered_survey\": t(\"registration.errors.survey_unanswered\"),\n \"generic_error\": t(\"errors.generic.message\"),\n \"already_scanned\": t(\"employer_testing.code_reader.already_used_error\"),\n \"file_too_large\": t(\"otc.file_too_large\", {size: \"20MB\"}),\n \"test_not_in_last_thirty_days\": t(\"otc.enter_valid_date_in_last_x_days\", {n: \"30\"}),\n \"incorrect_barcode_format\": t(\"otc.barcode_format_not_valid\"),\n \"barcodes_dont_match\": t(\"self_administration.errors.different_barcodes\"),\n };\n\n useEffect(() => {\n let token = params.get('token') || params.get('access_token');\n setHousehold(token, setLoggedIn, user);\n }, []);\n\n useEffect(() => {\n // hacky way to update the title of otcInstructionSubSteps\n if (!instructionFlowAvailable) return;\n const currentSubStepTitle = document.getElementsByClassName('instruction-sub-step-title')[0];\n if (!currentSubStepTitle) return;\n const currentSubStepTitleText = currentSubStepTitle.innerHTML;\n const newSubStepTitle = document.createElement('h4');\n const newSubStepTitleText = currentSubStepTitleText.split(\": \")[1] || \"Wash your hands\";\n newSubStepTitle.innerHTML = `${currentStep + 1}. ${newSubStepTitleText}`;\n currentSubStepTitle.parentNode.replaceChild(newSubStepTitle, currentSubStepTitle);\n }, [currentStep]);\n\n const setError = (error) => {\n const newError = {};\n newError[error] = errorOptions[error];\n setActiveErrors({...activeErrors, ...newError});\n }\n\n const clearError = (error) => {\n delete activeErrors[error]\n }\n\n const clearErrors = () => {\n setActiveErrors({});\n }\n\n\n const sections = [\n !user.date_of_birth\n && { name: \"verify_date_of_birth\", render: \n \n {currentStep === 0 && \n {\n if (currentStep === 10) {\n window.location.href = `/test-instructions/l?locale=${lang()}`;\n } else {\n setCurrentStep(currentStep + 1);\n }\n }}\n >\n {t('public_test_groups.demo.instructions.continue')} \n
\n \n
\n \n {\n if (currentStep === 0) {\n window.location.href = `/test-instructions/l?locale=${lang()}`;\n } else {\n setCurrentStep(currentStep - 1);\n }\n }}\n >\n {t('public_test_groups.demo.instructions.back')}\n \n
\n \n \n
\n \n )\n}\n\nexport default OtcFlow;\n","import React, { useState } from 'react';\nimport { Card } from 'react-bootstrap';\nimport Chevron, { Bar } from '../../../common/components/Chevron';\nimport TooltipWrapper from '../../../common/components/TooltipWrapper';\nimport { formatNumberWithCommas } from '../../../common/utils';\nimport Wrapped from '../../../common/components/Wrapped';\n\nconst SectionTitle = ({ title }) => (\n \n \n {\n // use plain div for surveillance since it handles its layout differently\n sections[currentStep].name !== 'surveillance' ? (\n \n {sections[currentStep].render}\n \n ) : (\n \n {\n displayFooterButtons && (\n
\n \n
\n {t(\"otc.report_a_test\")}{` ${widthOfScreen() > 600 ? user.full_name : user.first_name}`}
\n {t(\"otc.x_%_completed\", {n: progress})}
\n \n {isArchived && (\n Please contact your school or organization for more information, or find your site here.
}\n icon={faTriangleExclamation}\n className=\"m-4\"\n />\n )}\n \n {sections[currentStep].render}\n
\n )\n }\n \n \n \n {t(\"otc.back_button\")}\n \n )}\n \n \n {lastStep ? t(\"otc.complete_button\") : t(\"otc.next_button\")}\n \n )}\n \n \n
\n )\n }\n \n
\n\n {title}\n \n
\n
\n);\n\nexport const CountItem = ({\n title,\n count,\n availability,\n tooltip: tooltipContent,\n style,\n sm,\n}) => {\n const countFontSize = sm ? '1.3rem' : '1.5rem';\n\n return (\n \n
\n
\n
\n);\n\nconst LowerIndicators = ({\n group_standard_capacity,\n group_access_key_capacity,\n shared_standard_capacity,\n shared_access_key_capacity,\n}) => (\n \n
\n);\n\nexport const Metrics = ({ administered, appointments, ...props }) => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n
\n );\n};\n","import React, { useState, useRef, useEffect } from 'react';\nimport {\n Button,\n Form,\n Modal,\n} from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport BarcodeScanner from './BarcodeScanner';\nimport ModalHeader from './ModalHeader';\nimport FloatingLabelInput from './FloatingLabelInput';\n\nconst AccessCodeSearch = ({\n class_name = '',\n size = 'sm',\n show_as_dropdown_item: showAsDropdownItem = false,\n}) => {\n const [show, setShow] = useState(false);\n const [accessCode, setAccessCode] = useState('');\n const [showBarcodeScanner, setShowBarcodeScanner] = useState(false);\n\n const onSearch = (e) => {\n e.preventDefault();\n const path = window.location.pathname;\n const urlParams = new URLSearchParams();\n if (accessCode) {\n urlParams.set('access_code', accessCode);\n }\n window.location.href = `${path}?${urlParams.toString()}`;\n };\n\n const onHide = () => {\n setShowBarcodeScanner(false);\n setShow(false);\n };\n\n const inputRef = useRef();\n useEffect(() => {\n if (show) {\n inputRef.current && inputRef.current.focus();\n }\n });\n\n if (show) {\n return (\n Not seeing the tag you'd like to merge into? Search below
\n \n \n
\n \n Loading affected user count...\n }\n \n
\n
\n )\n};\n\nexport default AffectedUsers;\n","import React from 'react';\nimport {\n ActionCableProvider,\n ActionCableConsumer,\n} from 'react-actioncable-provider';\n\nconst ActionCableSubscriber = ({ channel, onReceived }) => {\n const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';\n const url = `${protocol}://${window.location.host}/cable`;\n\n return (\n \n {affectedUsersText}\n
}\n {!affectedUsersText && <>\n {statusMessage}
}\n {error && | \n | }\n # | \nFriendly name | \nDescription | \nShow on registration | \n\n |
|---|---|---|---|---|---|
| \n | }\n {tag.id} | \n{tag.friendly_name} | \n{tag.description} | \n{tag.show_on_registration ? 'Yes' : 'No'} | \nEdit | \n
\n {user.phone_formatted} {verifiedCheck(user.phone_verified)}\n
\n )}\n {user.email && (\n \n {user.email} {verifiedCheck(user.email_verified)}\n
\n )}\n Population: {test_group_user.population_name}
\n Tags: {user.tags.map((tag) => tag.friendly_name).join(', ')}
\n \n {createHoverBadge(\n 'danger',\n 'Missing information',\n links.edit_test_group_user_url,\n 'top',\n )}\n
\n )}\n {!on_demand_only && (\n \n {test_group_user.has_appointment &&\n createBadge(\n 'secondary-light',\n 'Has appointment',\n links.test_group_participant_url,\n )}\n
\n )}\n \n {test_group_user.is_waitlisted &&\n createBadge('warning', 'Waitlisted', waitlist_link)}\n
\n \n {test_group_user.archived &&\n createBadge('danger', 'Archived', appointment_link)}\n
\n \n {!is_global_search &&\n test_group.has_active_consent &&\n !test_group_user.consented &&\n createBadge(\n 'danger',\n test_group_user.consent_gone_status,\n links.consent_url,\n )}\n
\n logging out..
\n } else {\n return You will be logged out due to inactivity soon: {minutes}:{seconds}
\n }\n } else {\n return <>\n }\n };\n\n return (\n \n {name && (\n \n )}\n handleChange(yesValue)}\n active={value === yesValue}\n >\n {yesLabel}\n \n handleChange(noValue)}\n active={value === noValue}\n >\n {noLabel}\n \n
\n );\n};\n\nexport default YesNoCheckbox;\n","import React, { useEffect, useState } from 'react';\nimport DatePicker, { DateObject } from 'react-multi-date-picker';\nimport { Button, Form } from 'react-bootstrap';\nimport Select from '../../common/components/Select';\nimport { SELECT_TIME_OPTIONS } from '../../common/utils/slotting';\nimport PopOverWindow from '../../common/components/PopOverWindow';\nimport YesNoCheckbox from '../../common/components/YesNoCheckbox';\nimport styled from 'styled-components';\nimport { weekDays } from '../../common/components/MultiDatePickerField';\n\nconst repeatOptions = [\n { value: 'no_repeat', label: 'Does not repeat' },\n { value: 'daily', label: 'Daily' },\n { value: 'weekly', label: 'Weekly' },\n { value: 'monthly', label: 'Monthly' },\n { value: 'custom', label: 'Custom...' },\n];\n\nconst timesOptions = (repeatOption) => {\n const maxTimes =\n repeatOption === 'daily' ? 365 : repeatOption === 'weekly' ? 52 : 12;\n\n return Array(maxTimes)\n .fill()\n .map((_, idx) => ({\n value: idx + 1,\n label: `${idx + 1} ${idx === 0 ? 'ocurrence' : 'ocurrences'}`,\n }));\n};\n\nconst HiddenInputs = ({\n date,\n time,\n timezone,\n repeatOption,\n endDateRadioSelected,\n endDate,\n ocurrencesCount,\n customDaysInterval,\n}) => {\n const repeating = repeatOption !== 'no_repeat';\n const timeOptionLabel = SELECT_TIME_OPTIONS.find(\n (opt) => opt.value === time,\n ).label;\n\n return (\n Set up schedule
\n \n \n \n {displayEndOption && (\n \n )}\n\n\n setOpen(true)}\n />\n }\n />\n setOpen(false)}\n timezones={timezones}\n onSave={() => {\n setScheduled(true);\n setOpen(false);\n }}\n date={date}\n setDate={setDate}\n time={time}\n setTime={setTime}\n timezone={timezone}\n setTimezone={setTimezone}\n repeatOption={repeatOption}\n setRepeatOption={setRepeatOption}\n endDateRadioSelected={endDateRadioSelected}\n setEndDateRadioSelected={setEndDateRadioSelected}\n endDate={endDate}\n setEndDate={setEndDate}\n ocurrencesCount={ocurrencesCount}\n setOcurrencesCount={setOcurrencesCount}\n customDaysInterval={customDaysInterval}\n setCustomDaysInterval={setCustomDaysInterval}\n />\n
\n \n {variables.map((variable, idx) => (\n
\n \n {\n e.preventDefault();\n setExpanded(!expanded);\n }}\n >\n Personalize {props.label?.toLowerCase()}{' '}\n
\n );\n};\n\nexport const TextAreaWithVariables = ({\n label,\n name,\n id,\n rows = 2,\n additional_variables,\n hide_record_test_link_quick_add,\n test_hook = null,\n}) => {\n const textAreaRef = useRef(null);\n const eventRef = useRef(new Event('content_change'));\n\n const emitCustomEvent = () =>\n textAreaRef.current?.dispatchEvent(eventRef?.current);\n\n const insertVariable =\n ({ text: variable, replaceText }) =>\n () => {\n const selectionStart = textAreaRef.current.selectionStart;\n const selectionEnd = textAreaRef.current.selectionEnd;\n const text = textAreaRef.current.value;\n const newText = `${text.substring(\n 0,\n selectionStart,\n )}${variable}${text.substring(selectionEnd, text.length)}`;\n\n textAreaRef.current.value = newText;\n textAreaRef.current.focus();\n\n const selectionStartOffset = replaceText\n ? variable.indexOf(replaceText)\n : variable.length;\n const selectionEndOffset = replaceText ? replaceText.length : 0;\n\n textAreaRef.current.selectionStart =\n selectionStart + selectionStartOffset;\n textAreaRef.current.selectionEnd =\n textAreaRef.current.selectionStart + selectionEndOffset;\n emitCustomEvent();\n };\n\n return (\n \n \n
\n );\n};\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport ReactMarkdown from 'react-markdown/with-html';\nimport styled from 'styled-components';\nimport { VARIABLES } from './TextAreaWithVariables';\n\nconst PreviewContainer = styled.div`\n position: relative;\n background-color: white;\n border-width: 2px;\n border-style: solid;\n border-radius: 0.25rem;\n border-color: transparent;\n word-break: break-word;\n\n &.active {\n box-sizing: border-box;\n border-color: var(--bs-primary);\n }\n`;\n\nconst CharacterCount = ({\n count,\n limit = 160,\n whithinLimit = count < limit,\n}) => (\n \n \n {!whithinLimit &&\n 'Your message might be sent in multiple SMS messages and links might not work: '}\n A standard SMS message can contain a maximum of {limit} characters.{' '}\n {count} is an estimate based on the content of your message.\n \n
\n);\n\nexport const MessagePreview = ({\n organization_name = '',\n enable_markdown: enableMarkdown = false,\n target_field_id: targetFieldId,\n subject_field_id: subjectFieldId,\n additional_variables = [],\n}) => {\n const [value, setValue] = useState('');\n const [charCount, setCharCount] = useState(0);\n const [subject, setSubject] = useState('');\n const availableVariables = useRef(VARIABLES.concat(additional_variables));\n\n const updateValue = useCallback((event) => {\n let val = event.target.value;\n const keys = val.match(/(%{[a-zA-Z]+?.*?})/g);\n let characterCount = val.length;\n keys?.forEach((key) => {\n const subKeyMatch = /\\(.*=(.*)\\)/.exec(key);\n const subKey = subKeyMatch && subKeyMatch[1];\n const variable = subKey\n ? availableVariables.current.find((v) =>\n [\n key.replace(subKey, 'id'),\n key.replace(subKey, 'location'),\n ].includes(v.text),\n )\n : availableVariables.current.find((v) => v.text === key);\n if (variable) {\n val = val.replace(\n key,\n `${variable.previewText || variable.name}`,\n );\n\n // Update estimated count\n if (['%{name}', '%{full_name}', '%{location_name}'].includes(key)) {\n characterCount += 12;\n } else {\n characterCount += 40;\n }\n }\n });\n setValue(val);\n setCharCount(characterCount);\n }, []);\n\n const updateSubject = useCallback((event) => {\n setSubject(event.target.value);\n }, []);\n\n const toggleActiveClass = useCallback((event) => {\n const previewId = `${event.target.id}_preview`;\n document.getElementById(previewId).classList.toggle('active');\n }, []);\n\n useEffect(() => {\n const elem = document.getElementById(targetFieldId);\n elem.addEventListener('content_change', updateValue);\n elem.addEventListener('focus', toggleActiveClass);\n elem.addEventListener('blur', toggleActiveClass);\n return () => {\n elem.removeEventListener('content_change', updateValue);\n elem.removeEventListener('focus', toggleActiveClass);\n elem.removeEventListener('blur', toggleActiveClass);\n };\n }, []);\n\n useEffect(() => {\n if (subjectFieldId) {\n const elem = document.getElementById(subjectFieldId);\n elem.addEventListener('change', updateSubject);\n elem.addEventListener('focus', toggleActiveClass);\n elem.addEventListener('blur', toggleActiveClass);\n return () => {\n elem.removeEventListener('change', updateSubject);\n elem.removeEventListener('focus', toggleActiveClass);\n elem.removeEventListener('blur', toggleActiveClass);\n };\n }\n }, []);\n\n return (\n \n \n isFuture(timeOpt.value, minTime),\n )\n : SELECT_TIME_OPTIONS\n }\n onChange={setTime}\n valueKey=\"value\"\n labelKey=\"label\"\n isDisabled={!checked}\n {...props}\n />\n\n {checked && time && (\n
\n);\n\nconst AppointmentStartTimeField = ({ name_prefix = '', start_day = '' }) => {\n const [startTime, setStartTime] = useState(null);\n const [endTime, setEndTime] = useState(null);\n const [checked, setChecked] = useState(false);\n\n useEffect(() => {\n if (checked && isFuture(startTime, endTime)) setEndTime(null);\n }, [startTime, checked, endTime, setEndTime]);\n\n return (\n \n setChecked(!checked)}\n id={`${name_prefix}_checkbox_id`}\n />\n \n Specific Appointment Times Ranges\n \n
\n \n
\n \n *Please note: It has been 1 hour\n since you have selected your location. Please confirm you are still at\n this location to continue. Alternatively, please select another location.\n
\n ) : (\n\n *Please note: Your location will\n only be saved for 1 hour. Your location will not be saved after logging\n out. All services that you administer will be marked as administered at\n the location you have selected.\n
\n );\n\nconst LocationSelectModal = ({\n show,\n locations,\n selectedLocation: propSelectedLocation,\n previouslySelectedLocation: propPreviouslySelectedLocation,\n handleSave,\n onHide,\n}) => {\n const [previouslySelectedLocation, _] = useState(\n propPreviouslySelectedLocation,\n );\n const [selectedLocation, setSelectedLocation] = useState(\n propSelectedLocation || previouslySelectedLocation,\n );\n\n const isEditingLocation = !!propSelectedLocation;\n // Modal dismissable if editing location\n const modalProps = isEditingLocation\n ? {\n onHide: onHide,\n }\n : { backdrop: 'static', keyboard: false };\n\n return (\n\n \n \n {location ? `Location: ${location.title}` : 'No location selected'}\n \n \n Edit\n \n
\n \n);\n\nconst LocationSelector = ({ locations }) => {\n const { selectedLocation, previouslySelectedLocation, setSelectedLocation } =\n useContext(LocationContext);\n const [show, setShow] = useState(!selectedLocation);\n\n const handleSave = (location) => {\n setSelectedLocation(location);\n window.location.reload();\n };\n\n return (\n \n {logoName}\n
\n \n {name}
\n {disabled && {disabledText}
}\n \n \n )\n}\n\nconst PickHouseholdMember = ({test_group_id}) => {\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n axios.get(`/members/household_members.json?test_group_id=${test_group_id}`).then(response => {\n setData(response.data);\n setLoading(false);\n }).catch((error) => {\n console.error(error);\n });\n }, []);\n\n return (\n <>\n Member selection
\n\n
Who are you trying to register for?
\n {loading ? \nThis group is currently not accepting registrations
\n }\n \n {data.household_members?.map(householdMember => {\n const colorIndex = data.household_members.findIndex(x => x.id == householdMember.id);\n\n return (\n {\n axios.post(`/members/test_groups/${test_group_id}/test_group_registrations.json`, {\n household_member: { id: householdMember.id }\n }).then(response => {\n const registrationUrl = response.data.test_group_user.access_code_registration_link;\n location.href = registrationUrl;\n });\n }}\n disabled={!data.test_group.allow_access_code_registration}\n disabledText=\"This group does not allow existing members to register\"\n />\n )\n })}\n {\n location.href = data.test_group.allow_normal_registration ?\n `/r/${test_group_id}?new_member_registration=true` :\n `/a/${test_group_id}?new_member_registration=true`;\n }}\n outline\n disabled={!data.test_group.registration_enabled}\n disabledText=\"This group does not allow new member creation\"\n />\n
\n \n }\n Drag and drop your file here
\n\n {selectedField &&
\n
\n );\n}\nconst HeaderMapperSelection = ({header, examples, setHeader, selectedHeader, options}) => {\n return (\n Matched to {selectedField.label}
}\n {!selectedField && No match detected
}\n \n
\n \n\n {percentage(total - counts.isNull, total)}% of your rows have a value for this column\n
\n {errorTypeCounts.total === 0 && (\n \n \n\n All rows pass validation for this column.\n
\n )}\n {errorTypeCounts.total > 0 && (\n \n \n\n {(errorTypeCounts.total / total < 0.02) && {errorTypeCounts.total} rows fail validation (repair on next step)}\n {(errorTypeCounts.total / total >= 0.02) && {percentage(errorTypeCounts.total, total)}% of rows fail validation (repair on next step)}\n
\n )}\n \n \n \n {header.slice(0, 30)} \n \n \n \n \n
\n \n \n \n {examples.map((e, idx) => {\n return (\n
\n
\n );\n}\n\nconst HeaderMapperRow = ({options, header, examples, headerMapping, setHeaderMapping, fieldStatistics}) => {\n let block = null;\n if (headerMapping.confirmed) {\n block = (\n | \n {idx}\n | \n\n {e || No Data}\n | \n
\n \n Confirmed\n
\n\n \n \n \n \n Ignored\n
\n\n \n \n \n {headerMapping.selectedField && (\n
\n \n {\n headerMapping.selectedField && \n \n }\n \n
\n \n \n \n {\n let newMappings = { ...headerMappings }\n headerMapping.columnIndex = columnIndex;\n newMappings[columnIndex] = headerMapping\n setHeaderMappings(newMappings);\n }}\n options={options}\n fieldStatistics={fieldStatistics}\n />\n })\n }\n \n \n {hasMissingRequiredFields && (\n missingRequiredFields.map(f => {\n return (\n \n \n
\n );\n};\n\nexport default HeaderMapper;\n","export const formatData = (headerMappings, data) => {\n const output = [];\n for (let rowIndex = 1; rowIndex < data.length; rowIndex++) {\n const item = {};\n const row = data[rowIndex];\n Object.keys(headerMappings).forEach(k => {\n const headerMapping = headerMappings[k];\n const columnIndex = headerMapping.columnIndex;\n if (headerMapping.selectedField) {\n item[headerMapping.selectedField.value] = row[columnIndex];\n }\n });\n item.rowIndex = rowIndex - 1;\n output.push(item);\n }\n return output;\n}\n\nexport const buildSuggestedHeaderMappings = (fields, headers) => {\n const headerMappings = {};\n headers.forEach((header, columnIndex) => {\n const foundField = fields.find(f => {\n const normalizedKey = f.key.toLowerCase().replace(\"_\", \"\").replace(\" \", \"\");\n const normalizedHeader = header.toLowerCase().replace(\"_\", \"\").replace(\" \", \"\");\n return normalizedKey === normalizedHeader;\n });\n\n if (!foundField) {\n return;\n }\n\n headerMappings[columnIndex] = {\n columnIndex,\n name: header,\n selectedField: {\n value: foundField.key,\n label: foundField.label\n }\n }\n });\n // create header mappings (columnIndex => {columnIndex, name: inputHeader, selectedField: {value: '', label: ''}})\n return headerMappings;\n}\n\nexport const filterEmptyRows = (formattedData) => {\n return formattedData.filter(d => Object.keys(d).filter(k => k !== 'rowIndex').length > 0);\n}\n\nexport const filterInvalidRows = (formattedData, validationResult) => {\n const rowIndexesWithErrors = validationResult.rowIndexesWithErrors();\n formattedData = formattedData.filter(row => !rowIndexesWithErrors.has(row.rowIndex));\n return filterEmptyRows(formattedData);\n}\n\nexport const removeTemporaryKeys = (formattedData) => {\n formattedData.forEach(f => {\n delete f.rowIndex;\n });\n return formattedData;\n}\n\nexport const fieldIsRequired = (field) => {\n if (field.validators && field.validators.length > 0) {\n const isRequired = field.validators.find(v => v.validate === 'required');\n return !!isRequired;\n }\n return false;\n}\n\nexport const buildFinalData = (formattedData, validationResult) => {\n return removeTemporaryKeys(filterInvalidRows(filterEmptyRows(formattedData), validationResult));\n}","import React, { useEffect, useRef, useState } from 'react';\nimport {AgGridColumn, AgGridReact} from 'ag-grid-react';\nimport 'ag-grid-community/dist/styles/ag-grid.css';\nimport 'ag-grid-community/dist/styles/ag-theme-alpine.css';\nimport { Button, Margin, Align, Row, Col } from './common';\nimport { filterEmptyRows } from '../utils';\n\n\nconst DataEditor = ({ formattedData, fields, onSubmit, onBack, validationResult, setRowData }) => {\n const [gridApi, setGridApi] = useState(null);\n const [gridColumnApi, setGridColumnApi] = useState(null);\n const validationRef = useRef(validationResult);\n validationRef.current = validationResult;\n\n useEffect(() => {\n setTimeout(() => {\n gridApi?.redrawRows();\n }, 0);\n }, [validationResult]);\n\n const onGridReady = (params) => {\n setGridApi(params.api);\n setGridColumnApi(params.columnApi);\n };\n\n const [onlyShowErrors, _setOnlyShowErrors] = useState(false);\n const computeCellStyle = (params) => {\n if (validationRef.current.hasError(params.column.colDef.field, params.data.rowIndex)) {\n return {\n color: 'rgba(192, 57, 43, 1.0)',\n backgroundColor: 'rgba(231, 76, 60, 0.3)',\n border: '1px solid rgba(192, 57, 43, 1.0)',\n }\n }\n return null;\n }\n\n const setOnlyShowErrors = (newValue) => {\n _setOnlyShowErrors(newValue);\n let newRowData;\n if (newValue) {\n const rowIndexesWithErrors = validationResult.rowIndexesWithErrors();\n newRowData = formattedData.filter((_, index) => rowIndexesWithErrors.has(index));\n } else {\n newRowData = formattedData;\n }\n gridApi.setRowData(newRowData);\n }\n\n const onCellValueChanged = (params) => {\n // Change the data and revalidate the entire dataset.\n // Because some validations are global validations.\n setRowData(params.data, params.rowIndex);\n }\n\n const shouldShowSubmit = () => {\n const hasData = filterEmptyRows(formattedData).length > 0;\n return hasData;\n }\n\n return (\n \n
\n {\n data[0].map((header, columnIndex) => {\n const examples = data.slice(1, 4).map(d => d[columnIndex]);\n const headerMapping = headerMappings[columnIndex] || {};\n const fieldStatistics = {\n total: statistics.total,\n statistics: statistics.statisticsByFieldKey[headerMapping.selectedField?.value],\n }\n return {parsed.data.length - 1} Rows Imported
\n\n \n Missing mapping for {f.label}\n \n \n
\n );\n })\n )}\n \n \n \n {\n setOnlyShowErrors(e.target.checked);\n }} type=\"checkbox\" name=\"row-errors\" id=\"row-errors\" />\n \n \n \n \n \n {shouldShowSubmit() && (\n \n )}\n \n \n
\n \n
\n );\n};\n\nexport default DataEditor;\n","import { createContext } from \"react\";\nexport const ThemeContext = createContext({\n colors: {\n success: \"#2ecc71\",\n primary: \"#3498db\",\n warning: \"#f39c12\",\n danger: \"#e74c3c\",\n },\n});\n","export class Validator {\n constructor(definition) {\n this.definition = definition\n }\n\n isValid(fieldValue, row) {\n throw new Error(\"Not Implemented\")\n }\n\n static buildFromDefinition(definition) {\n const mapping = {\n regex_matches: RegexValidator,\n required: RequiredValidator,\n unique: UniqueValidator,\n is_integer: IntegerValidator,\n }\n if (!(definition.validate in mapping)) {\n throw new Error(`Missing validator for ${definition.validate}`)\n }\n const FoundValidator = mapping[definition.validate];\n return new FoundValidator(definition);\n }\n}\n\nexport class IntegerValidator extends Validator {\n isValid(fieldValue) {\n return {\n valid: !isNaN(fieldValue) && fieldValue !== null && fieldValue !== undefined,\n message: this.definition.error || \"This is not a valid number\",\n errorType: 'is_integer',\n }\n }\n}\n\nexport class UniqueValidator extends Validator {\n constructor(definition) {\n super(definition);\n this.seen = {};\n }\n\n isValid(fieldValue) {\n if (fieldValue in this.seen) {\n return {\n valid: false,\n message: this.definition.error || \"This value is not unique\",\n errorType: 'unique',\n }\n }\n this.seen[fieldValue] = true;\n return { valid: true }\n }\n}\n\nfunction escapeStringRegExp(str) {\n return str.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&');\n}\n\nexport class RegexValidator extends Validator {\n constructor(definition) {\n super(definition);\n if (typeof(this.definition.regex) === \"object\") {\n this.regexp = this.definition.regex;\n } else {\n this.regexp = new RegExp(escapeStringRegExp(this.definition.regex));\n }\n this.seen = {};\n }\n\n isValid(fieldValue) {\n const matches = this.regexp.test(fieldValue)\n if (!matches) {\n return {\n valid: false,\n message: this.definition.error,\n errorType: 'regex',\n }\n }\n return { valid: true }\n }\n}\n\nexport class RequiredValidator extends Validator {\n isValid(fieldValue) {\n if (!!!fieldValue) {\n return {\n valid: false,\n message: this.definition.error || \"This value is required\",\n errorType: 'required',\n }\n }\n return { valid: true }\n }\n}\n\nexport class ValidationResult {\n constructor() {\n this.errorsByFieldKeyByRowIndex = {};\n }\n\n hasErrors() {\n return Object.keys(this.errorsByFieldKeyByRowIndex).filter(fieldKey => {\n return Object.keys(this.errorsByFieldKeyByRowIndex[fieldKey]).length > 0;\n }).length > 0;\n }\n\n rowIndexesWithErrors() {\n let allRowIndexes = [];\n Object.keys(this.errorsByFieldKeyByRowIndex).forEach(fieldKey => {\n const rowIndexes = Object.keys(this.errorsByFieldKeyByRowIndex[fieldKey]);\n allRowIndexes = allRowIndexes.concat(rowIndexes.map(r => parseInt(r, 10)));\n });\n return new Set(allRowIndexes);\n }\n\n addError(fieldKey, rowIndex, error) {\n fieldKey = fieldKey.toString();\n rowIndex = rowIndex.toString();\n if (!(fieldKey in this.errorsByFieldKeyByRowIndex)) {\n this.errorsByFieldKeyByRowIndex[fieldKey] = {}\n }\n if (!(rowIndex in this.errorsByFieldKeyByRowIndex[fieldKey])) {\n this.errorsByFieldKeyByRowIndex[fieldKey][rowIndex] = [];\n }\n this.errorsByFieldKeyByRowIndex[fieldKey][rowIndex].push(error);\n }\n\n hasError(fieldKey, rowIndex) {\n fieldKey = fieldKey.toString();\n rowIndex = rowIndex.toString();\n return (fieldKey in this.errorsByFieldKeyByRowIndex) && (rowIndex in this.errorsByFieldKeyByRowIndex[fieldKey]);\n }\n\n getErrors(fieldKey, rowIndex) {\n fieldKey = fieldKey.toString();\n rowIndex = rowIndex.toString();\n return this.errorsByFieldKeyByRowIndex[fieldKey][rowIndex];\n }\n}\n\nexport const applyValidation = (formattedData, fields) => {\n const validatorsByFieldKey = {};\n fields.forEach((field) => {\n validatorsByFieldKey[field.key] = []\n if (!field.validators) {\n return;\n }\n\n field.validators.forEach(validatorDefinition => {\n validatorsByFieldKey[field.key].push(\n Validator.buildFromDefinition(validatorDefinition)\n );\n })\n })\n\n let validationResult = new ValidationResult();\n fields.forEach(field => {\n formattedData.forEach((row, rowIndex) => {\n if (!(field.key in row)) {\n return;\n }\n const value = row[field.key];\n const validators = validatorsByFieldKey[field.key];\n\n validators.forEach(v => {\n const result = v.isValid(value);\n if (!result.valid) {\n validationResult.addError(field.key, rowIndex, result);\n }\n });\n });\n })\n return validationResult;\n}\n\nconst computeStatisticsForField = (fieldKey, formattedData, errorsByRowIndex) => {\n const errorTypeCounts = { total: 0 };\n const counts = { isNull: 0 };\n formattedData.forEach((d) => {\n if (!d[fieldKey]) {\n counts.isNull += 1\n }\n });\n\n Object.keys(errorsByRowIndex).forEach(rowIndex => {\n const errors = errorsByRowIndex[rowIndex];\n if (errors && errors.length > 0) {\n errorTypeCounts.total += 1;\n }\n errors.forEach(error => {\n if (error.errorType in errorTypeCounts) {\n errorTypeCounts[error.errorType] += 1;\n } else {\n errorTypeCounts[error.errorType] = 1;\n }\n });\n });\n return { errorTypeCounts, counts };\n}\n\nexport const computeStatistics = (formattedData, headerMappings, validationResult) => {\n let statisticsByFieldKey = {};\n const headers = Object.keys(headerMappings).map(k => headerMappings[k]);\n headers.forEach(headerMapping => {\n if (!headerMapping.selectedField) {\n return;\n }\n const fieldKey = headerMapping.selectedField.value;\n statisticsByFieldKey[fieldKey] = computeStatisticsForField(\n fieldKey,\n formattedData,\n validationResult.errorsByFieldKeyByRowIndex[fieldKey] || {}\n );\n });\n return {statisticsByFieldKey, total: formattedData.length};\n}","import React, { useEffect, useState } from 'react';\nimport Papa from 'papaparse';\nimport Header from './Header';\nimport FileUploader from './FileUploader';\nimport HeaderMapper from './HeaderMapper';\nimport DataEditor from './DataEditor';\nimport { fieldIsRequired } from '../utils';\nimport { ThemeContext } from '../contexts';\nimport { Root, Margin, Container } from './common'\nimport { applyValidation, computeStatistics, ValidationResult } from '../validators';\nimport { formatData, buildSuggestedHeaderMappings, buildFinalData } from '../utils';\n\nconst CSVImporter = ({\n theme,\n onComplete,\n fields,\n}) => {\n const [currentStep, setCurrentStep] = useState(0);\n const [parsed, setParsed] = useState(null);\n const [formattedData, setFormattedData] = useState([]);\n const [statistics, setStatistics] = useState({statisticsByFieldKey: {}, total: null});\n const [headerMappings, setHeaderMappings] = useState({});\n const [validationResult, setValidationResult] = useState(new ValidationResult());\n\n const setFile = (file) => {\n Papa.parse(file, {\n complete: (newParsed) => {\n setParsed(newParsed);\n setHeaderMappings(buildSuggestedHeaderMappings(fields, newParsed.data[0]));\n setCurrentStep(1);\n }\n });\n }\n\n useEffect(() => {\n // Generate all the statistics\n if (parsed && parsed.data) {\n const newFormattedData = formatData(headerMappings, parsed.data);\n setFormattedData(newFormattedData);\n }\n }, [headerMappings]);\n\n useEffect(() => {\n if (formattedData.length > 0) {\n const newValidationResult = applyValidation(formattedData, fields);\n setValidationResult(newValidationResult);\n const newStatistics = computeStatistics(formattedData, headerMappings, newValidationResult);\n setStatistics(newStatistics);\n }\n }, [formattedData]);\n\n const usedFilters = Object.keys(headerMappings)\n .map(h => headerMappings[h])\n .filter(h => !h.ignored && h.selectedField)\n .map(h => h.selectedField.value);\n const unselectedFields = fields.filter(filter => {\n return usedFilters.indexOf(filter.key) < 0;\n });\n\n let rowData = [];\n for (let i = 0; i < 100; i++) {\n rowData.push({ rowIndex: i });\n }\n\n const headers = Object\n .keys(headerMappings)\n .map(h => headerMappings[h])\n .filter(h => h.confirmed)\n .map(h => h.selectedField.value);\n const selectedFields = fields.filter(f => {\n return headers.indexOf(f.key) >= 0;\n });\n\n const missingRequiredFields = fields.filter(f => fieldIsRequired(f)).filter(f => {\n return selectedFields.map(f => f.key).indexOf(f.key) === -1;\n });\n return (\n \n \n {fields.map(field => {\n return (\n {\n const rowIndex = params.rowIndex;\n const columnName = params.colDef.field;\n\n if (validationRef.current.hasError(columnName, rowIndex)) {\n const errors = validationRef.current.getErrors(columnName, rowIndex);\n return errors.map(e => e.message).join(\", \");\n }\n }}\n field={field.key}\n >\n );\n })}\n \n
\n \n \n \n 0 ? formattedData : rowData}\n fields={fields}\n headerMappings={headerMappings}\n validationResult={validationResult}\n onSubmit={() => {\n onComplete(buildFinalData(formattedData, validationResult));\n }}\n setRowData={(row, index) => {\n const newRowData = [...rowData];\n newRowData[index] = row;\n setFormattedData(newRowData);\n }}\n />\n
\n )}\n {currentStep === 1 && (\n Or just manually enter your data
\n\n
\n )\n};\n\nexport default App;\n","import React, { useState } from 'react';\nimport FloatingLabelInput from '../common/components/FloatingLabelInput';\nimport { Form, Button } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\n\nexport const PrimarySearchBar = ({ children, ...props }) => {\n const [disabled, setDisabled] = useState(props.isDisabled)\n const { t } = useTranslation();\n const buttonText = props.buttonText || t(\"enter_information.search\")\n const label = props.label || t(\"enter_information.search\")\n\n return (\n \n );\n};\n\nexport default PrimarySearchBar;","import React from 'react';\nimport FloatingLabelInput from '../common/components/FloatingLabelInput';\n\nconst AutocompleteSearch = ({\n dataTestHook,\n id,\n input,\n label,\n name,\n onChange,\n autoFocus = false,\n onKeyDown,\n}) => {\n return (\n \n onChange(e)}\n label={label}\n name={name}\n prependIcon=\"search\"\n value={input}\n autoFocus={autoFocus}\n onKeyDown={onKeyDown}\n />\n
\n )\n}\nexport default AutocompleteSearch;\n","import React from 'react';\nimport AutocompleteSearch from '../PrimaryDesignSystem/AutocompleteSearch';\nimport { Button, Form } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nconst RegistrationDirectorySearch = ({ loading, form, setForm, submit }) => {\n const { t } = useTranslation();\n\n return (\n <>\n \n \"\n >\n {loading && (\n \n
\n \n )\n}\n\nexport default RegistrationDirectorySearch;\n","import React, { useState } from 'react';\nimport axios from 'axios';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport { validateEmail } from '../common/utils/index';\nimport ReactMarkdown from 'react-markdown';\nimport { PrimarySearchBar } from '../PrimaryDesignSystem/SearchBar';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from 'react-bootstrap';\nimport RegistrationDirectorySearch from '../Search/RegistrationDirectorySearch';\n\nconst isPhone = (str) => {\n return isMobilePhone(str);\n}\n\nconst isEmail = (str) => {\n return validateEmail(str);\n}\n\nconst EnterInformation = ({ onComplete, onError, token }) => {\n const [input, setInput] = useState(\"\");\n const [error, setError] = useState({});\n const [form, setForm] = useState({token: token});\n const { t } = useTranslation();\n const [disabled, setDisabled] = useState(true);\n const [currentStep, setCurrentStep] = useState(0);\n const [loading, setLoading] = useState(false);\n\n const searchOnLocationFinder = () => {\n setLoading(true)\n const query = {};\n Object.keys(form).forEach(key => {\n if (form[key]) {\n query[key] = form[key];\n }\n });\n const url = \"/find-your-location?\" + new URLSearchParams(query).toString();\n window.location.href = url;\n }\n\n return (\n \n setForm({...form, keyword: e.target.value})}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submit();\n }\n }}\n />\n
\n \n {(currentStep == 0) ?\n
\n )\n};\n\nexport default EnterInformation;\n","import React from 'react';\nimport { useState } from 'react';\nimport axios from 'axios';\nimport { Button, FormControl } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport Countdown from 'react-countdown';\n\nconst EnterCode = ({onComplete, appointmentRecovery, onError, onResend, loggedIn=false, titleKey=\"code\"}) => {\n const [code, setCode] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [resendOk, setResendOk] = useState(false);\n const [hasError, setHasError] = useState(false);\n const { t, i18n } = useTranslation();\n\n const timerRenderer = ({ seconds, completed, api }) => {\n if (completed) {\n setResendOk(true);\n if (!api.isStopped()) api.stop();\n return ;\n } else {\n const secondsFormatted = ('0' + seconds).slice(-2);\n return \n {\n setInput(e.target.value?.trim())\n }}\n onClick={async (event) => {\n event.preventDefault();\n setDisabled(true)\n try {\n const appointmentRecovery = {};\n if (isEmail(input)) {\n appointmentRecovery.email = input\n } else if (isPhone(input)) {\n appointmentRecovery.phone_number = input\n } else {\n setError({ phoneOrEmail: true });\n return;\n }\n const response = await axios.post(`/finder/`, {\n appointment_recovery: appointmentRecovery\n });\n onComplete(response.data.appointment_recovery);\n } catch (error) {\n onError();\n }\n }} />\n
\n :\n {t(\"enter_information.find_link\")}
\n {t(\"enter_information.subtitle\")}
\n {t(\"enter_information.contact_info\")}
\n \n
\n \n
\n {t(\"enter_information.not_registered\")}
\n \n \n
\n }\n\n Search for your site
\nSearch by keyword, city, zip, name, or organization code, or enter your address below to find the nearest sites to you.
\nResend code in {secondsFormatted} seconds
;\n }\n };\n\n return (\n \n {\n setCode(e.target.value)\n setHasError(false);\n }}\n isInvalid={hasError}\n maxLength={6}\n placeholder=\"000000\"\n inputMode=\"numeric\"\n className=\"px-3 w-100\"\n required={true}\n style={{width: \"110px\"}}\n data-test-hook=\"code\"\n />\n {hasError &&
\n )\n};\n\nexport default EnterCode;\n","import React, { useState, useRef } from 'react';\nimport { useEffect } from 'react';\nimport { Row, Col, Button, Container } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\nimport { useMediaQuery } from 'react-responsive';\n\nconst ShowAppointments = ({ appointments, loggedIn = false, onComplete, setTryAgain, setCurrentStep, informationEntered }) => {\n const { t, i18n } = useTranslation();\n const [active, setActive] = useState(null);\n const [disabled, setDisabled] = useState(true);\n const [selectedAppointment, setSelectedAppointment] = useState();\n const [foundAppointments, setFoundAppointments] = useState(appointments);\n const [name, setName] = useState('');\n const [height, setHeight] = useState(0);\n const [bottomHeight, setBottomHeight] = useState(0);\n const ref = useRef(null);\n const ref1 = useRef(null);\n const isMobile = useMediaQuery({ query: '(max-width: 576px)' });\n\n const filterAppointments = (e) => {\n const keyword = e.target.value;\n if (keyword !== '') {\n const results = appointments.filter((appointment) => {\n return (appointment.user.first_name.toLowerCase().startsWith(keyword.toLowerCase()) ||\n appointment.user.last_name[0].toLowerCase().startsWith(keyword.toLowerCase()) ||\n (appointment.user.first_name.toLowerCase() + \" \" + appointment.user.last_name[0].toLowerCase()).includes(keyword.toLowerCase()))\n });\n setFoundAppointments(results);\n } else {\n setFoundAppointments(appointments);\n }\n setName(keyword);\n };\n\n useEffect(() => {\n setHeight(ref.current.clientHeight);\n setBottomHeight(ref.current.clientHeight);\n }, [height, bottomHeight]);\n\n return (\n {t(`enter_code.${titleKey}`)}
\n {t(\"enter_code.enter_code\")} {appointmentRecovery.phone_number ? appointmentRecovery.phone_number : appointmentRecovery.email}
\n {t(\"enter_code.incorrect_code\")}
}\n \n \n \n {!resendOk && \n
\n \n
\n {t(\"show_appointments.welcome\")}
\n {`${t(\"show_appointments.welcome_subtitle_1\")} `}\n {informationEntered}{`. ${t(\"show_appointments.welcome_subtitle_2\")} `}\n { setTryAgain(true); setCurrentStep(0) }}>{t(\"show_appointments.welcome_subtitle_3\")}.\n
\n {appointments.length >= 12 && filterAppointments(e)} type=\"search\" placeholder=\"Search\" value={name} className=\"form-control\" style={{ marginBottom: \"16px\" }}>}\n \n {foundAppointments.map((appointment) => {\n const confirmationButtonName = () => {\n if (selectedAppointment.test_group.has_self_resulting_test_configurations) {\n return \"Report a result\"\n } else if (selectedAppointment.test_group.has_self_administered_test_configurations) {\n return \"Activate a kit\"\n } else if (selectedAppointment.test_group.has_test_kit) {\n return \"Activate a kit\"\n } else {\n return false\n }\n };\n\n return (\n \n
\n }\n \n
\n )\n })}\n \n { setDisabled(false); setSelectedAppointment(appointment); setActive(appointment.id) }}\n className={`g-0 no-shadow-card ${active == appointment.id && 'checked'}`} ref={ref}>\n \n
\n }\n \n \n {appointment.user.first_name[0].toUpperCase()}{appointment.user.last_name[0].toUpperCase()}\n
\n {appointment.user.first_name} {appointment.user.last_name[0]}
\n {appointment.test_group.name}
\n \n {(active == appointment.id && selectedAppointment) && !loggedIn &&\n \n
\n \n )\n};\n\nexport default ShowAppointments;\n","import React from 'react';\nimport { Button } from 'react-bootstrap';\nimport { useTranslation } from 'react-i18next';\n\nconst PleaseContactSupport = ({ onClick, fromMobile = false }) => {\n const { t, i18n } = useTranslation();\n return (\n \n
\n \n \n
\n \n
\n )\n};\n\nexport default PleaseContactSupport;\n","import React, { useState, useEffect } from 'react';\nimport { Container, Alert, Col } from 'react-bootstrap';\nimport EnterInformation from './EnterInformation';\nimport EnterCode from './EnterCode';\nimport ShowAppointments from './ShowAppointments';\nimport PleaseContactSupport from './PleaseContactSupport';\nimport Header from '../Registration/components/Header';\nimport { languageObject } from '../common/utils';\nimport SwitchUsers from '../MembersPortal/components/partials/SwitchUsers';\nimport { useTranslation } from 'react-i18next';\nimport Loader from \"react-loader-spinner\";\nimport { useMediaQuery } from 'react-responsive';\nimport { faCircleInfo } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nconst AppointmentRecovery = () => {\n const { t, i18n } = useTranslation();\n const [loggedIn, setLoggedIn] = useState(null);\n const [loading, setLoading] = useState(true);\n const params = new URLSearchParams(window.location.search);\n const token = params.get('token') || params.get('access_token');\n const appointmentRecoveryId = params.get('appointment_recovery_id');\n const [currentStep, setCurrentStep] = useState(appointmentRecoveryId ? 1 : 0);\n const [appointmentRecovery, setAppointmentRecovery] = useState(appointmentRecoveryId ? {id: appointmentRecoveryId} : {});\n\n const [appointments, setAppointments] = useState([]);\n const [error, setError] = useState(null);\n const [tryAgain, setTryAgain] = useState(false);\n const [showAlert, setShowAlert] = useState(null);\n\n useEffect(() => {\n const setHousehold = async () => {\n let fetchHousehold = token\n ? fetch(`/api_v2/members/household_members`, { headers: { \"X-Authorization\": token } })\n : fetch(`/members/household_members.json`)\n\n await fetchHousehold\n .then(response => response.json())\n .then((data) => setLoggedIn(data.authorization))\n .catch((error) => setLoggedIn(false));\n setLoading(false);\n };\n if (tryAgain && currentStep === 0) {\n setShowAlert(true);\n };\n setHousehold();\n }, [currentStep, tryAgain]);\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' });\n\n return loading ? (\n {t(\"contact_support.invalid\")}
\n \n {fromMobile\n ? t(\"contact_support.mobile.invalid_explanation\")\n : <>\n {t(\"contact_support.invalid_explanation\")} {t(\"contact_support.invalid_explanation_bold\")}\n \n }\n
\n {fromMobile\n ? \n
\n : {t('contact_support.mobile.reason')}
\n\n {t(\"contact_support.mobile.get_help\")}\n Primary support \n {t(\"contact_support.get_help_calling\")}\n (650) 275-5419.\n
\n\n
\n }\n \n \n {t(\"contact_support.get_help\")}\n Primary support \n {t(\"contact_support.get_help_calling\")}\n (650) 275-5419.\n
\n\n {t(\"contact_support.never_registered\")}\n
\n\n
) : (\n <>\n {(tryAgain && currentStep === 0 && showAlert) ?\n \n
\n :\n Try again to find your member
\n \n \n \n \n
\n \n )\n};\n\nexport default AppointmentRecovery;\n","import React from \"react\";\nimport { Row, Col, Container } from \"react-bootstrap\";\n\nconst Footer = ({partnerLogo}) => (\n <>\n \n
\n \n {error && {\n e.preventDefault();\n setError(false);\n setCurrentStep(0);\n }} fromMobile={loggedIn} />}\n {!error && (\n <>\n {currentStep === 0 && (\n {\n setAppointmentRecovery(newAppointmentRecovery);\n setCurrentStep(1);\n }} onError={() => {\n setError(true);\n }} />\n )}\n {currentStep === 1 && (\n {\n setAppointmentRecovery(newAppointmentRecovery);\n }}\n onComplete={async (newAppointments) => {\n setAppointments(newAppointments);\n setCurrentStep(2);\n }} onError={() => {\n setError(true);\n }} />\n )}\n {currentStep === 2 && (\n {\n location.href = `/members/sign_in?current_user=${householdMemberId}`\n }}\n setTryAgain={setTryAgain}\n setCurrentStep={setCurrentStep}\n informationEntered={appointmentRecovery && (appointmentRecovery.email != null ? appointmentRecovery.email : appointmentRecovery.phone_number)}\n />\n )}\n \n )}\n
\n \n \n 
}\n ![](\"/images/primary_logo_horizontal_white.png\")
\n
\n
\n \n Primary Diagnostics, Inc.
\n 595 Pacific Ave Floor 4
\n San Francisco, CA 94133
\n 1-855-970-3223
\n \n Company
\n \n \n \n \n \n \nServices
\n \n \n \n \n \nSoftware
\n \n \n \n \n \n\n \n \n
\n \n)\n\nexport default Footer;\n","import React from 'react';\nimport { Row, Col, Button, Container, Card } from 'react-bootstrap';\nimport { useMediaQuery } from 'react-responsive';\nimport Footer from '../common/components/Footer';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\nimport Header from '../Registration/components/Header';\nimport { languageObject } from '../common/utils';\n\nconst IMAGES = {\n stepOne: \"/images/public_test_groups/step_1.svg\",\n stepTwo: \"/images/public_test_groups/step_2.svg\",\n stepThree: \"/images/public_test_groups/step_3.svg\",\n tempusInstructions: \"/images/public_test_groups/tempus_instructions.png\",\n logo: \"/images/public_test_groups/logo.svg\",\n salivaDirectLogo: \"/images/public_test_groups/sdirect_logo.svg\",\n phone: \"/images/public_test_groups/phone.svg\",\n email: \"/images/public_test_groups/email.svg\",\n png_logo: \"/images/public_test_groups/gcb_logo.svg\"\n}\n\nconst TEMPUS_INSTRUCTIONS = \"https://www.tempus.com/wp-content/uploads/2021/05/SalivaDirectFunnelIFU_041421.pdf\"\n\nconst FAQ = ({title, text, footer}) => {\n return (\n Primary Diagnostics © 2021. All rights reserved.
\n {title}
\n\n \n {children}\n \n
\n)\n\nexport default (props) => {\n const { t, i18n } = useTranslation();\n const xs = useMediaQuery({ query: '(max-width: 440px)' });\n const md = useMediaQuery({query: '(max-width: 764px)'});\n const sm = useMediaQuery({query: \"(max-width: 530px)\"});\n\n const resizePhoto = () => {\n if(xs) return 162;\n if (sm) return 121;\n if (md) return 141\n return 162\n }\n\n const backgroundStyle = () => {\n if (xs) return {\n backgroundImage: \"url(/images/public_test_groups/covid_test.png)\",\n backgroundSize: \"auto 100%\",\n backgroundRepeat: \"no-repeat\",\n }\n if (sm || md) return {\n backgroundImage: \"url(/images/public_test_groups/covid_test.png)\",\n backgroundSize: \"100%\",\n backgroundRepeat: \"no-repeat\",\n } \n return {\n backgroundImage: \"url(/images/public_test_groups/covid_test.png)\",\n backgroundSize: \"50%\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"right\",\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n","import React from 'react';\nimport { Container, Button } from 'react-bootstrap';\nimport Header from '../../Registration/components/Header';\nimport { languageObject } from '../common/utils';\nimport { useTranslation } from 'react-i18next';\n\nconst LanguageSelection = () => {\n const { t } = useTranslation();\n\n return (\n \n
\n \n \n
\n
\n {t('public_test_groups.title')}
\n{t('public_test_groups.description')}
\n{t('public_test_groups.appointment_recoveries_title')}
\n \n \n\n \n \n ![](\"/images/public_test_groups/staff.svg\"/)
\n \n \n \n \n \n \n
\n
\n {t('public_test_groups.search_test_group_title')}
\n{t('public_test_groups.title_3')}
\n\n
\n \n ![](\"/images/public_test_groups/mbio_logo.svg\")
\n
\n \n \n Mammoth Biosciences
\n{t('public_test_groups.population_title')}
\n \n\n ![](\"/images/public_test_groups/gcb_logo.svg\")
\n
\n \n \n Gambling Control Board
\n{t('public_test_groups.population_title')}
\n \n\n \n 
\n 
\n 
\n
\n
\n \n
\n {t('public_test_groups.subtitle_1')}
\n{t('public_test_groups.title_2')}
\n{t('public_test_groups.step_one')}
\n \n {t('public_test_groups.step_two')}
\n \n {t('public_test_groups.step_three')}
\n \n \n \n \n {t('public_test_groups.faq_3_subtitle')})}\n />\n
\n
\n {t('public_test_groups.faq_subtitle')}
\n{t('public_test_groups.faq_title')}
\n- \n
- \n {t('public_test_groups.faq_1_1')}\n \n
- \n {t('public_test_groups.faq_1_2')}\n \n
- \n {t('public_test_groups.faq_1_3')}\n \n
- \n {t('public_test_groups.faq_1_4')}\n \n
{t('public_test_groups.appointment_recoveries_title')}
\n \n \n\n \n 
\n
\n
\n
\n \n
\n 
1-855-970-3223\n
\n \n 
primary@primary.health\n
\n \n \n {t('public_test_groups.footer_text_1')}
\n {t('public_test_groups.footer_text_2')}
\n {t('public_test_groups.footer_text_3')}\n
\n \n
\n \n \n );\n};\n\nexport default LanguageSelection;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport axios from 'axios';\nimport ProgressBar from 'react-bootstrap/ProgressBar';\nimport { useMergeLink } from '@mergeapi/react-merge-link';\nimport styled from 'styled-components';\nimport ActionCableSubscriber from '../../common/components/ActionCableSubscriber';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCircleCheck,\n faUserMinus,\n faCircleExclamation,\n faTable,\n faThumbsUp,\n faLinkSlash,\n faArrowRight,\n} from '@fortawesome/pro-regular-svg-icons';\nimport { faLink} from '@fortawesome/pro-solid-svg-icons'\n\nconst Overlay = styled.div`\n position: fixed;\n inset: 0px;\n z-index: 2147483647;\n border-width: 0px;\n overflow: hidden auto;\n width: 100%;\n height: 100%;\n background: rgba(8, 8, 8, 0.75) none repeat scroll 0% 0%;\n display: flex;\n`;\n\nconst ImporterWrapper = styled.div`\n background-color: white;\n position: relative;\n min-height: 550px;\n max-height: 720px;\n width: 375px;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 20px, rgba(0, 0, 0, 0.1) 0px 2px 5px;\n`;\n\nconst ImportSummary = ({\n onHide,\n startMergeImport,\n mergeImportStarted,\n importState,\n mergeImportId,\n onReceived,\n errors,\n testGroupUsersPath,\n removeExistingUsersPath,\n keepExistingUsersPath,\n}) => (\n \n {t('public_test_groups.demo.choose_language')}\n
\n\n {Object.keys(languageObject).map((key, index) => {\n return (\n \n {\n window.location.href = `/test-instructions/l?locale=${key}`;\n }}\n style={{\n backgroundColor: '#08173A',\n borderRadius: 8,\n height: 72,\n width: 265,\n }}\n >\n {languageObject[key]}\n \n
\n );\n })}\n \n {importState['active_employees_count']}\n \n active employee{importState['active_employees_count'] !== 1 && 's'}{' '}\n found\n \n
\n {!['complete', 'failed'].includes(importState['pulling_status']) && (\n \n \n {importState['imported_employees_count']}\n {' '}\n employee{importState['imported_employees_count'] !== 1 && 's'} imported\n
\n \n \n {importState['new_test_group_users_count']}\n {' '}\n new employee\n {importState['new_test_group_users_count'] !== 1 && 's'} added\n
\n )}\n {!importState['keep_non_imported_users'] &&\n importState['not_included_test_group_users_count'] > 0 ? (\n \n \n {importState['not_included_test_group_users_count']}\n {' '}\n Existing employee\n {importState['not_included_test_group_users_count'] !== 1 &&\n 's'}{' '}\n not updated\n
\n \n \n \n
\n {\n e.preventDefault();\n if (window.confirm(\"Disconnect your HRIS?\")) {\n onClick();\n }\n }}>\n
\n);\n\nconst ConnectButton = ({ linkToken, onSuccess }) => {\n const { open, isReady } = useMergeLink({\n linkToken,\n onSuccess,\n });\n\n return (\n \n {accountTokenPresent ? (\n \n setShowImporter(false)}\n mergeImportId={mergeImportId}\n getMergeImportId={getMergeImportId}\n startMergeImport={startMergeImport}\n mergeImportStarted={mergeImportStarted}\n testGroupUsersPath={testGroupUsersPath}\n removeExistingUsersPath={removeExistingUsersPath}\n keepExistingUsersPath={keepExistingUsersPath}\n errors={errors}\n />\n )}\n \n ) : (\n
\n );\n};\n\nexport default MergeConnect;\n","import React, { useState } from 'react';\nimport axios from 'axios';\nimport '../../../common/locales/i18n';\nimport { useTranslation } from 'react-i18next';\nimport Select from 'react-select';\nimport { Modal, Button, FormControl } from 'react-bootstrap';\nimport ModalHeader from '../../../common/components/ModalHeader';\n\nconst CancelAppointmentModal = ({ closeModal, appointment, testGroup }) => {\n const { t } = useTranslation();\n const options = [\n 'cant_get_to_location',\n 'timing_conflict',\n 'became_ill_with_covid19',\n 'received_service_elsewhere',\n 'duplicate_appointment',\n 'other',\n ].map((o) => {\n return {\n value: o,\n label: t(`cancellation_types.${o}`),\n };\n });\n\n const [selectedCancellationOption, setSelectedCancellationOption] =\n useState(null);\n const [archivedReason, setArchivedReason] = useState('');\n const [error, setError] = useState(null);\n const submit = () => {\n if (!selectedCancellationOption) {\n setError(t('instructions.errors.missing_cancellation_reason'));\n return;\n }\n axios\n .delete(`/registrations/${appointment.access_code}`, {\n data: {\n appointment: {\n archived_reason: archivedReason,\n cancellation_type: selectedCancellationOption.value,\n },\n },\n })\n .then(() => {\n location.reload();\n })\n .catch(() => {\n location.reload();\n });\n };\n return (\n setShowImporter(true)}>\n
\n \n Last sync at: {lastSyncAt}\n \n \n \n Cancel appointment\n \n
\n \n {t('instructions.are_you_sure_you_want_to_cancel')}\n
\n{error}
}\n \n \n
\n {showCancellationModal && (\n setShowCancellationModal(false)}\n appointment={appointment}\n testGroup={testGroup}\n />\n )}\n {!appointment.frozen_from_canceling && (\n
\n );\n};\n\nexport default CancelAppointment;\n","import React, { useEffect, useState } from 'react';\nimport { Button, Modal, OverlayTrigger, Tooltip } from 'react-bootstrap';\nimport axios from 'axios';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport FabrxCheckbox from '../../Registration/primary/FabrxCheckbox';\nimport ErrorMessage from '../../common/components/ErrorMessage';\nimport ModalHeader from '../../common/components/ModalHeader';\nimport { faEye } from '@fortawesome/pro-solid-svg-icons';\n\nconst BulkResultModal = ({\n test_group,\n location,\n start_day,\n end_day,\n start_time,\n end_time,\n params,\n}) => {\n\n const [show, setShow] = useState(false);\n const [currentStep, setCurrentStep] = useState(0);\n const [confirmationCheckboxChecked, setConfirmationCheckboxChecked] = useState(false);\n const [numberOfResultableTestLeft, setNumberOfResultableTestLeft] = useState(0);\n\n const [numBulkResultableNotResultedTests, setNumBulkResultableNotResultedTests] = useState(0);\n const [numBulkResultablePositiveTests, setNumBulkResultablePositiveTests] = useState(0);\n const [numBulkResultableNegativeTests, setNumBulkResultableNegativeTests] = useState(0);\n const [numBulkResultableInvalidTests, setNumBulkResultableInvalidTests] = useState(0);\n const [bulkResultableNotResultedTests, setBulkResultableNotResultedTests] = useState([]);\n const [userResultedNegativeDuringPastDay, setUserResultedNegativeDuringPastDay] = useState(true);\n\n useEffect(() => {\n $('.open-bulk-result-modal').click(function (e) {\n e.preventDefault();\n fetchTestsForBulkResulting();\n });\n }, []);\n\n const closeModal = () => {\n setShow(false);\n setCurrentStep(0);\n setConfirmationCheckboxChecked(false);\n }\n\n const fetchTestsForBulkResulting = async () => {\n try {\n const response = await fetchTests();\n if (response.status === 200) {\n setNumBulkResultableNotResultedTests(response.data.num_bulk_resultable_not_resulted_tests);\n setNumBulkResultablePositiveTests(response.data.num_bulk_resultable_positive_tests);\n setNumBulkResultableNegativeTests(response.data.num_bulk_resultable_negative_tests);\n setNumBulkResultableInvalidTests(response.data.num_bulk_resultable_invalid_tests);\n setBulkResultableNotResultedTests(response.data.bulk_resultable_not_resulted_tests);\n setUserResultedNegativeDuringPastDay(response.data.user_resulted_negative_during_past_day);\n setShow(true);\n }\n } catch(e) {\n toastr.error(\"Something went wrong.\");\n closeModal();\n }\n }\n\n const fetchTests = async () => {\n return axios.get(`/test_groups/${test_group.id}/fetch_bulk_resultable_tests`, {\n params: params,\n })\n }\n\n const bulkResult = async () => {\n return axios.put(`/test_groups/${test_group.id}/bulk_result_negative_tests`, {\n total_num_bulk_resultable_not_resulted_tests: numBulkResultableNotResultedTests,\n not_resulted_test_ids: bulkResultableNotResultedTests.map((t) => t.id),\n })\n }\n\n const TooltipWithNames = ({tests}) => {\n return (\n \n {\n setShowCancellationModal(true);\n }}\n >\n {text ?? t('instructions.cancel')}\n \n
\n )}\n {t.uid}
)}}\n >\n \n \n \n Did you result all positives?\n \n \n \n \n \n closeModal()}\n >\n No, go back\n \n setCurrentStep(currentStep + 1)}\n disabled={!userResultedNegativeDuringPastDay}\n >\n Save and proceed\n \n \n
\n )\n }\n\n const BulkResultMain = () => {\n return (\n Please be sure to result all positive tests prior to bulk resulting negative tests.
\n {!userResultedNegativeDuringPastDay && (\n\n \n \n Bulk result: NEGATIVE\n \n \n \n {\n setConfirmationCheckboxChecked(!confirmationCheckboxChecked)\n }}\n />\n {!userResultedNegativeDuringPastDay && (\n \n \n closeModal()}\n >\n No, go back\n \n setCurrentStep(currentStep + 1)}\n >\n Save and proceed\n \n \n
\n )\n }\n\n const BulkResultConfirmation = () => {\n return (\n {test_group.name}
\n\n Location: {location.title}\n
\n \n Date: {end_day ? `${start_day} - ${end_day}` : start_day}\n
\n {(start_time || end_time) && (\n \n Time: {start_time || \"12:00 AM\"} - {end_time || \"12:00 AM\"}\n
\n )}\n\n \n
\n\n Un-resulted: {numBulkResultableNotResultedTests}
\n Positive: {numBulkResultablePositiveTests}
\n Negative: {numBulkResultableNegativeTests}
\n Invalid: {numBulkResultableInvalidTests}
\n \n By proceeding below, you will be bulk-resulting\n {bulkResultableNotResultedTests.length} unresulted rapid tests to negative.\n Please be sure to result all positive tests prior to bulk resulting negative.\n
\n\n\n You are only able to result tests that have been administered more than 30 minutes ago. You can only bulk result up to 100 rapid tests at a time.\n
\n\n\n \n Are you sure? \n \n \n You will be bulk-resulting\n {bulkResultableNotResultedTests.length} tests as negative.\n Please be sure to result all positive tests prior to bulk resulting negative.\n \n \n setCurrentStep(currentStep - 1)}\n >\n No, go back\n \n {\n try {\n const response = await bulkResult();\n toastr.success(`Bulk update ${response.data.number_of_updated_tests} tests to negative result.`);\n if (response.data.number_of_resultable_tests_left > 0) {\n setNumberOfResultableTestLeft(response.data.number_of_resultable_tests_left);\n setCurrentStep(currentStep + 1);\n } else {\n closeModal();\n }\n } catch(e) {\n if (e.response.status === 403) {\n toastr.error(e.response.data.error);\n } else {\n toastr.error(\"Something went wrong.\");\n }\n closeModal();\n }\n }}\n >\n Yes, bulk result\n \n \n
\n )\n }\n\n const ResultMoreTests = () => {\n return (\n \n \n Bulk result more tests? \n \n \n There are {numberOfResultableTestLeft} tests still unresulted. Would you like to bulk result more tests?\n \n \n closeModal()}\n >\n No, go back\n \n {\n fetchTestsForBulkResulting();\n setCurrentStep(1);\n }}\n >\n Yes, bulk result more tests\n \n \n
\n )\n }\n\n return (\n \n {\n if (e.target.value.length <= 25) setFilterName(e.target.value);\n }}\n label='Filter name *'\n validation={(error || filterName?.length >= 25) && 'is-invalid'}\n displayIcon=\"true\"\n />\n {error &&
\n {modal_type === 'edit' ? 'Update' : 'Save'} this filter?
\n {modal_type === 'edit' ? (\n\n You are updating your filter preferences for your pre-saved\n “{selectedSearchFilter?.name}” filter. Feel free to update your name as well.\n
\n ) : (\n\n Save these current filter preferences to access them with a click of a button next time.\n
\n )}\n{error}
}\n {filterName?.length >= 25 && (\n Just a heads up, you have reached the maximum number of charachters.
\n )}\n Character max: {filterName?.length}/25
\n \n closeModal()}\n >\n No, go back\n \n {\n try {\n const response = modal_type === 'edit'\n ? await editSearchFilter(filter_params['search_filter_id'])\n : await saveSearchFilter();\n if (response.status === 200) {\n if (response.data.name_already_in_use) {\n setError(response.data.name_already_in_use);\n } else {\n const searchFilter = response.data.search_filter;\n toastr.success(`${searchFilter.name} successfully ${modal_type === 'edit' ? 'updated' : 'saved'}!`);\n redirectWithNewParams(JSON.parse(searchFilter.filter_params), searchFilter.id);\n closeModal();\n }\n } else {\n toastr.error('Something went wrong.');\n closeModal();\n }\n } catch(e) {\n toastr.error('Something went wrong.');\n closeModal();\n }\n }}\n >\n Yes, {modal_type === 'edit' ? 'edit' : 'save'} filter\n \n
\n \n
\n )\n}\n\nexport default DeleteSearchFilterModal;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\n\nconst SearchFilterBadge = ({\n searchFilter,\n selectedFilter,\n setSelectedFilter,\n setShowDeleteSearchFilterModal,\n source_url,\n testGroup,\n}) => {\n\n const isSelected = searchFilter.id === selectedFilter?.id\n const badgeColor = isSelected ? '#3579B6' : '#A2ACBD';\n\n const redirectWithNewParams = (filterParams) => {\n delete filterParams.search_filter_id;\n const newFilterParams = Object.entries(filterParams).map(([k, v]) => `${k}=${v}`).join('&');\n window.location = `/test_groups/${testGroup.slug}/${source_url}?${newFilterParams}`\n + `&search_filter_id=${searchFilter.id}`;\n }\n\n const removeParamsFromUrl = () => {\n window.location = `/test_groups/${testGroup.slug}/${source_url}`;\n }\n\n return (\n Delete {selectedFilter.name} filter?
\n\n setShowDeleteSearchFilterModal(false)}\n >\n No, go back\n \n {\n try {\n const response = await deleteSearchFilter(selectedFilter.id);\n if (response.status === 200) {\n toastr.success(response.data.message);\n window.location = `/test_groups/${testGroup.slug}/${source_url}`;\n } else {\n toastr.error('Something went wrong.');\n }\n } catch(e) {\n toastr.error('Something went wrong.');\n }\n setShowDeleteSearchFilterModal(false);\n }}\n >\n Yes, delete filter\n \n
\n \n {searchFilters.map((searchFilter) => {\n return window.location = `/test_groups/${test_group.slug}/${source_url}`}\n >\n Clear filters\n \n )}\n \n \n
\n )\n}\n\nexport default SearchFilters;\n","import React from 'react';\n\nconst PrimaryBallonSvg = () => {\n return (\n \n )\n}\n\nexport default PrimaryBallonSvg;","import React, { useState, useRef, useEffect } from 'react';\nimport { Spinner } from 'react-bootstrap';\nimport { Wrapper, Status } from \"@googlemaps/react-wrapper\";\n\nconst Marker = ({ map, location }) => {\n const [marker, setMarker] = useState();\n const svg = `\n \n `\n\n const getInfoWindowString = (location) => {\n const test_group = location.test_group\n const test_location = location.test_location\n\n return (`\n \n
\n `)\n }\n\n useEffect(() => {\n if (!marker) {\n setMarker(new window.google.maps.Marker());\n }\n\n return () => {\n if (marker) {\n marker.setMap(null);\n }\n };\n }, [marker]);\n\n useEffect(() => {\n if (marker) {\n const infowindow = new window.google.maps.InfoWindow({\n content: getInfoWindowString(location)\n });\n\n marker.setOptions({\n position: new google.maps.LatLng(location.test_location.latitude, location.test_location.longitude),\n icon: {\n url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg),\n },\n map,\n });\n marker.addListener(\"click\", () => {\n let activeWindow = document.querySelector(\".gm-style-iw .gm-ui-hover-effect\")\n if (activeWindow) { activeWindow.click() }\n\n infowindow.open({\n anchor: marker,\n shouldFocus: false\n });\n });\n }\n }, [marker]);\n\n return null;\n}\n\nconst Map = ({ locations, center, zoom, MarkerComponent }) => {\n const ref = useRef();\n const [map, setMap] = useState();\n const options = {\n center: center,\n clickableIcons: false,\n mapTypeControl: false,\n overviewMapControl: false,\n rotateControl: true,\n streetViewControl: false,\n zoomControl: true,\n zoomControlOptions: { style: \"DEFAULT\" },\n zoom: zoom\n }\n\n useEffect(() => {\n if (map) { map.setOptions(options); }\n }, [map, options]);\n\n useEffect(() => {\n if (!map) {\n setMap(new window.google.maps.Map(ref.current, options))\n }\n }, [map]);\n\n return (\n <>\n \n ${test_group.partner_logo_url\n ? `![\"${test_group.name}\"](\"${test_group.partner_logo_url}\")
`\n : \"\"\n }\n
\n ${test_group.name}
\n ${test_location.name}
\n ${test_location.address}
\n \n \n Register\n \n \n
\n \n {\n locations.map((location, index) => {\n return
\n \n )\n}\n\nconst PrimaryMap = ({ locations, center, zoom = 11, MarkerComponent=Marker }) => {\n const defaultCenter = {\n lat: parseFloat(locations[0]?.test_location.latitude),\n lng: parseFloat(locations[0]?.test_location.longitude)\n }\n\n const render = (status) => {\n if (status === Status.FAILURE) return There was an error
;\n return {t(\"enter_information.search_by_keyword\")}
\n\n
\n \n {\n loadMoreResults([], 0)\n }} />\n
\n \n {withMap\n && <>\n {locations.length > 0 ?
\n \n
\n \n {pagination.page != 0 && toggleModal(test_group, accessToken)}\n {...test_group} />\n )\n })\n }\n {paginator.total_pages > paginator.page &&\n
\n \n \n
\n }\n Ready to register?
\n\n Are you sure you want to register in {name}\n
\n\n \n \n
\n Didn't find what you were looking for? Search again or click here to report an at-home test in {props.state}.
\n : props.quantity === 0\n ?Sorry! There are {props.quantity} organizations within your search criteria. Please try searching using different words.
\n :Showing {props.quantity} organizations within your search criteria.
\n )\n}\n\nconst SearchTestGroupResultItem = (props) => {\n return (\n{props.name}
\n {props.address}
\n {props.name}
\n- \n {\n featuredLocations.map(test_location => {\n return (\n
- \n {\n otherLocations.map(location => {\n return (\n
\n \n
\n Save by barcode
\nSelect Location
\nRedirecting...
\nChoose test type
\n\n {React.Children.map(children, (child) => {\n if (child.type === 'strong') {\n return (\n {child.props.children}\n );\n }\n return child;\n })}\n
\n);\n","import React from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport { Section, SectionItem } from '../../components/styled';\nimport { kitTypeDisplayLetters } from '../../components/utils';\nexport const ContentItems = ({ items, t }) => {\n return (\n <>\n {items.map(({ image, contents }, index) => (\n\n {contents.map(({ label, count }, index) => (\n
\n \n ))}\n \n );\n};\n\nexport default function ContentsStep({ contents, isMobile, t, kitType }) {\n return (\n {t(label, { count })}
\n ))}\n\n {t('test_strip.box_type', {\n type: kitTypeDisplayLetters(kitType),\n })}\n
\n \n{t('test_strip.contents.text_1')}
\n \n \n
\n
\n \n \n {!isMobile && instructions.length !== 1 && ( \n \n {t('test_strip.kit_flow.button_6')}\n \n \n )}\n \n {t('stepper.next')}\n \n \n \n
\n \n \n \n {t('otc.back_button')}\n \n \n
\n \n \n \n {t('otc.back_button')}\n \n \n
\n
\n {t(step.sublabel)}
\n \n )}\n\n 
\n
\n \n );\n};\n\nexport default function InstructionsStep({\n instructions,\n t,\n currentInstruction,\n isMobile,\n}) {\n const { title, subtitle, test_steps, items, link } =\n instructions[currentInstruction];\n return (\n {t(header)}
\n{t(title)}
\n{t(subtitle)}
\n{t('contact_support.contact_us')}
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n option.value === form.conversationMainIssue,\n )}\n label={t('contact_support.ticket_type') + ' *'}\n ariaLabel={t('contact_support.ticket_type')}\n required={true}\n options={conversationMainIssues}\n filledValue={form.conversationMainIssue}\n onChange={(e) => {\n setForm({ ...form, conversationMainIssue: e.value });\n }}\n className={errors.conversationMainIssue && 'is-invalid'}\n />\n {errors.conversationMainIssue && (\n
\n \n option.value === form.customerState,\n )}\n filledValue={form.customerState}\n label={t('no_insurance_information.state')}\n ariaLabel={t('no_insurance_information.state')}\n options={usStateOptions}\n onChange={(e) => setForm({ ...form, customerState: e.value })}\n />\n
\n \n
\n \n \n {t('contact_support.zen_desc')} *\n \n
\n \n {\n setForm({ ...form, authenticity_token: value });\n }}\n >\n {errors.authenticity_token && (\n
\n {t('contact_support.contact_us')}
\n\n
\n For assistance, please contact our support team:
\n\n
{t(title)}
\n{title}
\n \n\n \n \n \n \n \n ![](\"/images/sti-programs/test-kit-2.png\")
\n
\n
\n \n {t('instructions.name')}: {user.first_name} {user.last_name}\n
\n \n {t('registration.date_of_birth')}: {user.date_of_birth.label}\n
\n \n {t('test_strip.confirm.p1')}\n {informationConfirmed && (\n
\n \n \n {t('otc.barcode')} {barcode.toUpperCase()}\n
\n \n \n \n \n
\n \n \n {t('test_strip.kit_flow.button_6')}\n \n \n
\n \n
\n \n {isMobile && (\n <>\n \n {!isMobile && (\n \n
\n \n );\n }\n\n return (\n <>\n \n
\n \n {isMobile && (\n <>\n \n {!isMobile && (\n \n
\n \n );\n}\n","import { Button, Row, Col } from 'react-bootstrap';\nimport React from 'react';\nimport { PrimaryIcon } from '../../../common/components/Icons/PrimaryIcon';\nimport SectionHeader from '../SectionHeader';\nimport { SectionWrapper } from '../styled';\nimport { useTranslation } from 'react-i18next';\nimport { kitCheckList } from \"../../Sti/data/kit_information\";\n\nexport const SUCCESS_REG = \"SUCCESS_REG\";\n\nexport default function RegistrationSuccessStep ({appointment, isMobile, stepForward, kitType}) {\n const { t } = useTranslation();\n const listItem = (text, idx) => (\n \n
\n \n {t(\"test_strip.checklist.title\")} \n
\n {kitCheckList[kitType]?.map((checkList, idx) => listItem(checkList, idx))}\n \n \n \n
\n \n {t('test_strip.instructions.title')}\n
\n\n {`${t('test_strip.instructions.subtitle')} ${\n parseInt(index) + parseInt(1)\n }: `}\n \n {t(test.title)}\n \n
\n \n \n \n {stepName !== 'THANK_YOU' && (\n \n {t(BUTTON_TEXT[stepName])}\n \n )}\n \n
\n );\n}\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Col, Row } from 'react-bootstrap';\nimport ReactMarkdown from 'react-markdown';\nimport ErrorMessage from '../../../common/components/ErrorMessage';\n\nexport function ShippingInformation({ data, activeErrors, t }) {\n const { title, steps } = data;\n return (\n \n \n
\n ) : null}\n
\n );\n}\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nexport function TestKitOverview() {\n const { t } = useTranslation();\n return (\n {t(title)}
\n\n {steps.map(({ label, substeps }, index) => (\n \n
\n ))}\n
\n {activeErrors['error_activating_test_kit'] ? (\n {t(label)}
\n {substeps && (\n \n {substeps.map(({ label }, index) => (\n \n
\n )}\n \n \n
\n );\n}\n","import React from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styled from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport ReactMarkdown from 'react-markdown/with-html';\n\nconst IconWrapper = styled.div`\n height: 50px;\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst IconComponent = ({ Icon, iconStyles = {} }) => {\n return (\n {t('viral_surveillance.overview.title')}
\n{t('viral_surveillance.overview.subtitle')}
\n \n \n \n
\n );\n};\n\nexport function Instructions({ data, t }) {\n const { title, steps } = data;\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' });\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport PrimaryHeartOutline from '../../../common/components/Icons/PrimaryHeartOutline';\nimport ReactMarkdown from 'react-markdown';\nimport { useTranslation } from 'react-i18next';\n\nexport function ThankYou() {\n const { t } = useTranslation();\n return (\n {t(title)}
\n\n {steps.map(({ label, substeps, icon }, index) => (\n \n \n
\n ))}\n
\n \n
\n {substeps && (\n \n {substeps.map(({ label }, index) => (\n \n
\n )}\n \n {icon && (\n \n
\n );\n}\n","export default {\n \"title\": \"viral_surveillance.shipping.title\",\n \"steps\": [\n {\n \"label\": \"viral_surveillance.shipping.step_1.label\",\n \"substeps\": [\n {\n \"label\": \"viral_surveillance.shipping.step_1.substep_1\"\n },\n {\n \"label\": \"viral_surveillance.shipping.step_1.substep_2\"\n },\n ]\n },\n {\n \"label\": \"viral_surveillance.shipping.step_2.label\",\n \"substeps\": [\n {\n \"label\": \"viral_surveillance.shipping.step_2.substep_1\"\n },\n {\n \"label\": \"viral_surveillance.shipping.step_2.substep_2\"\n },\n ]\n },\n {\n \"label\": \"viral_surveillance.shipping.step_3.label\",\n \"substeps\": [\n {\n \"label\": \"viral_surveillance.shipping.step_3.substep_1\"\n },\n {\n \"label\": \"viral_surveillance.shipping.step_3.substep_2\"\n }\n ]\n }\n ]\n}\n","import React from 'react';\n\nconst HandsBubbles = ({ color = '#193154', ...props }) => (\n {t('viral_surveillance.thank_you.title')}
\n\n
\n {t('viral_surveillance.thank_you.p_2')}\n
\n{t('viral_surveillance.thank_you.p_3')}
\n\n
\n );\n}\n","import React from 'react';\nimport { Button, Col, Row } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nconst Test = ({ test, baseTestGroupURL }) => {\n return (\n \n
\n \n \n
\n \n
\n \n {t('viral_surveillance.activate_kit')} {user.first_name}\n
\n {t('otc.x_%_completed', { n: progress })}
\n \n {stepName === VERIFY_DOB && (\n \n
\n \n \n \n \n \n
\n Barcode: {test.uid}
\n \n Resulted: {test.results_at ? 'Test resulted' : 'Not resulted'}\n
\n \n Administered:{' '}\n {new Date(test.localized_administered_at).toLocaleString()}\n
\n \n \n \n {user.first_name} {user.last_name_string}\n \n
\n \n DOB: {user.date_of_birth} (age: {user.age})\n
\n Phone number: {user.phone_formatted}
\n Email: {user.email}
\n \n \n Test group:{' '}\n \n {testStrip.test_group.name}\n \n
\n \n Appointment ID:{' '}\n \n {appointment.id}\n \n
\n {appointment.external_id && (\n <>\n \n External type:{' '}\n {appointment.external_type === 'woo_commerce'\n ? 'WooCommerce'\n : appointment.external_type}\n
\n External ID: {appointment.external_id}
\n \n )}\n \n {previewText}
\n{t('registration_flyer.open_camera')}
\n \n {t('registration_flyer.point_to_qr_code')}\n
\n \n {t('registration_flyer.complete_registration')}\n
\n \n )}\n \n \n \n {qrCodeUrl}\n \n
\n \n \n );\n};\n\nexport default PdfPreview;\n","import React from 'react';\nimport '../../common/locales/i18n';\nimport { languageObject } from \"../../common/utils\";\nimport { useTranslation } from 'react-i18next';\nimport { TrashCan } from '../../common/components/Icons';\nimport {\n Button,\n Col,\n Container,\n Dropdown,\n DropdownButton,\n Row\n} from 'react-bootstrap';\n\nconst TranslationSelections = ({ locales, addlLocales, setSelectedLocales, selectedLocales, setActiveLocale, activeLocale }) => {\n const { i18n } = useTranslation();\n\n const addLocale = (locale) => {\n !selectedLocales.includes(locale) && setSelectedLocales( arr => [...arr, locale].sort());\n\n if(!activeLocale) {\n setActiveLocale(locale);\n i18n.changeLanguage(locale);\n }\n }\n\n const removeLocale = (locale) => {\n let newSelections = selectedLocales.filter(l => l !== locale);\n setSelectedLocales(newSelections);\n setActiveLocale(newSelections[0]);\n i18n.changeLanguage(newSelections[0]);\n }\n\n const setActive = (locale) => {\n setActiveLocale(locale);\n i18n.changeLanguage(locale);\n }\n\n const LocalesDropdown = ({title, locales, classes}) => (\n \n ![\"placeholder\"](\"/images/placeholder.png\")
\n
\n )}\n \n No language added
\nTo preview and print a form, you need to first select a language.
\n\n
\n \n
\n {`Confirm which translations to print for ${registrationType} registration`}
\n\n window.location.href = urlParams.get(\"redirect\")\n }} />\n
\n )\n}\n\nexport default Show;\n","import React, { useState, useEffect } from 'react';\nimport CreatableSelect from 'react-select/creatable';\nimport DateRangeField from './DateRangeField';\nimport TablePagination from './TablePagination';\nimport { Button, Row, Col } from 'react-bootstrap';\nimport { humanize } from '../utils';\nimport axios from 'axios';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faRotate } from '@fortawesome/pro-solid-svg-icons';\n\nconst fixISODateFormat = (date) => {\n if(date.length === 10) {\n return date.replace('-', '/');\n }\n return date;\n};\n\nconst match = (longString, shortString) => {\n return longString.toLowerCase().includes(shortString.toLowerCase());\n}\n\nconst SimpleSeach = ({fieldName, prompt, options, selected, onChange }) => {\n const [inputValue, setInputValue] = useState(selected);\n\n const props = {\n className: \"basic-single\",\n classNamePrefix: \"select\",\n placeholder: prompt,\n label: prompt,\n defaultValue: options.find((option) => option.value === parseInt(selected) || option.value === selected),\n onChange: (e) => {\n const value = e ? e.value : null;\n setInputValue(value == 0 ? true : value);\n onChange && onChange(value);\n },\n components: { DropdownIndicator: () => null, IndicatorSeparator: () => null },\n options: options,\n isSearchable: true,\n isClearable: true,\n name: fieldName,\n filledValue: inputValue,\n openMenuOnClick: false,\n defaultMenuIsOpen: false,\n closeMenuOnSelect: true,\n createOptionPosition: 'first'\n }\n\n return 00 total results
\n } else {\n return(\n \n \n {filterCleared ? `${table.length} total results` : `${filteredTable.length} results` }\n \n { !clickableItem && showQuery && query && ` for “${humanize(query)}”` }\n { !clickableItem && showDates && startDate && startDate == endDate ?\n ` Date: ${startDate}`\n :\n !clickableItem && showDates && startDate && endDate && ` Date: “${startDate}” - “${endDate}”`\n }\n { clickableItem && ` with “${clickableItem}”` }\n { filterCleared ||
\n )\n }\n };\n\n useEffect(() => {\n if(loading) {\n fetchTable();\n }\n if(clickableItem) {\n filterTable(null, null, null, clickableItem);\n }\n setOptions(searchableOptions(table));\n }, [clickableItem]);\n\n useEffect(() => {\n setTotalPages(Math.ceil(table.length/limit));\n }, [limit]);\n\n return(\n {clearFilter()}}>Clear filters
}\n {title}
\n \n\n {reloading ?\n loading ?\n
\n No records available
}\n1/01/2023
12:00 PM PST
\n 12:00 PM PST
Primary.Health
Automatic update
Automatic update
Updated field
Updated at from 1/1/2023 07:23 AM EDT to 1/2/2023 07:23 AM EDT
123456
{humanize(version.object_changed)}: {new_value}
\n } else {\n return {humanize(version.object_changed)} from {old_value} to {new_value}
\n }\n}\n\nconst formatChangeDate = (date) => {\n const exractedDate = extractDate(date);\n return exractedDate ? `${exractedDate.date} ${exractedDate.time}` : date;\n}\n\nconst extractDate = (datetime) => {\n try {\n const newDate = new Date(datetime);\n const parsedDate = newDate.toLocaleDateString('en-US');\n const parsedTime = newDate.toLocaleTimeString('en-US', {hour: '2-digit', minute:'2-digit', timeZoneName: 'short'});\n\n if(!datetime || parsedDate.toLowerCase() === 'invalid date' || parsedTime.toLowerCase() === 'invalid date') {\n return null;\n }\n\n return {\n 'date': parsedDate,\n 'time': parsedTime\n };\n } catch(e) {\n if (e instanceof RangeError) {\n return null;\n }\n }\n}\n\nconst PrimaryVersionsTable = ({ title, urlPath, flippers }) => {\n const [clickableItem, setClickableItem] = useState(null);\n const eventTypeLabel = (version) => {\n if (version.event == \"destroy\") {\n return `Destroyed ${version.item_type}`\n } else {\n return `${humanize(version.event)}d ${version.item_type}`\n }\n }\n\n const rows = (table) => {\n return(\n table.map( version => {\n\n const key = `${version.id}-${version.object_changed}`;\n const datetime = extractDate(version.created_at);\n return (\n {datetime.date}
{datetime.time}
: {datetime.time}
{version.created_at}
}\n {humanize(version.updated_by_role)}
setClickableItem(version.id)}>{version.id}
\n Filter by\n {IMMUNIZATION_FILTERS.filter((f) => {\n return allowNonMedicalExemptions || f.value !== \"non_medically_exempt\";\n }).map((f) => {\n return (\n \n {\n f.value === selectedFilterBadge\n ? setSelectedFilterBadge(null)\n : setSelectedFilterBadge(f.value);\n }}\n />\n \n )\n })}\n
\n \n \n \n
\n \n
\n );\n };\n\n return (\n <>\n {exemption_type_title} exemption
\nCategory: {EXEMPTION_CATEGORY_LABELS[exemption.category] || exemption.category}
\n Expires: {expiration}
\n Created: {exemption.created_at.substring(0, 10)}
\n \n )}\n \n \n setEditExemption(!editExemption)}\n >\n Edit exemption\n removeExemption(exemption.id)}\n >\n Remove exemption\n
\n \n
\n \n
\n {setBadge(record)}\n {record.name}
\n {record.next_dose_due && !pendingStatuses.includes(immunizationRecordStatus) && (\n \n |\n {\"Next due: \"}{record.next_dose_due}\n \n )}\n| Series | \nDate given | \nAge given | \nVaccine | \nSource | \n\n |
|---|---|---|---|---|---|
| {idx + 1} of {record.num_doses} | \n{dose.date} | \n{ageGivenLabel(dose.age_given)} | \n{dose.name} | \n{sourceLabel(dose.source)} | \n\n {dose.source === \"upload\" && (\n | \n
\n \n \n \n Print Student Immunization Form\n \n \n \n setStaffInitials(e.target.value)}\n />\n \n \n { onPrintClick(staffInitials), closeModal() }}\n >\n Print\n \n \n \n
\n );\n};\n\nexport default DownloadImmunizationRecordsModal;\n","import axios from 'axios';\nimport React, { useState } from 'react';\nimport { Button, Modal } from 'react-bootstrap';\nimport FloatingLabelInput from '../../../common/components/FloatingLabelInput';\nimport ModalHeader from '../../../common/components/ModalHeader';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTrash } from '@fortawesome/pro-regular-svg-icons';\n\nconst EditVaccineHistoryModal = ({\n test_group,\n test_group_user,\n vaccineHistoryToEdit,\n setVaccineHistoryToEdit,\n reload,\n}) => {\n const [loadingDelete, setLoadingDelete] = useState(false);\n const [loadingUpdate, setLoadingUpdate] = useState(false);\n const deleteVaccineHistory = async () => {\n setLoadingDelete(true);\n const response = await axios.delete(\n `/test_groups/${test_group.slug}/immunizations/${test_group_user.id}/vaccine_histories/${vaccineHistoryToEdit.id}`,\n );\n setVaccineHistoryToEdit(null);\n setLoadingDelete(false);\n await reload();\n }\n\n const save = async () => {\n setLoadingUpdate(true);\n await axios.put(\n `/test_groups/${test_group.slug}/immunizations/${test_group_user.id}/vaccine_histories/${vaccineHistoryToEdit.id}`,\n {\n vaccine_history: {\n vaccinated_at: vaccineHistoryToEdit.vaccinatedAt\n }\n },\n );\n setVaccineHistoryToEdit(null);\n setLoadingUpdate(false);\n await reload();\n }\n\n const onHide = () => {\n setVaccineHistoryToEdit(null)\n };\n\n return (\n Please enter the staff initials to be printed on the immunization form.
\n \n\n \n \n \n Edit dose\n \n \n \n {\n setVaccineHistoryToEdit({...vaccineHistoryToEdit, vaccinatedAt: e.target.value});\n }}\n />\n \n \n setVaccineHistoryToEdit(null)}\n >\n Cancel\n \n \n {loadingUpdate && \"...\"}\n {!loadingUpdate && \"Save\"}\n \n \n \n
\n );\n};\n\nexport default EditVaccineHistoryModal;\n","import React, { useState, useEffect } from 'react';\nimport { Button, Col, Row, Nav, Tab } from 'react-bootstrap';\nimport VaccineGroup from './VaccineGroup';\nimport ImmunizationsFilter from './ImmunizationsFilter';\nimport { faPlus, faUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport ImmunizationsSummaryCard from './ImmunizationsSummaryCard';\nimport axios from 'axios';\nimport DownloadImmunizationRecordsModal from './widgets/DownloadImmunizationRecordsModal';\nimport EditVaccineHistoryModal from './widgets/EditVaccineHistoryModal';\nimport { format } from 'date-fns';\nimport { countExemptions, immunizationRecordCount } from '../utils';\nimport { pluralize } from '../../../bundles/TestGroups/components/Toolbar';\n\nconst ImmunizationContent = ({\n activeTab,\n title,\n immunizationRecords,\n filteredImmunizationRecords,\n setFilteredImmunizationRecords,\n test_group,\n recordCount,\n exemptionCount,\n showDownloadImmunizationRecordsModal,\n setShowDownloadImmunizationRecordsModal,\n review_test_group_schools_student_upload_url,\n vaccineHistoryToEdit,\n setVaccineHistoryToEdit,\n reload,\n test_group_user,\n pending_statuses,\n exemption_categories,\n exemption_options,\n exemption_types\n}) => (\n <>\n \n \n {loadingDelete && \"...\"}\n {!loadingDelete && \"Delete dose\"}\n
\n {title}
\n\n\n {pluralize(recordCount, \"immunization record\")}\n {exemptionCount > 0 && ` | ${pluralize(exemptionCount, \"exemption\")}`}\n
\n \n\n \n \n \n \n\n \n \n \n\n
\n};\n\nexport default ShowImmunizations;\n","import { sum } from \"../common/utils\";\n\nexport const immunizationRecordCount = (immunizationRecords) =>\n sum(Object.values(immunizationRecords).map(immunizationRecord => immunizationRecord.doses.length))\n\nexport const countExemptions = (immunizationRecords) => {\n if (!immunizationRecords) return 0;\n return Object.values(immunizationRecords).filter((ir) => {\n return [\"medically_exempt\", \"non_medically_exempt\"].includes(ir[\"immunization_record_status\"]);\n }).length;\n};\n","import React from 'react';\nimport { Card, Row, Col } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport FloatingLabelInput from '../../../common/components/FloatingLabelInput';\nimport { faXmark } from '@fortawesome/pro-solid-svg-icons';\n\n\nconst AddVaccineCard = ({stagedVaccineHistory, onChange, onRemove}) => {\n return (\n \n Back\n
\n \n
\n {stagedVaccineHistory.vaccine}
\n{stagedVaccineHistory.description}
\n \n \n \n \n onChange(inputRef.current.files?.item(0))}\n />\n \n
\n);\n\nconst UploadBox = ({\n id = 'file_upload',\n name = 'file_upload',\n onChange: propOnChange = () => {},\n inputRef = React.createRef(),\n style = {},\n}) => {\n const [isDragOver, setIsDragOver] = useState(false);\n\n const onDragEvent = (e, isDragOver) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragOver(isDragOver);\n };\n const onDragOver = (e) => onDragEvent(e, true);\n\n const onDragLeave = (e) => onDragEvent(e, false);\n\n const onDrop = (e) => {\n onDragEvent(e, false);\n propOnChange(e.dataTransfer.files?.item(0));\n };\n\n return (\n \n {\n dispatch({\n type: \"setExemption\",\n value: {\n category: \"medical\",\n exemptionType: \"permanent\",\n },\n });\n setShow(true);\n }}\n >\n Log medical exemption\n \n {allowNonMedicalExemptions && (\n {\n dispatch({\n type: \"setExemption\",\n value: {\n category: \"non_medical\",\n exemptionType: \"permanent\",\n },\n });\n setShow(true);\n }}\n >\n Log religious exemption\n \n )}\n {show && (\n \n \n {\n setShow(false);\n dispatch({\n type: \"setExemption\",\n value: {},\n });\n }} />\n \n
\n {exemption.category != \"medical\" && (\n \n {\n dispatch({\n type: \"setExemption\",\n value: { ...exemption, exemptionType: \"temporary\" },\n });\n }}\n />\n \n {\n dispatch({\n type: \"setExemption\",\n value: { ...exemption, exemptionType: \"permanent\" },\n });\n }}\n />\n \n
\n )}\n \n {\n dispatch({\n type: \"setExemption\",\n value: { ...exemption, expiresAt: e.target.value },\n });\n }}\n />\n \n
\n }\n \n )}\n
\n );\n}\n\nexport default Exemption\n","import React, { useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport GridList, { GridListElement } from '../../../common/components/GridList';\nimport {\n ActionButton,\n CollapseIcon,\n ExpandIcon,\n FilePreview,\n TrashCanIcon,\n} from '../../../common/components/UploadList';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faDownload } from '@fortawesome/pro-regular-svg-icons';\n\nconst shortenFilename = (filename) => {\n if (filename.length > 15) {\n return filename.substr(0, 10) + '..' + filename.substr(filename.length - 4);\n }\n return filename;\n};\n\nconst ItemContainer = styled(GridListElement)`\n ${({ expanded }) =>\n expanded &&\n css`\n width: 100%;\n `}\n`;\n\nconst DocumentUpload = ({\n upload: {\n id,\n filename,\n url,\n content_type: contentType,\n uploaded_by: uploadedBy,\n },\n onDelete,\n}) => {\n const [expanded, setExpanded] = useState(false);\n\n return (\n {exemption.category === \"medical\" ? \"Medical\" : \"Religious\"} exemption
\n \n\n (exemption.conditions || []).indexOf(option.value) >= 0)}\n options={options}\n filledValue={exemption.conditions?.length > 0}\n isMulti={true}\n onChange={(s) => {\n dispatch({\n type: \"setExemption\",\n value: { ...exemption, conditions: (s || []).map((s) => s.value) },\n });\n }}\n />\n
\n {\n exemption.exemptionType === \"temporary\" &&\n Immunizations under exemption
\nPlease select all relevant immunizations that fall under the {exemption.category === \"medical\" && \"medical\"} exemption.
\n Exemption expiration date
\n \n\n \n {shortenFilename(filename)}{' '}\n
\n \n
\n \n );\n\n const overdueImmunizations = overdue_vaccines.length > 0 && (\n \n Notify the student's parents about rejecting the uploaded documents\n
\n\n If you proceed, none of the added vaccines or exemptions will be\n saved. Would you like to continue?\n
\n\n dispatch({ type: 'setShowRejectModal', value: false })}\n >\n No, go back\n \n {\n dispatch({ type: 'setShowRejectModal', value: false });\n calculateImmunizationCompliance();\n // makes custom_message_modal work for current single student\n document.getElementById('selected_test_group_user_ids').value = [\n test_group_user.id,\n ];\n document.getElementsByClassName('message-count')[0].innerHTML = 1;\n // redirect to test_group_immunizations_immunization_url instead of test_group_communication_url after clicking 'Send message'\n document.getElementById('redirect_url').value =\n test_group_immunizations_immunization_url;\n // save message to localStorage on 'Send message' button click\n document\n .getElementById('create-button')\n .addEventListener('click', () => {\n localStorage.setItem(\n 'immunizationSuccessMessage',\n 'Communication to parents initiated',\n );\n });\n }}\n >\n Yes, continue\n \n
\n \n \n Filter by overdue: \n \n {overdue_vaccines.map((ov, idx) => (\n \n dispatch({ type: 'setVaccineSearch', value: ov })} />\n \n ))}\n
\n );\n\n const savedExemptions = state.existingExemptions.length > 0 && (\n \n \n Saved: \n \n {state.existingExemptions.map((me) => {\n return (\n \n \n {me.name}{' '}\n {me.exemption_type === 'temporary' && `(exp: ${me.expires_at})`}\n \n \n );\n })}\n
\n );\n\n return (\n \n {rejectModal}\n \n \n
\n \n Manage {test_group_user.user.first_name}{' '}\n {test_group_user.user.last_name}'s Immunizations\n
\n\n {\n const newStagedVaccineHistories = [\n ...state.stagedVaccineHistories,\n ];\n newStagedVaccineHistories.push({\n cvxCode: v.cvx_code,\n vaccine: v.name,\n vaccinatedAt: format(new Date(), 'yyyy-MM-dd'),\n description: v.description,\n });\n dispatch({ type: 'setStagedVaccineHistories', value: [...newStagedVaccineHistories] });\n dispatch({ type: 'setVaccineSearch', value: '' });\n dispatch({ type: 'setFoundVaccines', value: [] });\n }}\n >\n
\n );\n })}\n {state.isSearching && 'Loading...'}\n\n Add immunizations manually
\n {overdueImmunizations}\n\n dispatch({ type: 'setVaccineSearch', value: e.target.value })}\n />\n
\n {state.foundVaccines.map((v) => {\n return (\n {v.name}
\n{v.description}
\n \n {state.stagedVaccineHistories.map((stagedVaccineHistory, index) => {\n return (\n
\n \n {\n const copied = [...state.stagedVaccineHistories];\n copied[index] = newVaccineHistory;\n dispatch({ type: 'setStagedVaccineHistories', value: [...copied] });\n }}\n onRemove={() => {\n const newStagedVaccineHistories = [\n ...state.stagedVaccineHistories,\n ].filter((stagedVaccineHistory, i) => i !== index);\n dispatch({ type: 'setStagedVaccineHistories', value: [...newStagedVaccineHistories] });\n }}\n />\n
\n );\n })}\n Exemptions to Immunization Law
\n {savedExemptions}\n\n {\n dispatch({ type: 'setConfirmationCheckboxChecked', value: !state.confirmationCheckboxChecked });\n }}\n />\n {state.error &&
\n )}\n \n {state.error}
}\n \n {pendingStatus && (\n dispatch({ type: 'setShowRejectModal', value: !state.showRejectModal })}\n >\n Reject\n \n )}\n \n {state.loadingSave && '...'}\n {!state.loadingSave && pendingStatus ? 'Approve' : 'Add & save'}\n \n
\n \n \n {state.loadingUpload && '...'}\n {!state.loadingUpload && 'Upload'}\n \n
\n Related documentation
\n\n Related documentation include but are not limited to: Yellow card,\n medical exemptions, etc.\n
\n \n
\n {\n state.isScanning ? (\n \n
\n ) : (\n {t('self_administration.scan_barcode')}
\n \n
\n
\n
\n {showManualInput ? (\n \n
\n {t('self_administration.or_enter_barcode_manually')}\n
\n \n
\n setUid(e.target.value)}\n />\n handleScan(uid)}\n data-test-hook=\"submit\"\n />\n
\n \n ) : (\n \n setShowManualInput(true)}\n data-test-hook=\"enter_barcode_manually\"\n >\n {t('self_administration.enter_barcode_manually')}\n \n
\n )}\n \n )\n};\n","export const useFetchMemo = (callback, dispatch, cache) => (\n (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) return cache.get(key);\n const value = callback(...args);\n cache.set(key, value);\n dispatch({type: 'updateCache', value: cache})\n return value;\n }\n);\n","import { Button, Card, Row, Col, Spinner } from 'react-bootstrap';\nimport React, { useMemo, useRef, useState, useEffect, useCallback, useReducer } from 'react';\nimport SectionHeader from '../SectionHeader';\nimport { SectionActions, SectionWrapper, SectionBody } from '../styled';\nimport FloatingLabelInput from '../../../common/components/FloatingLabelInput';\nimport styled, { css } from 'styled-components';\nimport { PrimaryIcon } from '../../../common/components/Icons/PrimaryIcon';\nimport axios from 'axios';\nimport { useFetchMemo } from '../../../common/utils/tools';\n\nconst SearchBox = styled.div`\n background: #FFFFFF;\n border: 1px solid #F7F9FC;\n box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);\n position: relative;\n max-height: 219px;\n overflow: auto;\n position: absolute;\n z-index: 100;\n ${({ width }) => css`width: ${width}px;`}\n`;\n\nconst Item = ({test_group: testGroup, test_location: location, onClick}) => (\n \n {testGroup.name} \n {location.name}\n
\n)\n\nconst SearchTestGroupResult = ({test_group: testGroup, test_location: location, onClick, selected}) => {\n return (\n {testGroup.name} ({location.name})
\n {location.address}\n \n {t('test_strip.credentials.location_step.p1')}
\n \n
\n \n {formState.location && searchBegan && locations.length === 0 && autoCompeleteLocations.length === 0 &&\n locationDispatch({type: 'select', value: idx })} />\n )\n })\n }\n {paginator.total_pages > paginator.page &&\n
\n \n
\n }\n {\n locations.map((data, idx) => {\n return (\n {t('registration_direcory.zero_results.title')}
\n{t('registration_direcory.zero_results.sub_title')}
\n- \n
- {t('registration_direcory.zero_results.p1')} \n
- {t('registration_direcory.zero_results.p2')} \n
- {t('registration_direcory.zero_results.p3')} \n
- {t('registration_direcory.zero_results.p4')} \n
\n \n
\n } \n \n {appointment.user.first_name[0].toUpperCase()}{appointment.user.last_name[0].toUpperCase()}\n
\n \n \n {appointment.user.first_name} {appointment.user.last_name[0]}
\n DOB {appointment.user.date_of_birth}
\n \n {appointment.test_group.name}
\n \n
\n \n \n {t('test_strip.appointments.p1')}\n
\n {error == \"test_kit_not_created\" && {t('errors.generic.message')}
}\n {formState.appointments.map((appointment, idx) => (\n \n setSelectedIndex(idx)}\n selected={selectedIndex === idx}\n />\n
\n ))}\n \n setSelectedIndex(-1)}\n >\n \n \n \n
\n {t('test_strip.verify.p1')}
\n ![](\"/images/sti-programs/test-kit.png\")
\n \n \n {t('test_strip.no_box')}\n \n
\n \n )\n\n const scanBarcode = (\n \n {t('test_strip.welcome')}\n
\n \n\n (\n \n {children}\n \n ),\n }}\n />\n
\n {t('test_strip.scan.p1')}
\n \n {scanBarcode}\n {dontHaveABox}\n
\n ) : (\n <>\n {dontHaveABox}\n {scanBarcode}\n \n )}\n \n {t('test_strip.scan.unknown_barcode')}\n
\n )}\n {error == \"recalled_kit\" && (\n {t('test_strip.credentials.p1')}
\n \n \n {\n const contact = {contact: e.target.value}\n if (isMobilePhone(e.target.value)) {\n contact.phone_number = e.target.value;\n } else if (validateEmail(e.target.value)) {\n contact.email = e.target.value;\n }\n dispatch({type: 'updateForm', values: contact})\n }}\n ariaLabel=\"phone_or_email\"\n ariaRequired\n ariaDescribedby=\"phoneOrEmailErrorDesc\"\n id=\"phone_or_email\"\n label={`${t('registration.phone_or_email')}`}\n onKeyDown={(e) => {\n if (e.keyCode == 13 && hasContact){\n checkCredentials()\n }\n }}\n />\n
\n \n \n \n \n \n
\n);\n\nconst CompletionView = ({ dispatch, navigateTo }) => (\n \n
\n);\n\nexport default CompletionView;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst NavBarItem = ({ title, active, IconComponent = React.Fragment }) => (\n Thank you!
\n\n Your students immunizations are now pending review for your school to\n review.\n
\n\n {\n dispatch({ type: 'reset' });\n navigateTo('next');\n }}\n >\n Back to profile\n \n
\n \n
\n);\n\nconst HoverIcon = styled.svg`\n --color: ${({ active }) =>\n active ? 'var(--active-color)' : 'var(--inactive-color)'};\n`;\n\nconst NavBar = ({ user }) => (\n \n);\n\nexport default NavBar;\n","export const filterImmunizationRecords = (\n immunizationRecords,\n statuses = ['overdue', 'pending'],\n) =>\n Object.entries(immunizationRecords)\n .filter((r) => statuses.includes(r[1].immunization_record_status))\n .map((r) => ({ key: r[0], ...r[1] }));\n","import React from 'react';\n\nconst Header = ({ user }) => (\n \n
\n);\n\nexport default Header;\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { PrimaryIcon } from '../../common/components/Icons/PrimaryIcon';\n\nconst OverdueIcon = () => (\n {user.full_name}
\n \n ID: {user.id || 'N/A'}\n \n\n \n Due: {immunizationRecord.next_dose_due || 'N/A'}\n \n {immunizationRecord.name} immunization\n
\n);\n\nconst State = ({ immunizationRecord }) => (\n \n {immunizationRecord.immunization_record_status}\n \n);\n\nconst CardWrapper = styled.div`\n ${({ status }) =>\n status === 'pending'\n ? css`\n --icon-background-color: #e7edfd;\n --icon-fill-color: #2862fa;\n --status-color: #586da0;\n `\n : css`\n --icon-background-color: #ffdde4;\n --icon-fill-color: #f70235;\n --status-color: #d14110;\n `};\n`;\n\nconst ImmunizationCard = (props) => (\n \n
\n Immunization info.\n
\n);\n\nexport default ImmunizationInfo;\n","import React from 'react';\n\nconst SchoolImmunizations = ({\n startFileUpload = () => {},\n pendingImmunizationRecords = [],\n}) => (\n \n {pendingImmunizationRecords.map((immunizationRecord, idx) => (\n
\n \n \n School immunizations\n \n\n
\n);\n\nexport default SchoolImmunizations;\n","import React, { useEffect } from 'react';\nimport { filterImmunizationRecords } from '../helpers/utils';\nimport Header from './Header';\nimport ImmunizationInfo from './ImmunizationInfo';\nimport SchoolImmunizations from './SchoolImmunizations';\n\nconst Summary = ({\n user,\n navigateTo,\n immunizationRecords: immunizationRecordsProp = {},\n pendingUploads = [],\n refreshImmunizationRecords = () => {},\n}) => {\n // Set local status if there's pending uploads associated\n const pendingImmunizationRecords = filterImmunizationRecords(\n immunizationRecordsProp,\n )\n .map((record) =>\n pendingUploads.find((pendingUpload) => pendingUpload[record.key])\n ? { ...record, immunization_record_status: 'pending' }\n : record,\n )\n .sort(\n (a, b) => a.immunization_record_status > b.immunization_record_status,\n );\n\n useEffect(refreshImmunizationRecords, []);\n\n return (\n \n
\n \n \n 2023-2024 Immunization Status\n \n \n {\n pendingImmunizationRecords.filter(\n (r) => r.immunization_record_status === 'overdue',\n ).length\n }{' '}\n Overdue immunizations\n \n
\n \n \n
\n \n navigateTo('upload')}\n pendingImmunizationRecords={pendingImmunizationRecords}\n />\n
\n \n setChecked(e.target.checked)}\n disabled={disabled}\n />\n \n Dose {numDose} of {numDoses}\n \n {checked && (\n \n \n )}\n
\n );\n};\n\nconst ImmunizationDetails = ({\n user,\n immunization,\n present,\n toggleSelection,\n doses,\n setDoseAdministrationDate,\n}) => {\n const missingDoses = immunization.num_doses - immunization.doses.length;\n\n return (\n \n toggleSelection(immunization.key)}\n >\n {}}\n />\n {immunization.name}\n
\n {present && (\n \n {[...Array(missingDoses)].map((_, idx) => (\n 0 && !doses[idx - 1]}\n doseDate={doses[idx]?.dateObject}\n setDoseAdministrationDate={(date) =>\n setDoseAdministrationDate(immunization.key, idx, date)\n }\n />\n ))}\n
\n \n )}\n \n );\n};\n\nconst UploadType = ({\n user,\n files,\n dispatch,\n immunizationRecords,\n navigateTo,\n}) => {\n const overdueImmunizations = filterImmunizationRecords(immunizationRecords, [\n 'overdue',\n ]);\n\n const [immunizations, setImmunizations] = useState({});\n\n const toggleImmunization = (immunizationKey) => {\n const newImmunizations = { ...immunizations };\n if (!newImmunizations[immunizationKey]) {\n newImmunizations[immunizationKey] = { doses: [] };\n } else {\n delete newImmunizations[immunizationKey];\n }\n\n setImmunizations(newImmunizations);\n };\n\n const setDoseAdministrationDate = (immunizationKey, idx, dateObject) => {\n const newImmunizations = { ...immunizations };\n newImmunizations[immunizationKey].doses[idx] = {\n date: dateObject.format('YYYY-MM-DD'),\n dateObject,\n };\n\n setImmunizations(newImmunizations);\n };\n\n return (\n \n
\n );\n};\n\nexport default UploadType;\n","import React, { useCallback, useState } from 'react';\nimport axios from 'axios';\n\nimport CompletionView from './CompletionView';\nimport NavBar from './NavBar';\nimport UploadRecords from './UploadRecords';\nimport Summary from './Summary';\nimport UploadType from './UploadType';\nimport { useNavigation } from '../../common/components/Navigation';\nimport { uploadImmunizations } from '../helpers/requests';\n\nconst NAVIGATION_MAP = {\n info: {\n component: Summary,\n navigationActions: {\n upload: 'upload',\n },\n },\n upload: {\n component: UploadRecords,\n navigationActions: {\n back: 'info',\n next: 'uploadType',\n },\n },\n uploadType: {\n component: UploadType,\n navigationActions: {\n back: 'upload',\n next: 'completion',\n },\n beforeLeaveAsync: uploadImmunizations,\n },\n completion: {\n component: CompletionView,\n navigationActions: {\n next: 'info',\n },\n },\n};\n\nconst initialState = ({ immunization_document_upload_path }) => ({\n immunization_document_upload_path,\n immunization_records: {},\n files: [],\n});\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'reset':\n return { ...state, immunization_records: {}, files: [] };\n default:\n throw new Error('Unknown action:', action);\n }\n};\n\nconst Dashboard = ({\n user,\n immunization_records_path: immunizationRecordsPath,\n ...props\n}) => {\n const [immunizationRecords, setImmunizationRecords] = useState([]);\n const [pendingUploads, setPendingUploads] = useState([]);\n\n const { state, dispatch, currentNode } = useNavigation(\n NAVIGATION_MAP,\n 'info',\n initialState(props),\n reducer,\n );\n\n const ContentComponent = currentNode.component;\n\n const refreshImmunizationRecords = useCallback(() => {\n axios.get(immunizationRecordsPath).then((r) => {\n setImmunizationRecords(r.data.immunization_records);\n setPendingUploads(r.data.pending_uploads);\n });\n }, []);\n\n return (\n \n {\n e.preventDefault();\n navigateTo('back');\n }}\n >\n Back\n \n
\n Which immunizations did you upload today?
\n\n Some immunizations may group different vaccinations together. If that is\n the case, please select all the immunization groups that apply.\n
\n\n {overdueImmunizations.map((immunization, idx) => (\n
\n \n {\n dispatch({\n type: 'update',\n values: { immunization_records: immunizations },\n });\n navigateTo('next');\n }}\n >\n Add & continue\n \n navigateTo('next')}\n >\n Skip & continue\n \n
\n \n
\n );\n};\n\nexport default Dashboard;\n","import axios from 'axios';\n\nexport const uploadImmunizations = ({\n immunization_document_upload_path: uploadPath,\n files,\n immunization_records,\n}) => {\n var formData = new FormData();\n files.forEach((file) => {\n formData.append('documents[]', file);\n });\n formData.append('metadata', JSON.stringify(immunization_records));\n\n return axios.post(uploadPath, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n });\n};\n","import React from 'react';\nimport VerificationCodeInput from '../../common/components/VerificationCodeInput';\nimport { useVerifyContactInformation } from '../../ContactVerification/Verify';\n\nconst EmptyNavbar = () => (\n \n \n dispatch({ type: 'perform_navigation', action })\n }\n immunizationRecords={immunizationRecords}\n pendingUploads={pendingUploads}\n refreshImmunizationRecords={refreshImmunizationRecords}\n />\n
\n \n
\n);\n\nconst ContactVerification = ({\n user: { email, phone_number: phoneNumber },\n test_group: testGroup,\n}) => {\n const queryParams = new URLSearchParams(document.location.search);\n const defaultVerificationMethod =\n queryParams.get('ref') === 'sms' ? 'phone_number' : 'email';\n\n const {\n setOtpCode,\n verificationMethod,\n canToggleVerificationMethod,\n toggleVerificationMethod,\n loading,\n isInvalidCode,\n resendConfirmationCode,\n } = useVerifyContactInformation(\n email,\n phoneNumber,\n (id) => {\n console.log('redirecting to', queryParams.get('redirect'));\n window.location.href = queryParams.get('redirect');\n },\n false,\n false,\n defaultVerificationMethod,\n );\n\n return (\n \n \n
\n \n {(testGroup.partner_logo_url || testGroup.partner_logo_url) && (\n
\n \n
\n )}\n Access your student profile here!
\n\n We sent you a confirmation code.\n
\n Please enter the code we sent to:{' '}\n {verificationMethod === 'email' ? email : phoneNumber}\n
\n \n Didn’t get it?{' '}\n
\n \n
\n
\n );\n};\n\nexport const LocalizedNestedDropdown = ({\n prefix = '',\n fallbackPrefix = '',\n ...props\n}) => {\n const { t } = useTranslation('translation', { prefix });\n\n const labelFromKey = (key) =>\n (prefix && t(`${prefix}.${key}`, { defaultValue: '' })) ||\n (fallbackPrefix && t(`${fallbackPrefix}.${key}`, { defaultValue: '' })) ||\n t(key);\n\n return \n {\n const csv = toCsv(data);\n const fileName = \"upload.csv\";\n const fileType = \"text/csv\";\n const file = new File([csv], fileName, { type: fileType });\n const formData = new FormData();\n formData.append('data_import[import_type]', 'participants_import');\n formData.append('data_import[import_file]', file);\n formData.append('data_import[allow_updates]', true);\n formData.append('data_import[dry_run]', false);\n formData.append('data_import[notify_users]', false);\n\n\n await axios.post(\n upload_url,\n formData,\n {\n headers: { \"Content-Type\": \"multipart/form-data\" },\n }\n );\n }}\n />\n
\n );\n}\n\nexport default StudentsImporter;\n","import React, { useContext } from 'react';\nimport { Button, Tooltip } from 'react-bootstrap';\n\nimport Wrapped from '../../common/components/Wrapped';\nimport TooltipWrapper from '../../common/components/TooltipWrapper';\n\nexport const assembleUrl = (url, param) =>\n url\n ? url.indexOf('?') !== -1\n ? `${url}&${param}`\n : `${url}?${param}`\n : `?${param}`;\n\nconst CheckoutButton = ({\n variant = 'primary',\n onDemand,\n links: {\n create_on_demand_appointment_url,\n },\n readyToCheckout,\n onClick: propOnClick,\n}) => {\n const urlWithLocationParam = url;\n\n const buttonProps = (href) =>\n propOnClick\n ? { onClick: () => propOnClick(href) }\n : { href: urlWithLocationParam(href), 'data-method': 'post' };\n\n return onDemand ? (\n \n\n
\n
\n \n \n );\n};\n\nexport default FilterSideBar;","import React from \"react\";\nimport { Button, Col, OverlayTrigger, Row, Tooltip } from \"react-bootstrap\";\n\nimport FloatingLabelInput from \"../../../common/components/FloatingLabelInput\";\nimport FormSelect from \"../../../common/components/FormSelect\";\n\nconst SearchFilters = ({\n filterOptions: {\n location_options: locationOptions,\n grade_options: gradeOptions,\n },\n filters,\n openStats,\n setFieldValue,\n setFilters,\n setShowSideBar,\n}) => {\n\n return (\n <>\n \n setSideBarFieldValue(\"q_student\", e.target.value)}\n className=\"my-3\"\n prependIcon=\"search\"\n />\n
\n \n \n Location \n setSideBarFieldValue(\"appointment_slot_group_id\", id)}\n selected={locationOptions.filter(o => o.value === sideBarFilters.appointment_slot_group_id)}\n />\n \n
\n \n \n Grade \n setSideBarFieldValue(\"grade\", id)}\n selected={gradeOptions.filter(o => o.value === sideBarFilters.grade)}\n />\n \n
\n \n \n Immunization Status \n setSideBarFieldValue(\"student_immunization_status\", values)}\n valueKey=\"value\"\n labelKey=\"label\"\n placeholder=\"\"\n />\n \n
\n \n \n Immunization Compliance Status \n setSideBarFieldValue(\"immunization_record_status\", values)}\n valueKey=\"value\"\n labelKey=\"label\"\n placeholder=\"\"\n />\n \n
\n\n \n \n Immunization \n setSideBarFieldValue(\"immunization\", values)}\n valueKey=\"value\"\n labelKey=\"label\"\n placeholder=\"\"\n />\n \n
\n\n \n \n Recommended Immunization Status \n setSideBarFieldValue(\"ice_immunization_status\", values)}\n valueKey=\"value\"\n labelKey=\"label\"\n placeholder=\"\"\n />\n \n
\n\n \n \n Tags \n {\n const tagsString = values.join(',');\n setSideBarFieldValue(\"tags\", tagsString);\n }}\n valueKey=\"value\"\n labelKey=\"label\"\n placeholder=\"\"\n />\n \n
\n\n \n \n Active status \n setSideBarFieldValue(\"archived\", value)}\n selected={sideBarFilters.archived || \"false\"}\n />\n \n
\n \n \n Sort Name \n setSideBarFieldValue(\"sort_by\", value)}\n selected={sideBarFilters.sort_by || \"last_name_asc\"}\n />\n \n
\n \n \n Apply filters\n \n
\n \n All filters}\n >\n \n \n \n \n
\n \n More actions}\n >\n \n \n \n \n \n \n \n View immunization details\n \n \n \n
\n \n );\n};\n\nexport default ActionIconsTableItem;","import React, { useState } from \"react\";\nimport { Button } from \"react-bootstrap\";\n\nimport MultipleMatchResolver from \"../../../CheckoutPage/components/MultipleMatchResolver\";\nimport StudentProfileCard from \"../../../Immunizations/components/widgets/StudentProfileCard\";\n\nconst ReviewModalButton = ({ props, testGroup }) => {\n const {\n id: testGroupUserId,\n required_immunizations_status: requiredImmunizationStatus,\n user,\n review_url: reviewUrl,\n } = props;\n const buttonVariant = 'outline-secondary';\n const buttonSize = 'sm';\n const [immunizationStatus, setImmunizationStatus] = useState(\n requiredImmunizationStatus\n );\n\n if (immunizationStatus === 'multiple_matches') {\n return (\n \n
\n );\n};\n\nexport default StudentProfilesTable;\n","import React, { useEffect, useRef, useState } from 'react';\nimport axios from 'axios';\nimport FilterSideBar from './FilterSideBar';\nimport SearchFilters from './SearchFilters';\nimport StudentProfilesTable from './StudentProfilesTable';\nimport FilterTabs from '../../../common/components/FilterTabs';\nimport PillMultiSelect from '../../../common/components/PillMultiSelect';\nimport { getInitialFilters, updateCustomMessageForm, updateExportLink } from '../../../CaseReports/components/CaseReportsV2';\n\nconst DEFAULT_STUDENT_FILTERS = {\n selected_tab: \"overview\",\n};\n\nconst StudentsTableV2 = ({\n filter_options,\n filter_tabs,\n filtered_test_group_user_ids,\n meta_data,\n test_group,\n test_group_users,\n}) => {\n\n const [testGroupUsers, setTestGroupUsers] = useState(test_group_users);\n const [filterTabs, setFilterTabs] = useState(filter_tabs);\n const [filters, setFilters] = useState(getInitialFilters(DEFAULT_STUDENT_FILTERS));\n const prevFiltersRef = useRef(filters);\n const prevStatusOptionsRef = useRef(filter_options.status_options);\n const [metaData, setMetaData] = useState(meta_data);\n const [showSideBar, setShowSideBar] = useState(false);\n const [showStats, setShowStats] = useState(false);\n const [statusOptions, setStatusOptions] = useState(filter_options.status_options);\n const [filteredTestGroupUserIds, setFilteredTestGroupUserIds] = useState(filtered_test_group_user_ids);\n\n const metaProps = {\n limit: filters.limit || metaData.per_page,\n nextPage: metaData.next_page,\n currentPage: filters.page || metaData.current_page,\n prevPage: metaData.prev_page,\n setLimit: (limit) => setFieldValue(\"limit\", limit),\n setPage: (page) => setFieldValue(\"page\", page),\n totalPages: metaData.total_pages,\n };\n\n const handleFetchTestGroupUsers = async () => {\n const response = await axios.get(`/api_v2/test_groups/${test_group.slug}/schools/student_profiles.json`,\n { params: filters }\n );\n\n if (response.status == 200) {\n setTestGroupUsers(response.data.test_group_users);\n setFilterTabs(response.data.filter_tabs);\n setMetaData(response.data.meta_data);\n setFilteredTestGroupUserIds(response.data.filtered_test_group_user_ids);\n setStatusOptions(response.data.filter_options.status_options);\n\n // Update URL without reloading the page\n const url = new URL(window.location);\n Object.keys(filters).forEach((key) => {\n url.searchParams.set(key, filters[key]);\n });\n window.history.pushState({}, \"\", url);\n\n // Update export links in erb files dynamically using the imported function\n updateExportLink(\"students\", \"export_students_link\", filters, test_group);\n } else {\n toastr.error(\"Something went wrong while filtering the student profiles\");\n }\n };\n\n const setFieldValue = (field, value) => {\n setFilters({ ...filters, [field]: value });\n };\n\n useEffect(() => {\n const filtersChanged = JSON.stringify(prevFiltersRef.current) !== JSON.stringify(filters);\n const statusOptionsChanged = JSON.stringify(prevStatusOptionsRef.current) !== JSON.stringify(statusOptions);\n\n if (filtersChanged || statusOptionsChanged) handleFetchTestGroupUsers();\n\n prevFiltersRef.current = { ...filters };\n prevStatusOptionsRef.current = [...statusOptions];\n }, [filters, statusOptions]);\n\n const handleTabClick = (value) => {\n if (value !== filters.selected_tab) {\n setFilters({\n ...filters,\n page: 1,\n pending_review: value === \"pending_review\",\n selected_tab: value,\n student_immunization_status: \"\",\n });\n }\n };\n\n useEffect(() => {\n updateCustomMessageForm(filters, filteredTestGroupUserIds);\n }, [testGroupUsers]);\n\n return (\n <>\n \n \n \n dispatch({\n type: 'updateForm',\n values: { registrationType: 'individual' },\n })\n }\n />\n \n \n dispatch({\n type: 'updateForm',\n values: { registrationType: 'family' },\n })\n }\n />\n \n
\n
\n );\n\n const careLocation = (\n \n {t('family_registrations.find_clinic')}\n
\n\n {t('family_registrations.what_kind_appointment')}\n
\n \n {t('family_registrations.select_family_or_individual')}\n
\n \n \n ({\n ...base,\n borderBottom: `1px solid #E2E7F0`,\n fontWeight: 500,\n }),\n }}\n onChange={(value) => {\n dispatch({\n type: 'updateForm',\n values: {\n radius: value,\n },\n });\n }}\n options={RADIUS_OPTIONS.map(option => ({\n label: t(option.label, { miles: option.value }),\n value: option.value,\n }))}\n value={state.formState.radius}\n />\n \n {\n dispatch({\n type: 'updateForm',\n values: {\n address: e.target.description || e.target.value,\n },\n });\n }}\n />\n \n
\n
\n );\n\n return (\n <>\n {individualOrFamily}\n {!!state.formState.registrationType && careLocation}\n {!!state.formState.registrationType && !!state.formState.address && (\n \n {t('family_registrations.where_care')}\n
\n \n \n !state.isTestEnvironment && setHackBoxHeight(\"\")}\n onMenuOpen={() => !state.isTestEnvironment && setHackBoxHeight(HACK_BOX_HEIGHT)}\n // weirdly breaks a spec on Github when not adding `!state.isTestEnvironment`\n // works as expected when testing on local or doing manual test\n serviceSpecifications={state.serviceSpecifications}\n selectedServiceSpecifications={state.selectedServiceSpecifications}\n />\n \n \n \n {t('family_registrations.vaccines_selected')}\n \n
\n )}\n \n {state.filteredServiceSpecifications.map(\n (serviceSpecification, idx) => (\n \n dispatch({\n type: 'updateServiceSpecifications',\n values: {\n [serviceSpecification.key]: false,\n },\n })\n }\n />\n \n ),\n )}\n
\n \n
\n\n {!isMobile() && (\n // hack to give extra space below dropdown when open\n )}\n\n
\n )}\n \n );\n};\n\nexport default IndividualOrFamily;\n","import React, { useState } from 'react';\nimport DatePicker from 'react-multi-date-picker';\nimport styled from 'styled-components';\nimport { Button, Col, FormControl, Modal, Row } from 'react-bootstrap';\nimport { Calendar } from 'react-multi-date-picker';\nimport { DateObject } from 'react-multi-date-picker';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircleUser, faCalendar } from '@fortawesome/pro-regular-svg-icons';\nimport { faSlidersUp } from '@fortawesome/pro-solid-svg-icons';\n\nimport EditServiceSpecifications from \"./EditServiceSpecifications\";\nimport AutocompleteLocation from '../../PrimaryDesignSystem/AutocompleteLocation';\nimport Select from '../../common/components/Select';\nimport ServiceSpecificationBadge from './ServiceSpecificationBadge';\nimport ServiceSpecificationSelector from './ServiceSpecificationSelector';\nimport {\n FamilyOrIndividualButton,\n RADIUS_OPTIONS,\n REGISTRATION_TYPE_OPTIONS,\n} from './IndividualOrFamily';\nimport { findClinicAsync } from '../helpers/requests';\nimport { isMobile } from '../../ImmunizationStatus/components/UploadRecords';\n\nconst FilterBarMobileContainer = styled.div`\n position: relative;\n\n .search_bar_wrapper {\n overflow-x: scroll;\n margin-bottom: 0.8rem;\n padding-bottom: 1.5rem;\n max-width: 100vw;\n\n .search_bar {\n display: flex;\n width: max-content;\n align-items: center;\n }\n\n .next-available {\n position: relative;\n min-width: 240px;\n }\n\n .filter-icon {\n margin-right: 0.5rem;\n font-size: x-large;\n position: sticky;\n top: 0;\n left: 0;\n z-index: 99;\n background-color: white;\n padding: 4px;\n }\n }\n`;\n\nconst EditClinicSearchParams = ({\n dispatch,\n state,\n t,\n}) => {\n const { address, radius, registrationType, startOn } = state.formState;\n const [hideCalendar, setHideCalendar] = useState(false);\n const [showCalendarPickerModal, setShowCalendarPickerModal] = useState(false);\n const [showSearch, setShowSearch] = useState(false);\n\n const handleClose = () => {\n setShowSearch(false);\n findClinicAsync(state, dispatch);\n }\n\n if (isMobile()) {\n return (\n <>\n \n {t(`family_registrations.select_vaccines_for_${state.formState.registrationType}`)}\n
\n \n dispatch({ type: 'perform_navigation', action: 'next' })}\n >\n {state.navigation.loading ? (\n
\n \n dispatch({ type: 'perform_navigation', action: 'next' })}\n >\n {state.navigation.loading ? (\n
\n \n
\n \n setShowSearch(true)}\n className='filter-icon'\n />\n \n {state.filteredServiceSpecifications.map(\n (serviceSpecification, idx) => (\n \n dispatch({\n type: 'updateServiceSpecifications',\n values: {\n [serviceSpecification.key]: false,\n },\n })\n }\n />\n \n ),\n )}\n
\n
\n \n {!hideCalendar && !startOn && (\n {\n setShowCalendarPickerModal(true);\n }}\n value={startOn ? new DateObject(startOn).format() : \"\"}\n />\n
\n {t('appointment_time')}
\n{t('family_registrations.appointment_type')}
\n{t('registration.location')}
\n{t('family_registrations.vaccines')}
\n\n \n {state.filteredServiceSpecifications.map(\n (serviceSpecification, idx) => (\n \n dispatch({\n type: 'updateServiceSpecifications',\n values: {\n [serviceSpecification.key]: false,\n },\n })\n }\n />\n \n ),\n )}\n
\n
\n \n {\n dispatch({\n type: 'updateForm',\n values: {\n address: e.target.value,\n },\n });\n if (!(event instanceof Event)) { // if location selected by click on dropdown, search immediately\n findClinicAsync(state, dispatch, { address: e.target.value });\n }\n }}\n onEnter={() => findClinicAsync(state, dispatch)}\n className=\"my-2\"\n />\n
\n \n \n {!hideCalendar && !startOn && (\n setHideCalendar(true)}\n shadow={false}\n value={startOn}\n disableYearPicker\n minDate={new Date()}\n format=\"MM/DD/YYYY\"\n containerStyle={{\n width: '100%',\n }}\n onChange={(objectDate) =>\n dispatch({ type: 'updateForm', values: { startOn: objectDate } })\n }\n onClose={() => {\n findClinicAsync(state, dispatch);\n setHideCalendar(false);\n }}\n />\n
\n \n \n \n {appointmentSlotDatesArray.map((dwc, idx) => {\n return (\n \n
\n
\n );\n};\n\nconst LocationCard = ({\n active,\n appointmentSlotGroup,\n dispatch,\n matchType,\n showAvailableServices,\n setSelectedAppointmentSlotGroup,\n state,\n t,\n}) => {\n const { selectedServiceSpecifications, serviceSpecifications } = state;\n const appointmentSlotsByDates = appointmentSlotGroup.appointment_slots_by_dates;\n const [cardClicked, setCardClicked] = useState(false);\n const matchedServices = selectedServiceSpecifications.\n filter(service =>\n !!appointmentSlotGroup.test_configurations.find(x => x.service_specification === service)\n ).\n map(service => serviceSpecifications.find(x => x.key === service).label);\n const availableServices = serviceSpecifications.filter(service =>\n appointmentSlotGroup.test_configurations.find(tc =>\n [tc.age_grouped_vaccine_service_specification, tc.service_specification].includes(service.key)\n )\n ).map(service => service.label);\n const missingServices = selectedServiceSpecifications.\n filter(service =>\n !appointmentSlotGroup.test_configurations.find(x => x.service_specification === service || x.age_grouped_vaccine_service_specification === service)\n ).\n map(service => serviceSpecifications.find(x => x.key === service).label);\n useEffect(() => {\n if (!active) setCardClicked(false);\n }, [active]);\n return (\n {t('family_registrations.next_available')}:
\n {dwc.date}
\n {dwc.count} appts
\n \n );\n })}\n \n \n setSelectedAppointmentSlotGroup(appointmentSlotGroup)\n }\n onMouseLeave={() =>\n !cardClicked && setSelectedAppointmentSlotGroup(null)\n }\n onClick={() =>\n setCardClicked(!cardClicked)\n }\n >\n
\n );\n};\n\nexport default LocationCard;\n","import React, { useState } from 'react';\nimport { Card, Col, Row, Spinner } from 'react-bootstrap';\n\nimport ClinicsMap, {\n selectedPinIcon,\n selectedPartialPinIcon,\n} from './ClinicsMap';\nimport EditClinicSearchParams from './EditClinicSearchParams';\nimport LocationCard from './LocationCard';\nimport { isMobile } from '../../ImmunizationStatus/components/UploadRecords';\n\nconst FindClinic = ({ state, dispatch, t }) => {\n const [mobileView, setMobileView] = useState('list'); // list or map\n const [selectedAppointmentSlotGroup, setSelectedAppointmentSlotGroup] = useState(null);\n const { appointmentSlotGroups } = state.formState;\n const exactMatchAppointmentSlotGroups = appointmentSlotGroups.filter(asg =>\n state.selectedServiceSpecifications.every(service =>\n !!asg.test_configurations.find(tc => tc.service_specification === service\n || tc.age_grouped_vaccine_service_specification === service)\n )\n );\n const partialMatchAppointmentSlotGroups = appointmentSlotGroups.filter(asg =>\n state.selectedServiceSpecifications.some(service =>\n !!asg.test_configurations.find(tc => tc.service_specification === service\n || tc.age_grouped_vaccine_service_specification === service)\n ) && !exactMatchAppointmentSlotGroups.includes(asg)\n );\n\n return (\n {appointmentSlotGroup.title}
\n\n
\n {matchType === \"partial\" && (\n \n
\n )}\n {showAvailableServices && !!availableServices.length && (\n {t('family_registrations.unavailable_vaccines')}
\n {missingServices.map(service =>\n \n \n
\n )}\n {!appointmentSlotGroup.test_location.on_demand && (\n {t('family_registrations.available_vaccines')}
\n {availableServices.map(service =>\n \n \n
\n \n \n \n \n {state.loading ? (\n \n {appointmentSlotGroups.length === 0 ? (\n \n
\n
\n );\n};\n\nexport default FindClinic;\n","import React, { useCallback, useEffect, useMemo } from 'react';\nimport { Card, Button, Col, Row } from 'react-bootstrap';\nimport { DateObject } from 'react-multi-date-picker';\nimport { faCircleUser, faTrashCan } from '@fortawesome/pro-regular-svg-icons';\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { forEach } from 'lodash';\nimport { Formik } from 'formik';\nimport AppointmentSlotGroupCard from './AppointmentSlotGroupCard';\nimport { dateStringToDate } from '../../common/utils';\nimport {\n DatePickerField,\n TextField,\n} from '../../common/components/Forms';\nimport { EditTestConfigurations } from './EditServiceSpecifications';\nimport { saveFamilyAndRedirectToRegistration } from '../helpers/requests';\n\nconst validate = (values) => {\n const errors = {};\n\n forEach(values.participants, (participant, index) => {\n const participantErrors = {};\n\n if (!participant.first_name) {\n participantErrors.first_name = 'Enter a valid first name';\n }\n\n if (!participant.last_name) {\n participantErrors.last_name = 'Enter a valid last name';\n }\n\n if (!participant.date_of_birth) {\n participantErrors.date_of_birth = 'Enter a valid date of birth';\n }\n\n if (Object.keys(participantErrors).length > 0) {\n errors.participants = errors.participants || [];\n errors.participants[index] = participantErrors;\n }\n });\n\n return errors;\n};\n\nconst AddFamilyMembers = ({ state, dispatch, t }) => {\n const defaultParticipantForm = {\n first_name: '',\n last_name: '',\n date_of_birth: '',\n test_configuration_ids: [],\n };\n\n const selectedAppointmentSlotsById = state.formState.selectedAppointmentSlotsById;\n\n useEffect(() => {\n dispatch({\n type: 'updateForm',\n values: { participants: [defaultParticipantForm] },\n });\n }, []);\n\n useEffect(() => {\n saveFamilyAndRedirectToRegistration(state, dispatch)\n }, [selectedAppointmentSlotsById]);\n\n const handleAddFields = (values, setValues) =>\n setValues({\n participants: [...values.participants, defaultParticipantForm],\n });\n\n const handleRemoveFields = (index, values, setValues) => {\n const newValues = [...values.participants];\n newValues.splice(index, 1);\n setValues({ participants: newValues });\n };\n\n const onSubmit = (values) => {\n const appointmentSlotGroup = state.formState.appointmentSlotGroup;\n if(appointmentSlotGroup.test_location.on_demand == true) {\n const appointmentSlotId = Object.values(appointmentSlotGroup.appointment_slots_by_dates).flatMap(asbd => asbd[\"appointment_slots\"])[0].id;\n const qty = values.participants.length;\n const formValues = {participants: values.participants, selectedAppointmentSlotsById: {[appointmentSlotId]: qty}}\n\n dispatch({ type: 'updateForm', values: formValues });\n } else {\n dispatch({ type: 'updateForm', values });\n dispatch({ type: 'perform_navigation', action: 'next' });\n }\n };\n\n const testConfigurationOptions = useMemo(() => state.formState.appointmentSlotGroup.test_configurations.\n map(testConfiguration => ({\n key: testConfiguration.id,\n label: testConfiguration.display_name,\n calculateAgeInDays: testConfiguration.calculate_age_gating_in_days,\n minimumAgeInMonths: testConfiguration.minimum_age_in_months,\n maximumAgeInMonths: testConfiguration.maximum_age_in_months,\n minimumAgeInWeeks: testConfiguration.minimum_age_in_weeks,\n maximumAgeInWeeks: testConfiguration.maximum_age_in_weeks,\n minimumAgeInDays: testConfiguration.minimum_age_in_days,\n maximumAgeInDays: testConfiguration.maximum_age_in_days,\n })\n ),[]);\n\n const isFamilyRegistration = state.formState.registrationType === \"family\";\n\n return (\n \n {t('family_registrations.find_clinic')}\n
\n\n \n setMobileView(mobileView === 'list' ? 'map' : 'list')\n }\n src={`/images/icons/icon-list-map-switch-${mobileView}.svg`}\n />\n
\n )}\n {t('otc.results')}
\n \n {!isMobile() &&
\n )}\n {exactMatchAppointmentSlotGroups.length > 0 && (\n {t('otc.results')}
}\n{t('family_registrations.no_matches')}
\n\n {exactMatchAppointmentSlotGroups.map((asg, idx) => {\n return (\n
\n )}\n {partialMatchAppointmentSlotGroups.length > 0 && (\n \n {exactMatchAppointmentSlotGroups.length > 0 && (\n
\n )}\n
\n )}\n \n )}\n \n \n )}\n
\n
\n \n {t('family_registrations.partial_results')}\n
\n\n {t('family_registrations.partial_matches')}\n
\n {partialMatchAppointmentSlotGroups.map((asg, idx) => {\n return (\n\n
\n \n ) : (\n <>\n {isMobile() && mobileView === 'map' && (\n \n {t('family_registrations.no_clinics_found')}\n
\n{t('family_registrations.broaden_filters')}
\n{t('family_registrations.select_pin')}
\n )}\n \n {t('family_registrations.select_services')}\n
\n{t('family_registrations.add_family')}
\n }\n \n \n
\n );\n};\n\nexport default FamilyRegistration;\n","import FamilyRegistraion from './components/FamilyRegistration';\n\nexport default FamilyRegistraion;\n","import React, { FC, forwardRef, useMemo, useState } from 'react';\nimport { Table as BsTable } from 'react-bootstrap';\nimport Header, { HeaderProps } from './Header';\nimport Cell from './Cell';\nimport { TableProps } from './Table';\n\ninterface CheckboxProps extends React.HTMLProps\n {user.fullName}\n \n {user.dateOfBirth} ({user.age})\n \n
\n);\n\nconst StatusCell: FC\n \n {statusString}\n
\n \n );\n};\n\nconst OrderDetailsCell: FC\n \n \n {displayName}\n \n \n \n results.length > 1\n ? `${r.label}: ${r.labelledValue || r.value || ''}`\n : r.labelledValue || r.value || '',\n )\n .join('\\n'),\n }}\n >\n \n {Object.keys(caseManagerResult).map((result) => {\n const count = caseManagerResult[result];\n const _result = result == \"did_not_result\" ? \"invalid\" : result;\n const resultString = `${count} ${_result} result${count > 1 ? \"s\" : \"\"}`;\n return (\n
\n );\n};\n\nconst ResultedAtCell: FC\n {resultString}\n
\n );\n })}\n \n \n \n {localizedResultsAtDate}\n {localizedResultsAtTime}\n
\n);\n\nconst LastAttemptCell: FC\n {lastAttempt?.date}\n {lastAttempt?.time}\n
\n);\n\nconst AttemptedByCell: FC\n {showErrorMessage ? (\n \n There was an error loading the results. Please try again later.\n \n ) : (\n \n {testsCount !== undefined\n ? `${formatNumberWithCommas(testsCount)} results`\n : 'Loading results count...'}\n \n )}\n {selectedTests.length > 0 && (\n
\n);\n\nexport default TopBar;\n","import { faXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { FC } from 'react';\nimport styled from 'styled-components';\n\nexport interface FilterChipProps {\n label: string;\n onRemove?: () => void;\n}\n\nconst FilterChipContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 32px;\n padding-inline: 24px;\n gap: 15px;\n\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px;\n\n border-radius: 40px;\n background: var(--text-elements-background-medium, #f7f7f7);\n`;\n\nconst FilterChip: FC\n {displayFilters.map((filter, idx) => (\n \n Clear filters\n \n )}\n
\n);\n\nconst FilterArea: FC\n
\n);\n\ninterface ExpandedFilterProps {\n label: string;\n children: React.ReactNode;\n displayFilters?: DisplayFilter[];\n}\n\nexport const ExpandedFilter: FC\n \n {label}\n {filteredDisplayFilters.length > 0 &&\n ` (${filteredDisplayFilters.length})`}\n \n {children}\n {filteredDisplayFilters && filteredDisplayFilters.length > 0 && (\n
\n );\n};\n\nexport default FilterArea;\n","import React, { FC } from 'react';\nimport { FilterValue, ValueType } from './hooks/useFilters';\n\nimport Select, { CheckboxOption } from '../../../common/components/Select';\n\nexport interface DropdownOption {\n value: number | string;\n label: string;\n}\n\ninterface FilterDropdownProps {\n id?: string;\n name?: string;\n label?: string;\n isMulti?: boolean;\n value?: ValueType;\n onChange?: (value: FilterValue) => void;\n options: DropdownOption[];\n}\n\nconst FilterDropdown: FC\n
\n )}\n \n {label && (\n \n )}\n onChange && onChange(e.target.value)}\n >\n \n {options.map((option, idx) => (\n \n ))}\n \n
\n );\n};\n\nexport default FilterDropdown;\n","import { faMagnifyingGlass } from '@fortawesome/pro-regular-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { FC } from 'react';\nimport { Button } from 'react-bootstrap';\n\ninterface SearchButtonProps extends React.HTMLAttributes\n onChange(e.target.value)}\n placeholder=\"Search by name or barcode\"\n id=\"search_q\"\n />\n
\n )}\n \n \n \n onChange(e.target.value)}\n id=\"search_q\"\n />\n
\n \n \n {!state.errored && (\n \n {skipInitialLoad && (\n
\n\n {!skipPagination && state.tests.length > 0 && (\n \n
\n \n
\n \n Please apply filters to see results.\n
\n )}\n \n {tests.map((test: Test) => (\n
\n ))}\n \n );\n\n const assignableUser = (userId: number) => {\n return assignableUsers.find((user) => user.id === userId);\n };\n\n const modalLabel = () => {\n if (newMultiAssignment || selectedUsers.length > 1) {\n return 'Multiple';\n } else if (selectedUsers.length === 1) {\n return assignableUser(selectedUsers[0])?.fullName;\n }\n };\n\n return (\n \n \n {\n if (!test.assignedUser) {\n assignTest(appointment, test, user.id, setTests);\n } else if (test.assignedUser.id === user.id) {\n unassignTest(appointment, test, setTests);\n }\n }}\n >\n {test.testConfiguration?.displayName}\n
\n \n \n \n {!withAssigneeDropdown || modalLabel() ? (\n \n \n \n Multiple Assignments\n \n \n \n Clinicians:\n \n \n \n \n \n \n
\n );\n};\n\nexport default MultiAssignmentModal;\n","import React, { FC, useEffect, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faArrowUpRightFromSquare } from '@fortawesome/pro-regular-svg-icons';\n\nimport SelectableTable from '../../common/components/Table/components/SelectableTable';\nimport {\n AssignableUser,\n Test,\n Appointment,\n fetchAppointmentTests,\n} from './Index';\nimport TooltipWrapper from '../../common/components/TooltipWrapper';\nimport Wrapped from '../../common/components/Wrapped';\nimport MultiAssignmentModal from './MultiAssignmentModal';\nimport { humanize } from '../../common/utils';\n\nconst ParticipantCell: FC setShow(true)}>\n {withAssigneeDropdown ? (\n modalLabel()\n ) : (\n
\n ) : (\n \n
\n )}\n Manage assignment(s)
\n\n \n
\n \n {' '}\n Assign clinicians to specific results{' '}\n
\n\n {assignableUser(userId)?.fullName}\n handleRemoveUser(userId)}\n className=\"ms-2\"\n >\n x\n \n
\n ))}\n \n {user.fullName}\n \n {user.dateOfBirth} ({user.age})\n \n
\n);\n\nconst StatusCellSection = ({ caseReportStatus }) => {\n return (\n \n {caseReportStatuses.length > 0 ? (\n \n \n ) : (\n \n \n )}\n
\n );\n};\n\nconst AppointmentDateCell: FC\n
\n \n {'New'}\n
\n \n {localizedStartsAtDate}\n {localizedStartsAtTime}\n
\n);\n\ninterface ResultCellProps {\n appointment: Appointment;\n caseReportType: string;\n}\n\nconst ResultCell: FC\n \n \n
\n );\n};\n\nconst TestConfigurationCell: FC\n
\n \n \n \n {resultLabel}\n
\n \n
\n );\n};\n\nconst LastAttemptCell: FC\n \n \n {testConfigurations &&\n testConfigurations\n .map((testConfiguration) => testConfiguration.displayName)\n .join('\\n')}\n \n \n
\n \n {(() => {\n if (lastAttempts.length === 1) {\n return (\n \n {lastAttempts[0].date}\n \n );\n } else if (lastAttempts.length > 1) {\n return Multiple;\n } else {\n return null; // Handle the case where lastAttempts is empty\n }\n })()}\n
\n);\n\nconst TimeZoneCell: FC\n {lastAttempts[0].adminFullName}\n
\n \n {showErrorMessage ? (\n \n There was an error loading the results. Please try again later.\n \n ) : (\n \n {appointmentsCount !== undefined\n ? `${formatNumberWithCommas(appointmentsCount)} results`\n : 'Loading results count...'}\n \n )}\n {selectedAppointments.length > 0 && (\n
\n);\n\nexport default TopBar;\n","import React, { FC, useMemo, useState } from 'react';\nimport { Button, FormControl, InputGroup } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { faArrowRight, faSearch } from '@fortawesome/pro-regular-svg-icons';\nimport DatePicker, { DateObject } from 'react-multi-date-picker';\n\nimport { weekDays } from '../../common/components/MultiDatePickerField';\nimport FilterArea, {\n ExpandedFilter,\n} from '../../common/components/SearchFilters/FilterArea';\nimport FilterDropdown from '../../common/components/SearchFilters/FilterDropdown';\nimport SearchButton from '../../common/components/SearchFilters/SearchButton';\nimport EvenlySpacedRow, {\n AutoCol,\n Col,\n} from '../../common/components/Layout/EvenlySpacedRow';\nimport SideBar, {\n Body,\n Footer,\n} from '../../common/components/SearchFilters/SideBar';\nimport DateRangeField from '../../common/components/DateRangeField';\nimport { FilterOptions } from './Index';\nimport useFilters, {\n FilterOption,\n FilterMap,\n SetFilter,\n GetDisplayFilters,\n RemoveFilter,\n} from '../../common/components/SearchFilters/hooks/useFilters';\nimport FilterValueProvider from '../../common/components/SearchFilters/FilterValueProvider';\nimport {\n dropdownValueLabel,\n valueAsLabel,\n} from '../../common/components/SearchFilters/helpers/utils';\n\ninterface FilterUpdater {\n filters: FilterMap;\n setFilter: SetFilter;\n removeFilter: RemoveFilter;\n}\n\nconst searchFilterOption = {\n paramKey: 'q',\n paramLabel: 'Search',\n multiValue: false,\n};\n\nconst assigneeFilterOption = {\n paramKey: 'assignee_id',\n paramLabel: 'Assignment',\n multiValue: true,\n numericValue: true,\n};\n\nconst organizationFilterOption = {\n paramKey: 'organization_id',\n paramLabel: 'Organization',\n multiValue: true,\n numericValue: true,\n};\n\nconst statusFilterOption = {\n paramKey: 'status',\n paramLabel: 'Status',\n multiValue: true,\n};\n\nconst attemptsFilterOption = {\n paramKey: 'attempts',\n paramLabel: 'Attempts',\n};\n\nconst serviceFilterOption = {\n paramKey: 'test_configuration_id',\n paramLabel: 'Service',\n multiValue: true,\n numericValue: true,\n};\n\nconst caseManagerResultFilterOption = {\n paramKey: 'case_manager_result',\n paramLabel: 'Result',\n multiValue: true,\n};\n\nconst startDayFilterOption = {\n paramKey: 'start_day',\n paramLabel: 'Start day',\n hide: true,\n};\n\nconst endDayFilterOption = {\n paramKey: 'end_day',\n paramLabel: 'End day',\n hide: true,\n};\n\nconst lastAttemptFilterOption = {\n paramKey: 'last_attempt',\n paramLabel: 'Last attempt',\n};\n\nconst timeZoneFilterOption = {\n paramKey: 'time_zone',\n paramLabel: 'Time zone',\n multiValue: false,\n};\n\nconst requisitioningPhysicianFilterOption = {\n paramKey: 'requisitioning_physician_id',\n paramLabel: 'Requisitioning physician',\n multiValue: true,\n numericValue: true,\n};\n\nconst MainFilters: FC<\n FilterOptions &\n FilterUpdater & {\n searchPath: string;\n }\n> = ({\n caseManagerResults,\n filters,\n setFilter,\n searchPath,\n statuses,\n assignees,\n organizations,\n testConfigurations,\n}) => (\n \n onChange(e.target.value)}\n id=\"search_q\"\n />\n
\n \n \n
\n \n {hasCaseReportTypeTabs && (\n \n {!state.errored && (\n \n {skipInitialLoad && (\n
\n\n {!skipPagination && state.appointments.length > 0 && (\n \n {\n dispatch({ type: 'SET_CASE_REPORT_TYPE', caseReportType });\n }}\n />\n
\n )}\n \n
\n \n
\n \n Please apply filters to see results.\n
\n )}\n \n \n \n \n
\n );\n};\n\nexport default CodeVerify;\n","import React, { useState } from \"react\";\nimport axios from \"axios\";\nimport { Button, Modal } from \"react-bootstrap\";\n\nimport ModalHeader from \"../../common/components/ModalHeader\";\n\nconst CancelScheduledMessageModal = ({\n communication,\n communications,\n onHide,\n setCommunications,\n show,\n}) => {\n\n const [loading, setLoading] = useState(false);\n const [showConfirmationMessage, setShowConfirmationMessage] = useState(false);\n\n const cancelRepeatingCommunication = async () => {\n setLoading(true);\n try {\n const response = await axios.put(`/messages/${communication.id}`, {\n communication: { repeating: false }\n });\n const newCommunications = [...communications];\n const communicationIndex = newCommunications.findIndex(communication => communication.id == response.data.communication.id);\n newCommunications[communicationIndex].repeating = false\n setCommunications(newCommunications);\n toastr.success(`Scheduled message successfully cancelled`);\n } catch(e) {\n toastr.error(\"Something went wrong\")\n }\n setLoading(false);\n onHide();\n };\n\n return (\n \n
\n {isInvalidCode && (\n {t('enter_code.incorrect_code')}
\n )}\n Confirm cancellation
\nAre you sure you want to cancel this scheduled message?
\n ) : (\nCancel recurring message?
\n )}\nDelivery errors
\n{subject}
\n\n {loading ? (\n
\n
\n ) : (\n failedCommunicationTasks.map(t => {\n return (\n <>\n {t.recipient_phone}
\n {t.recipient_email}
\n \n Failed
\n {t.failed_at}
\n \n {t.log_line}
\n \n \n \n )\n })\n )}\n \n
Are you sure you want to delete this message template?
\nDeleting this message template will permanently remove it from your collection. Please confirm your action below.
\n\n {!!state.template_id && (\n <>\n setDeleteCustomMessageTemplateModalOpen(true)}\n variant=\"link\"\n >\n
\n \n );\n};\n\nconst MessageTemplateForm = (props) => {\n return (\n \n
\n );\n};\n\nexport default MessageTemplateForm;","import React from \"react\";\n\nimport FilterChip from \"../../common/components/SearchFilters/FilterChip\";\nimport Select, { CheckboxOption } from \"../../common/components/Select\";\n\nconst MessageFilter = ({\n dispatch,\n filterName,\n isDisabled,\n isMulti = false,\n options,\n placeHolder,\n selectedOptions,\n type,\n ...props\n}) => {\n return (\n \n {\n dispatch({\n type: type,\n values: values,\n })\n }}\n options={options}\n placeholder={placeHolder}\n styles={{\n placeholder: (styles) => ({\n ...styles,\n color: \"#A0ABC0\",\n }),\n }}\n value={selectedOptions}\n verticallyCenterCheckBox={true}\n {...props}\n />\n {isMulti && !!selectedOptions?.length && (\n
\n );\n};\n\nexport default MessageFilter;","import { createContext } from \"react\";\n\n// Export an empty context\nexport default createContext({});","import React, { useContext, useEffect, useState } from \"react\";\nimport axios from \"axios\";\nimport { Col, Row, Spinner } from \"react-bootstrap\";\n\nimport NewCommunicationContext from \"../contexts/NewMessageContext\";\nimport TablePagination from \"../../common/components/TablePagination\";\n\nconst RecipientRow = ({\n user,\n}) => {\n return (\n \n {filterName}\n
\n\n {selectedOptions.map((selectedOption) => {\n const label = options.find((availableOption) => availableOption.value === selectedOption)?.label;\n return (\n {\n dispatch({\n type: type,\n values: selectedOptions.filter(o => o !== selectedOption),\n })\n }\n }\n />\n )\n })}\n
\n )}\n {user.full_name}
\n {user.date_of_birth} ({user.age})
\n \n {user.phone_number}
\n {user.email}
\n \n \n \n
\n
\n {loading ? (\n
\n )}\n \n )\n })}\n \n )}\n
\n );\n};\n\nexport default RecipientsTable;\n","import React, { useContext } from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport DatePicker from \"react-multi-date-picker\";\n\nimport MessageFilter from \"./MessageFilter\";\nimport NewMessageContext from \"../contexts/NewMessageContext\";\nimport RecipientsTable from \"./RecipientsTable\";\n\nconst NewMessageAddRecipients = ({}) => {\n\n const {\n dispatch,\n state,\n } = useContext(NewMessageContext);\n\n return (\n \n {loading ? (\n
\n
\n ) : (\n <>\n {state.paginated_recipients.map((user, idx) => {\n return (\n <>\n \n )}\n \n )\n })}\n \n )}\n
\n
\n \n
\n\n Add recipients
\nDefine the audience of your message
\n{state.recipient_count} people will receive a message based on your filters
\n\n \n dispatch({\n type: 'setAdministeredAtDate',\n values: objectDate,\n })\n }\n placeholder=\"Select a date\"\n range\n shadow={false}\n value={state.filter_params.administered_at_date}\n />\n
\n\n \n Case report date\n
\n\n \n dispatch({\n type: 'setAppointmentDate',\n values: objectDate,\n })\n }\n placeholder=\"Select a date\"\n range\n shadow={false}\n value={state.filter_params.appointment_date}\n />\n
\n \n \n Appointment date\n
\n\n
\n );\n};\n\nexport const PreviewLanguageSelector = ({\n dispatch,\n languageOptions,\n messageLanguages,\n selectedLanguage,\n}) => {\n const _messageLanguages = [...messageLanguages];\n if (!!_messageLanguages.length && !_messageLanguages.includes(\"en\")) _messageLanguages.unshift(\"en\");\n if (!_messageLanguages.length) return ;\n return (\n \n {!!sectionTitle && (\n <>\n
\n {sectionTitle}
\nEmail preview
\n \n
\n Text message preview
\n \n {_messageLanguages.map((languageKey) => {\n const languageLabel = languageOptions?.find(o => o.value == languageKey)?.label;\n return (\n dispatch({\n type: \"setSelectedLanguage\",\n values: languageKey == \"en\" ? null : languageKey\n })}\n size=\"sm\"\n variant={\n (selectedLanguage == languageKey ||\n (!selectedLanguage && languageKey == \"en\")\n ) ? \"primary\"\n : \"outline-primary\"\n }\n >\n {languageLabel}\n \n )\n })}\n
\n );\n};\n\nconst PersonalizeMessage = ({\n field,\n insertVariable,\n type,\n}) => {\n return (\n \n
\n );\n};\n\nconst PreviewField = ({\n helperText,\n minHeight,\n text,\n}) => {\n return (\n \n Personalize your {field} with dynamic fields\n
\n \n {VARIABLES.map((v) => {\n return (\n insertVariable(v.value, field, type)}\n style={{ border: \"1px solid #DEE2E6\", borderRadius: \"30px\" }}\n >\n {v.label}\n \n )\n })}\n
\n \n {\n dispatch({\n type: \"setTemplateName\",\n values: e.target.value,\n })\n }}\n autoComplete=\"off\"\n required\n />\n
\n ) : (\n Template details
\n\n
\n )}\n\n Customize your message
\n\n {\n dispatch({\n type: \"setEmailSubject\",\n values: e.target.value,\n })\n }}\n autoComplete=\"off\"\n required\n />\n {\n dispatch({\n type: \"setEmailMessage\",\n values: e.target.value,\n })\n }}\n placeholder=\"Enter your email content here!\"\n ref={emailMessageRef}\n rows={6}\n value={state.message_settings[languageKey(\"email_message\", state.selected_language)]}\n />\n
\n\n \n EMAIL CONTENT\n
\n \n Email message*\n
\n\n {\n dispatch({\n type: \"setSmsMessage\",\n values: e.target.value,\n })\n }}\n placeholder=\"Enter your sms content here!\"\n ref={smsMessageRef}\n rows={4}\n value={state.message_settings[languageKey(\"sms_message\", state.selected_language)]}\n />\n
\n \n \n TEXT MESSAGE CONTENT\n
\n \n Text message\n
\nConfirm message
\n\n You are about to {deliverNow ? \"send\" : \"schedule\"} a message to {recipientCount} recipient{recipientCount > 1 ? \"s\" : \"\"}.\n
\n \n By continuing you confirm that you reviewed the message settings. \n
\n \n
\n )\n return { value: t.id, label: label };\n });\n };\n\n const handleTemplateSelect = (selectedTemplateId) => {\n const template = customMessageTemplates.find(t => t.id == selectedTemplateId);\n dispatch({ type: \"setCustomTemplateValues\", values: template.params })\n };\n\n const sendMessage = async () => {\n const endDate = state.message_settings.end_date\n ? format(state.message_settings.end_date, 'yyyy-MM-dd')\n : null;\n const languages = state.message_settings.languages.includes(\"en\")\n ? state.message_settings.languages\n : [...state.message_settings.languages, \"en\"]\n const translationParams = getTranslationParams(state.message_settings);\n const startDate = state.message_settings.date\n ? format(state.message_settings.date, 'yyyy-MM-dd')\n : null;\n\n const params = {\n communication: {\n end_date: deliverNow\n ? null\n : endDate,\n organization_id: state.message_settings.organization_id,\n params: {\n email_message: state.message_settings.email_message,\n email_subject: state.message_settings.email_subject,\n filter_params: state.filter_params,\n languages: languages,\n sms_message: state.message_settings.sms_message,\n selected_test_group_user_ids: state.all_filtered_test_group_user_ids,\n ...translationParams,\n },\n repeating: deliverNow\n ? null\n : state.message_settings.repeating,\n start_date: deliverNow\n ? null\n : startDate,\n start_hour: deliverNow\n ? null\n : getHour(state.message_settings.time),\n start_minute: deliverNow\n ? null\n : getMinutes(state.message_settings.time),\n time_zone: deliverNow\n ? null\n : state.message_settings.time_zone,\n total_runs: deliverNow\n ? null\n : state.message_settings.total_runs,\n }\n }\n try {\n await axios.post(\"/messages\", params );\n toastr.success(\"Message successfully scheduled\");\n window.location.href = `/messages?messages=${deliverNow ? \"sent\" : \"scheduled\"}`;\n } catch(e) {\n toastr.error(\"Something went wrong\");\n }\n };\n\n const stepForward = () => {\n currentStep == 2\n ? sendMessage()\n : setCurrentStep(currentStep + 1)\n };\n\n const forwardButtonDisabled = () => {\n if (currentStep == 0) {\n if (!state.filter_params.organizations.length ||\n !state.all_filtered_test_group_user_ids.length\n ) return true;\n }\n if (currentStep == 1) {\n if (!state.message_settings.email_message ||\n !state.message_settings.email_subject ||\n !state.message_settings.organization_id\n ) {\n return true;\n }\n }\n if (currentStep == 2) {\n if ((!state.message_settings.date ||\n !state.message_settings.time ||\n !state.message_settings.time_zone\n ) && !state.deliver_now) {\n return true;\n }\n if (!!state.message_settings.repeating &&\n (!state.message_settings.end_date && !state.message_settings.total_runs)\n ) {\n return true;\n }\n }\n return false;\n };\n\n const stepper = (\n {t.name}
\n {t.params.email_subject}
\n \n {STEPS.map((stepName, idx) => {\n const stepInPast = idx < currentStep;\n const stepInFuture = idx > currentStep;\n const icon = stepInPast\n ? \"a-sharp fa-solid fa-circle-check\"\n : \"fa-sharp fa-regular fa-circle-check\";\n\n return (\n
\n );\n\n const stepperButtons = (\n \n
\n )\n })}\n \n {currentStep > 0 && (\n setCurrentStep(currentStep - 1)}\n variant=\"link\"\n >\n Back\n \n )}\n {currentStep == 1 && (\n setShowMessageConfirmationModal(false)}\n recipientCount={state.recipient_count}\n show={showMessageConfirmationModal}\n />\n {\n finalStep\n ? setShowMessageConfirmationModal(true)\n : stepForward()\n }}\n >\n {finalStep\n ? `${deliverNow ? \"Send message\" : \"Schedule message\"}`\n : \"Continue\"\n }\n \n \n
\n );\n\n return (\n \n
\n )}\n <>\n \n {stepper}\n
\n \n {stepperButtons}\n
\n \n );\n};\n\nexport default NewMessageHeader;","import React, { useEffect, useReducer, useState } from \"react\";\n\nimport {\n getTranslationParams,\n languagesFromCustomMessageTemplateParams,\n} from \"./MessageTemplateForm\";\nimport NewMessageAddRecipients from \"./NewMessageAddRecipients\";\nimport NewMessageContext from \"../contexts/NewMessageContext\";\nimport NewMessageCustomizeMessage from \"./NewMessageCustomizeMessage\";\nimport NewMessageHeader from \"./NewMessageHeader\";\nimport NewMessageScheduleDelivery from \"./NewMessageScheduleDelivery\";\nimport { PARAM_KEYS } from \"./MessageTemplateForm\";\nimport { TemplateFormHeader } from \"./MessageTemplateForm\";\n\nconst DYNAMICALLY_ADJUSTABLE_PARAMS = [\n {\n action: \"setLocations\",\n options_key: \"location_filter_options\",\n param_key: \"locations\",\n },\n {\n action: \"setPopulations\",\n options_key: \"population_filter_options\",\n param_key: \"populations\",\n },\n {\n \n action: \"setTags\",\n options_key: \"tag_filter_options\",\n param_key: \"tags\",\n },\n {\n action: \"setTestGroups\",\n options_key: \"test_group_filter_options\",\n param_key: \"test_groups\",\n },\n];\n\nexport const languageKey = (type, language) => {\n return !!language ? `${type}_${language}` : type;\n};\n\nconst NewMessage = ({\n current_user,\n custom_message_template,\n displayingMessageTemplateForm = false,\n filter_options,\n message_options,\n}) => {\n\n const reducer = (state, action) => {\n switch (action.type) {\n case \"setCustomTemplateValues\":\n // setting new available languages\n const newLanguages = languagesFromCustomMessageTemplateParams(action.values);\n // removing current translation params and replacing with new translation params\n const keysToRemove = Object.keys(getTranslationParams(state.message_settings));\n keysToRemove.forEach(key => delete state[\"message_settings\"][key])\n return {\n ...state,\n selected_language: null,\n message_settings: {\n ...state.message_settings,\n ...action.values,\n languages: newLanguages\n }\n };\n case \"setDate\":\n return { ...state, message_settings: { ...state.message_settings, date: action.values } };\n case \"setEmailMessage\":\n state[\"message_settings\"][languageKey(\"email_message\", state.selected_language)] = action.values;\n return { ...state };\n case \"setEmailSubject\":\n state[\"message_settings\"][languageKey(\"email_subject\", state.selected_language)] = action.values;\n return { ...state };\n case \"setEndDate\":\n return { ...state, message_settings: { ...state.message_settings, total_runs: null, end_date: action.values } };\n case \"setLanguages\":\n const newLanguage = action.values.find(l => !state.message_settings.languages.includes(l));\n const newLanguageParams = {};\n if (!!newLanguage) {\n PARAM_KEYS.forEach((paramKey) => {\n newLanguageParams[languageKey(paramKey, newLanguage)] = \"\";\n })\n }\n return { ...state, message_settings: { ...state.message_settings, languages: action.values, ...newLanguageParams } };\n case \"setOrganizationId\":\n const senderOrganizationName = filter_options.organization_filter_options\n .find(o => o.value == action.values)?.label;\n return { ...state, sender_organization_name: senderOrganizationName, message_settings: { ...state.message_settings, organization_id: action.values } };\n case \"setRepeating\":\n return { ...state, message_settings: { ...state.message_settings, repeating: action.values } };\n case \"setSmsMessage\":\n state[\"message_settings\"][languageKey(\"sms_message\", state.selected_language)] = action.values;\n return { ...state };\n case \"setTime\":\n return { ...state, message_settings: { ...state.message_settings, time: action.values } };\n case \"setTimeZone\":\n return { ...state, message_settings: { ...state.message_settings, time_zone: action.values } };\n case \"setTotalRuns\":\n return { ...state, message_settings: { ...state.message_settings, end_date: null, total_runs: action.values } };\n case \"setAdministeredAtDate\":\n return { ...state, filter_params: { ...state.filter_params, administered_at_date: action.values } };\n case \"setAppointmentDate\":\n return { ...state, filter_params: { ...state.filter_params, appointment_date: action.values } };\n case \"setAppointmentStatus\":\n return { ...state, filter_params: { ...state.filter_params, appointment_status: action.values } };\n case \"setCaseReportStatus\":\n return { ...state, filter_params: { ...state.filter_params, case_report_status: action.values } };\n case \"setConsentedTo\":\n return { ...state, filter_params: { ...state.filter_params, consented_to: action.values } };\n case \"setLocations\":\n return { ...state, filter_params: { ...state.filter_params, locations: action.values } };\n case \"setOrganizations\":\n const newOrganizationId = action.values.length == 1 ? action.values[0] : null; // when filtering only one org, we set it as the sender org\n return { ...state,\n filter_params: { ...state.filter_params, organizations: action.values },\n message_settings: { ...state.message_settings, organization_id: newOrganizationId }\n };\n case \"setPopulations\":\n return { ...state, filter_params: { ...state.filter_params, populations: action.values } };\n case \"setTags\":\n return { ...state, filter_params: { ...state.filter_params, tags: action.values } };\n case \"setTestGroups\":\n return { ...state, filter_params: { ...state.filter_params, test_groups: action.values } };\n case \"setAllFilteredTestGroupUserIds\":\n return { ...state, all_filtered_test_group_user_ids: action.values };\n case \"setDeliverNow\":\n return { ...state, deliver_now: action.values };\n case \"setFilterOptions\":\n return { ...state, filter_options: { ...action.values,\n organization_filter_options: state.filter_options.organization_filter_options } // organization options should not change\n };\n case \"setRecipientCount\":\n return { ...state, recipient_count: action.values };\n case \"setPaginatedRecipients\":\n return { ...state, paginated_recipients: action.values };\n case \"setSelectedLanguage\":\n return { ...state, selected_language: action.values };\n case \"setTemplateName\":\n return { ...state, template_name: action.values };\n case \"setTemplateOrganization\":\n return { ...state, template_organization_id: action.values };\n default:\n throw new Error(\"Unknown action.\");\n }\n };\n\n const initialLanguages = !!custom_message_template\n ? languagesFromCustomMessageTemplateParams(custom_message_template?.params)\n : [];\n const initialOrganizationId = filter_options.organization_filter_options.length === 1\n ? filter_options.organization_filter_options[0]?.value\n : null;\n const initialSenderOrganizationName = initialOrganizationId\n ? filter_options.organization_filter_options.find(o => o.value == initialOrganizationId)?.label\n : null;\n const initialTestGroupId = filter_options.test_group_filter_options.length === 1\n ? filter_options.test_group_filter_options[0]?.value\n : null;\n\n const [state, dispatch] = useReducer(reducer, {\n filter_params: {\n appointment_date: null,\n appointment_status: null,\n case_report_status: null,\n consented_to: null,\n administered_at_date: null,\n locations: [],\n organizations: !!initialOrganizationId\n ? [initialOrganizationId]\n : [],\n populations: [],\n tags: [],\n test_groups: !!initialTestGroupId\n ? [initialTestGroupId]\n : [],\n },\n message_settings: {\n date: new Date(),\n email_message: \"\",\n email_subject: \"\",\n end_date: null,\n languages: initialLanguages,\n organization_id: initialOrganizationId,\n repeating: null,\n sms_message: \"\",\n time: null,\n time_zone: null,\n total_runs: null,\n ...custom_message_template?.params,\n },\n all_filtered_test_group_user_ids: [],\n deliver_now: null,\n filter_options: filter_options,\n paginated_recipients: [],\n recipient_count: 0,\n selected_language: null,\n sender_organization_name: initialSenderOrganizationName,\n template_id: custom_message_template?.id || null,\n template_name: custom_message_template?.name || \"\",\n template_organization_id: custom_message_template?.organization_id?.toString() || null,\n });\n\n const adjustFilterParams = () => {\n // when dynamically updating filter options we need to remove some values from filter params if they are not found in the new filter options\n // for example user filters based on a test_group then filters based on a random organization, we need to remove the selected test_group\n // from the params if test_group is not part of the the newly selected organization\n DYNAMICALLY_ADJUSTABLE_PARAMS.forEach((param) => {\n const acceptableValues = state.filter_options[param[\"options_key\"]].map(o => o.value);\n const currentParams = state.filter_params[param[\"param_key\"]];\n const newParams = currentParams.filter((k) => acceptableValues.includes(k));\n const paramsChanged = !_.isEqual(currentParams.sort(), newParams.sort());\n if (paramsChanged) {\n dispatch({ type: param[\"action\"], values: newParams });\n }\n })\n };\n\n useEffect(() => {\n adjustFilterParams()\n }, [state.filter_options])\n\n const [currentStep, setCurrentStep] = useState(displayingMessageTemplateForm ? 1 : 0);\n\n const context = {\n currentStep,\n currentUser: current_user,\n dispatch,\n displayingMessageTemplateForm,\n messageOptions: message_options,\n setCurrentStep,\n state,\n };\n\n const sections = [\n \n \n {displayingMessageTemplateForm ? (\n \n
\n );\n};\n\nexport default NewMessage;","import React from \"react\";\nimport { Card } from \"react-bootstrap\";\nimport { faCircleExclamation, faUserGroup } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nconst stringToHexColor = (str) => {\n // Generate a numeric hash value from the input string\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const charCode = str.charCodeAt(i);\n hash = (hash << 5) - hash + charCode;\n hash |= 0; // Convert to 32-bit integer\n }\n // Ensure the hash is positive\n hash = Math.abs(hash);\n // Convert the numeric hash to a hex color string\n const hexColor = \"#\" + ((hash % 0x1000000).toString(16)).padStart(6, \"0\");\n return hexColor;\n};\n\nexport const MessageSummary = ({\n deliveredVia,\n justifyContent,\n recipientCount,\n startedBy,\n startedByInitials,\n}) => {\n return (\n \n
\n \n \n
\n {startedBy}\n \n {startedByInitials}\n
\n \n |\n
\n \n );\n};\n\nconst MessageItem = ({\n communication,\n isSelected,\n setSelectedCommunicationId,\n}) => {\n\n const {\n delivered_via,\n failed_communication_task_count,\n id,\n preview,\n recipient_count,\n start_date_short,\n started_by,\n started_by_initials,\n } = communication;\n\n return (\n \n
\n \n {!!failed_communication_task_count && (\n setShowDeliveryErrorModal(true)}\n size=\"lg\"\n />\n )}\n {preview?.email_subject}\n
\n {start_date_short}\n \n {preview?.email_message}\n
\n \n {filterLabels.map(filterLabel =>\n \n {filterLabel}\n \n )}\n
\n ) : (\n \n {/* for old messages we simply display the filter_params */}\n {!filterLabels.length && JSON.stringify(appliedFilters)}\n
\n )}\n \n );\n};\n\nconst NewMessageScheduleDelivery = ({}) => {\n\n const [useTotalRuns, setUseTotalRuns] = useState(false);\n\n const {\n currentUser,\n dispatch,\n messageOptions,\n state,\n } = useContext(NewMessageContext);\n\n const deliveredVia = !!state.message_settings.sms_message\n ? \"Email & text\"\n : \"Email\";\n\n return (\n \n
\n \n {state.message_settings.email_subject}
\n\n Send to\n
\n \n
\n\n Schedule delivery
\nSchedule when you would like your message to go out
\n\n Date\n
\n\n \n {\n setUseTotalRuns(false)\n if (useTotalRuns) {\n dispatch({\n type: \"setTotalRuns\",\n values: null\n })\n }\n }}\n radio\n />\n \n {\n setUseTotalRuns(false);\n dispatch({\n type: \"setEndDate\",\n values: objectDate\n })\n }}\n shadow={false}\n value={state.message_settings.end_date}\n />\n \n
\n \n {\n setUseTotalRuns(true)\n if (!useTotalRuns) {\n dispatch({\n type: \"setEndDate\",\n values: null,\n })\n }\n }}\n radio\n />\n \n {\n setUseTotalRuns(true);\n dispatch({\n type: \"setTotalRuns\",\n values: e.target.value,\n })\n }}\n autoComplete=\"off\"\n required\n />\n \n
\n
\n )}\n \n )}\n \n End
\n\n
\n \n \n
\n \n
\n {metricsData.label}
\n \n {loading ? (\n setShowDeliveryErrorModal(true)}\n size=\"lg\"\n />\n )}\n
\n \n \n );\n};\n\nconst MessageMetrics = ({\n failedCommunicationPresent,\n selectedCommunicationId,\n setShowDeliveryErrorModal,\n}) => {\n\n const [loading, setLoading] = useState(false);\n const [messageImpact, setMessageImpact] = useState(null); // TODO\n const [messageMetrics, setMessageMetrics] = useState([]);\n\n const fetchMessageMetricsAndImpact = async () => {\n setLoading(true);\n const response = await axios.get(`messages/${selectedCommunicationId}/message_metrics`);\n if (response.status === 200) {\n setMessageImpact(response.data.message_impact);\n setMessageMetrics(response.data.metrics);\n }\n setLoading(false);\n }\n\n useEffect(() => {\n fetchMessageMetricsAndImpact();\n }, [selectedCommunicationId])\n\n return (\n <>\n {messageImpact && ( \n \n
\n ) : (\n <>\n {metricsData.label == \"Delivery success\" && failedCommunicationPresent && (\n {metricsData.value}
\n \n )}\n \n \n \n {messageImpact.map(i => {\n return (\n
\n \n
\n )}\n\n Message impact
\n\n {loading\n ?
\n {i.label}
\n \n )\n })}\n \n
\n \n );\n};\n\nexport default MessageMetrics;","import React, { useState } from \"react\";\nimport { Button, Col, Row } from \"react-bootstrap\";\n\nimport CancelScheduledMessageModal from \"./CancelScheduledMessageModal\";\nimport DeliveryErrorModal from \"./DeliveryErrorModal\";\nimport { FilterBadges } from \"./NewMessageScheduleDelivery\";\nimport MessageMetrics from \"./MessageMetrics\";\nimport { MessageSummary } from \"./MessagesItem\";\n\nconst MessageDetails = ({\n communications,\n filterOptions,\n selectedCommunication,\n setCommunications,\n}) => {\n\n const [showCancelScheduledMessageModal, setShowCancelScheduledMessageModal] = useState(false);\n const [showDeliveryErrorModal, setShowDeliveryErrorModal] = useState(false);\n\n const {\n delivered_via,\n id,\n failed_communication_task_count,\n params,\n pretty_repeating_interval,\n preview,\n recipient_count,\n repeating,\n start_date,\n started_by,\n started_by_initials,\n } = selectedCommunication;\n\n return (\n Message metrics
\n\n Metrics are only collected for the first 7 days after message has been sent.\n
\n\n {messageMetrics.map((metricsData, idx) => {\n return (\n\n setShowCancelScheduledMessageModal(false)}\n setCommunications={setCommunications}\n show={showCancelScheduledMessageModal}\n />\n setShowDeliveryErrorModal(false)}\n selectedCommunicationId={id}\n show={showDeliveryErrorModal}\n subject={preview?.email_subject}\n />\n
\n\n \n \n \n Sent\n \n
\n \n \n Sent to\n \n
\n
\n\n {preview?.email_subject}
\n\n ({pretty_repeating_interval})\n
\n )}\n \n \n \n {preview?.email_message}\n
\n Email message
\n\n \n {preview?.sms_message}\n
\n \n\n {repeating && (\n SMS message
\n\n {\n setFilters({\n ...filters,\n organizations: organizations.map(tg => tg.value)\n })\n }}\n options={organizationFilterOptions}\n value={\n useSimplifiedGodOption // for god users instead of putting all orgs into the multi input by default, we show 'All'\n ? [{value: null, label: \"All\"}]\n : organizationFilterOptions.filter(o => filters[\"organizations\"].includes(o.value))\n }\n />\n
\n \n {\n setFilters({\n ...filters,\n test_groups: testGroups.map(tg => tg.value)\n })\n }}\n options={testGroupFilterOptions}\n value={testGroupFilterOptions.filter(o => filters[\"test_groups\"].includes(o.value))}\n />\n
\n \n \n
\n )}\n \n );\n};\n\nexport default MessagesList;","import React, { useState } from \"react\";\nimport axios from \"axios\";\nimport { Button, Col, Row } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nimport FloatingLabelInput from \"../../common/components/FloatingLabelInput\";\nimport MessageDetails from \"./MessageDetails\";\nimport MessagesFiltersBar from \"./MessagesFiltersBar\";\nimport MessagesList from \"./MessagesList\";\n\nconst Messages = ({\n communications_props,\n}) => {\n\n const url = new URL(window.location.href);\n const [searchTerm, setSearchTerm] = useState(url.searchParams.get(\"q\") || null);\n const [communications, setCommunications] = useState(communications_props.communications);\n const [selectedCommunicationId, setSelectedCommunicationId] = useState(communications[0]?.id);\n const selectedCommunication = communications.find(c => c.id == selectedCommunicationId);\n const [loadingCommunications, setLoadingCommunications] = useState(false);\n\n const fetchMoreCommunications = async () => {\n setLoadingCommunications(true);\n const response = await axios.get(`/messages.json`, {\n params: {\n fetched_communication_ids: communications.map(c => c.id),\n ...Object.fromEntries(\n new URL(window.location.href).searchParams.entries(),\n )\n }\n });\n setLoadingCommunications(false);\n if (response.status === 200) {\n setCommunications([...communications, ...response.data.communications_props.communications]);\n }\n };\n\n const noResultsFound = (\n \n
\n );\n\n return (\n \n ![](\"/images/icons/icon-search-not-found-2.svg\"/)
\n \n There are no active
\n {\n window.location.href = location.protocol + \"//\" + location.host + location.pathname + \"/new\"\n }}\n >\n Create new message\n \n
\n \n \n There are no active
messages\n
\n \n Create a new message to targeted audiences and
track its reach now\n
\n \n {\n setSearchTerm(e.target.value);\n }}\n onKeyDown={(e) => {\n url.searchParams.set(\"q\", searchTerm);\n window.location.href = url.toString();\n }}\n value={searchTerm}\n />\n
\n )}\n
\n );\n};\n\nexport default Messages;","import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\nimport { Button, Card } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { format } from \"date-fns-tz\";\n\nimport { DeleteCustomMessageTemplateModal } from './MessageTemplateForm';\nimport MessagesFiltersBar from \"./MessagesFiltersBar\";\n\nconst TemplateCard = ({\n button,\n children,\n className,\n}) => {\n return (\n \n {communications_props.filtered_communications_count} total results\n \n Filter / Sort\n
\n {!communications.length ? (\n noResultsFound\n ) : (\n \n {button}\n
\n \n \n );\n};\n\nconst MessageTemplates = ({\n communications_props,\n}) => {\n\n const [templates, setTemplates] = useState([]);\n const [deleteCustomMessageTemplateModalOpen, setDeleteCustomMessageTemplateModalOpen] = useState(false);\n const [selectedMessageTemplateId, setSelectedMessageTemplateId] = useState(false);\n\n const fetchTemplates = async () => {\n const response = await axios.get(\"/custom_message_templates.json\");\n setTemplates(response.data)\n };\n\n useEffect(() => {\n fetchTemplates();\n }, []);\n\n const newTemplateButton = (\n \n );\n\n return (\n \n \n \n {templates.map((t) => {\n const createdOrUpdatedAt = (\n \n
\n
\n \n );\n};\n\nexport default MessageTemplates;","import React, { useContext, useState } from \"react\";\n\nimport Select, { components } from \"react-select\";\nimport { SERVICE_SPECIFICATION_TYPES } from \"./TestGroupTestConfigurationsIndex\";\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\n\nconst TestGroupTestConfigurationSelector = () => {\n\n const {\n dispatch,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n const [typedInput, setTypedInput] = useState(null);\n\n const filterOption = (option) => {\n // filtering the custom dropdown options on typing\n if (!typedInput) return true;\n try {\n return option.label.props.children[0].props.children.toLowerCase().includes(typedInput.toLowerCase());\n } catch(e) {\n return true;\n }\n };\n\n const testConfigurationOptions = (\n state.filteredTestConfigurationOptions ||\n state.testConfigurationOptions.allowed_test_configurations\n ).map((tc) => {\n return {\n value: tc.id,\n label: (\n \n {templates.length} total results\n \n Filter / Sort\n
\n\n Recent templates
\n\n {t.created_at == t.updated_at ? \"Created: \" : \"Edited: \"}\n {format(new Date(t.updated_at), \"MM/dd/yyyy\")}\n
\n );\n const button = (\n \n );\n return (\n \n {\n setSelectedMessageTemplateId(t.id);\n setDeleteCustomMessageTemplateModalOpen(true);\n }}\n size=\"sm\"\n variant=\"link\"\n >\n
\n {createdOrUpdatedAt}\n \n {t.name}\n
\n \n
\n {t.params?.email_subject}\n
\n \n {t.params?.email_message}\n
\n \n )\n })}\n \n
\n )};\n });\n\n const selectedTestConfiguration = testConfigurationOptions.find((option) => {\n return option.value == state.testGroupTestConfiguration.test_configuration_id;\n });\n\n const CustomServiceSpecificationTypeFilter = () => {\n return (\n {tc.checkout_name}
\n \n {tc.age_range_label}\n
\n \n {tc.test_type}\n
\n \n
\n );\n};\n\nconst TestGroupTestConfigurationForm = () => {\n\n const {\n dispatch,\n flippers,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n const [showRequisitioningPhysicianField, setShowRequisitioningPhysicianField] = useState(!!state.testGroupTestConfiguration.requisitioning_physician_id);\n\n useEffect(() => {\n if (!state.testConfigurationOptions) fetchTestConfigurationOptions(dispatch, state.testGroupTestConfiguration.test_group_id);\n }, [state.testGroupTestConfiguration.test_group_id]);\n\n if (!state.testConfigurationOptions) return ;\n\n const reqPhysicianOptions = state.testConfigurationOptions.requisitioning_physician_candidates.map((physician) => {\n return { value: physician.id, label: physician.full_name };\n });\n const selectedReqPhysician = reqPhysicianOptions.find((option) => {\n return option.value == state.testGroupTestConfiguration.requisitioning_physician_id;\n });\n const selectedAdministrationType = state.testConfigurationOptions.administration_type_options.find((type) => {\n return type.value == state.testGroupTestConfiguration.administration_type;\n });\n\n return (\n {checkoutName}
\n\n
\n \n
\n \n
\n \n \n \n \n
\n\n {state.selectedTestConfiguration?.service_specification_type == \"immunization\" && (\n <>\n {showRequisitioningPhysicianField ? (\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n requisitioning_physician_id: reqPhysician.value\n }\n });\n }}\n options={reqPhysicianOptions}\n value={selectedReqPhysician}\n />\n \n
\n ) : (\n setShowRequisitioningPhysicianField(true)}\n variant=\"link\"\n >\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n use_medical_screening_survey_on_checkout: !state.testGroupTestConfiguration.use_medical_screening_survey_on_checkout\n }\n });\n }}\n subLabel=\"The medical screening survey includes questions that may be relevant to multiple services.\n Enabling this will replace service specific surveys on checkout.\"\n />\n \n
\n )}\n\n {!!state.selectedTestConfiguration?.service_specification_type && (\n SERVICE_SPECIFICATION_TYPES[state.selectedTestConfiguration.service_specification_type][\"component\"]\n )}\n\n \n \n
\n );\n};\n\nexport default TestGroupTestConfigurationForm;","import React, { useContext, useEffect } from \"react\";\nimport axios from \"axios\";\nimport { Card, Col, Row } from \"react-bootstrap\";\n\nimport LocalizedMarkdown from \"../../Registration/components/registration/fields/LocalizedMarkdown\";\nimport { SERVICE_SPECIFICATION_TYPES } from \"./TestGroupTestConfigurationsIndex\";\nimport TestGroupTestConfigurationSelector from \"./TestGroupTestConfigurationSelector\";\nimport { TestGroupTestConfigurationTitle } from \"./TestGroupTestConfigurationForm\";\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\nimport { fetchVaccineInfoSheetVersions, VaccineInfoSheetVersions } from \"./VaccineTestGroupTestConfigurationInputFields\";\n\nexport const fetchTestConfigurationOptions = async (dispatch, testGroupId) => {\n dispatch({ type: \"setLoading\", values: true });\n const response = await axios.get(`/test_groups/${testGroupId}/test_configuration_options`);\n dispatch({ type: \"setTestConfigurationOptions\", values: response.data });\n dispatch({ type: \"setLoading\", values: false });\n};\n\nconst NewTestGroupTestConfigurationSelector = () => {\n\n const {\n dispatch,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n useEffect(() => {\n if (!state.testConfigurationOptions) fetchTestConfigurationOptions(dispatch, state.testGroupTestConfiguration.test_group_id);\n }, [state.testGroupTestConfiguration.test_group_id]);\n\n useEffect(() => {\n fetchVaccineInfoSheetVersions(dispatch, state.selectedTestConfiguration);\n }, [state.selectedTestConfiguration]);\n\n if (!state.testConfigurationOptions) return ;\n\n return (\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n active: !state.testGroupTestConfiguration.active\n }\n });\n }}\n />\n
\n \n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n requisitioning_physician_id: reqPhysician.value\n }\n });\n }}\n options={reqPhysicianOptions}\n value={selectedReqPhysician}\n />\n
\n Requisitioning physician:
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n administration_type: administrationType.value\n }\n });\n }}\n options={state.testConfigurationOptions.administration_type_options}\n value={selectedAdministrationType}\n />\n
\n \n )}\n Administration type:
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n service_code: e.target.value,\n }\n });\n }}\n />\n
\n {!!flippers.case_report_url && (\n <>\n Service code:
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n case_report_url: e.target.value,\n }\n });\n }}\n />\n
\n Case report url:
\n\n {\n dispatch({\n type: \"setTestGroupTestConfiguration\",\n values: {\n ...state.testGroupTestConfiguration,\n documentation_url: e.target.value,\n }\n });\n }}\n />\n
\n \n )}\n \n Documentation url:
\nRequisitioning physician:
\nMedical screening survey:
\n\n \n \n \n
\n {!!state.selectedTestConfiguration && (\n \n \n
\n );\n};\n\nexport default NewTestGroupTestConfigurationSelector;","import React, { useContext } from \"react\";\nimport { Button, Spinner } from \"react-bootstrap\";\n\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\n\nconst TITLES = {\n newTestGroupTestConfigurationSelector: \"New service\",\n testGroupTestConfigurationsIndex: \"Configure services\",\n testGroupTestConfigurationForm: \"New service\",\n};\n\nconst TestGroupTestConfigurationsHeader = () => {\n\n const {\n bulkUpdateActiveStatus,\n dispatch,\n save,\n state,\n } = useContext(TestGroupTestConfigurationsContext);\n\n const TestGroupTestConfigurationsIndexButtons = () => {\n return (\n !state.selectedTestGroupTestConfigurationIds.length ? (\n New service
\nService:
\n\n
\n )}\n \n This is a {SERVICE_SPECIFICATION_TYPES[state.selectedTestConfiguration.service_specification_type].label_v2} for\n {state.selectedTestConfiguration.age_range_label == \"All ages\"\n ? \" all ages\"\n : ` participants aged ${state.selectedTestConfiguration.age_range_label}`\n }.\n
\n {state.selectedTestConfiguration.service_specification_type == \"immunization\" && !state.loading && (\n \n {!!state.vaccineInfoSheetVersions?.length ? (\n <>\n
\n )}\n The vaccine information statement(s) for this vaccine:
\n \n
\n \n {\n dispatch({\n type: 'setCurrentStep',\n values: \"testGroupTestConfigurationsIndex\",\n });\n }}\n variant=\"link\"\n >\n Cancel\n \n {state.currentStep == \"testGroupTestConfigurationForm\" ? (\n \n Save\n \n ) : (\n {\n dispatch({\n type: 'setCurrentStep',\n values: \"testGroupTestConfigurationForm\",\n });\n }}\n variant=\"outline-secondary\"\n >\n Next\n \n )}\n
\n );\n };\n\n return (\n \n
\n );\n};\n\nexport default TestGroupTestConfigurationsHeader;","import React, { useReducer } from \"react\";\nimport axios from \"axios\";\n\nimport NewTestGroupTestConfigurationSelector from \"./NewTestGroupTestConfigurationSelector\";\nimport TestGroupTestConfigurationForm from \"./TestGroupTestConfigurationForm\";\nimport TestGroupTestConfigurationFormHeader from \"./TestGroupTestConfigurationsHeader\";\nimport TestGroupTestConfigurationsContext from \"./contexts/TestGroupTestConfigurationsContext\";\nimport TestGroupTestConfigurationsIndex from \"./TestGroupTestConfigurationsIndex\";\n\nconst STEPS = {\n newTestGroupTestConfigurationSelector: \n {!!state.testGroupTestConfiguration.id\n ? \"Edit service\"\n : TITLES[state.currentStep]\n }\n
\n {state.currentStep == \"testGroupTestConfigurationsIndex\"\n ?\n \n \n
\n );\n};\n\nexport default TestGroupTestConfigurationsContainer;\n","import React from \"react\";\nimport axios from \"axios\";\nimport { Button, Col, Modal, Row } from \"react-bootstrap\";\n\nimport CheckboxCard from \"../../common/components/CheckBoxCard\";\nimport FloatingLabelInput from \"../../common/components/FloatingLabelInput\";\nimport ModalHeader from \"../../common/components/ModalHeader\";\n\nconst TestConfigurationActionsModal = ({\n allowedTestGroups,\n filteredTestGroupIds,\n modalType,\n onHide,\n searchInput,\n selectedActiveCount,\n selectedInactiveCount,\n selectedTestConfigurationIds,\n selectedTestGroupIds,\n setFilteredTestGroupIds,\n setSearchInput,\n setSelectedTestGroupIds,\n show,\n testConfigurations,\n}) => {\n\n const selectableTestGroups = modalType != \"deactivate\";\n\n const handleActivateDeactivate = async (activate) => {\n const testConfigurationIds = testConfigurations\n .filter((tc) => selectedTestConfigurationIds.includes(tc.id))\n .filter((tc) => tc.active != activate)\n .map(tc => tc.id)\n const params = {\n active: activate,\n test_configuration_ids: testConfigurationIds,\n test_group_ids: selectedTestGroupIds,\n }\n try {\n const response = await axios.put(\"/bulk_activate_deactivate_test_configurations\", params);\n toastr.success(\"Success\");\n window.location.reload();\n } catch (e) {\n toastr.error(\"Something went wrong\");\n }\n };\n\n const handleAddIntoTestGroups = async () => {\n const params = {\n test_configuration_ids: selectedTestConfigurationIds,\n test_group_ids: selectedTestGroupIds,\n }\n try {\n const response = await axios.post(\"/bulk_add_test_configurations_into_test_groups\", params);\n toastr.success(\"Success\");\n window.location.reload();\n } catch (e) {\n toastr.error(\"Something went wrong\");\n }\n };\n\n const handleSearchBarChange = (searchInput) => {\n setSearchInput(searchInput);\n const processedSearchInput = searchInput.trim().toLowerCase();\n const filteredIds = allowedTestGroups\n .filter((tg) => tg.name?.trim().toLowerCase().indexOf(processedSearchInput) > -1)\n .map((tg) => tg.id);\n setFilteredTestGroupIds(filteredIds);\n };\n\n const affectedTestGroups = (activeToInactive) => {\n return testConfigurations.filter((tc) => selectedTestConfigurationIds.includes(tc.id))\n .filter((tc) => tc.active == activeToInactive)\n .map((tc) => tc.test_groups)\n .flat()\n .filter((tg) => !filteredTestGroupIds.length || filteredTestGroupIds.includes(tg.id))\n };\n\n const SelectAllTestGroupsButton = ({ testGroups }) => {\n const allSelected = !!selectedTestGroupIds.length && selectedTestGroupIds.length == testGroups.length;\n return (\n • {tg.name}
)\n })\n )}\n \n );\n };\n\n const modalMapping = {\n activate: {\n action: async () => handleActivateDeactivate(true),\n actionDisabled: false,\n actionText: \"Activate\",\n subTitle: \"Select all test groups you'd like to activate these services\",\n testGroups: affectedTestGroups(false),\n title: `Activate ${selectedInactiveCount} service configurations`,\n },\n deactivate: {\n action: async () => handleActivateDeactivate(false),\n actionDisabled: false,\n actionText: \"Deactivate\",\n subTitle: `${affectedTestGroups(true).length} test group test configuration will be deactivated in the following test groups:`,\n testGroups: affectedTestGroups(true),\n title: `Deactivate ${selectedActiveCount} service configurations`,\n },\n addIntoTestGroups: {\n action: async () => handleAddIntoTestGroups(),\n actionDisabled: !selectedTestGroupIds.length,\n actionText: \"Add into groups\",\n subTitle: \"Select all test groups you'd like to add these services\",\n testGroups: !!filteredTestGroupIds.length\n ? allowedTestGroups.filter((tg) => filteredTestGroupIds.includes(tg.id))\n : allowedTestGroups,\n title: `Add ${selectedTestConfigurationIds.length} services to ${selectedTestGroupIds.length} groups`,\n },\n };\n\n if (!modalType) return \n\n return (\n \n \n
\n );\n};\n\nexport default TestConfigurationActionsModal;","import React, { useEffect, useState } from \"react\";\nimport { Button } from \"react-bootstrap\";\n\nimport TestConfigurationActionsModal from \"./TestConfigurationActionsModal\";\n\nconst TestConfigurationActions = ({\n allowedTestGroups,\n selectedTestConfigurationIds,\n testConfigurations,\n totalCount,\n}) => {\n\n const selectedCount = selectedTestConfigurationIds.length;\n const selectedTestConfigurations = testConfigurations.filter(tc => selectedTestConfigurationIds.includes(tc.id));\n const selectedActiveCount = selectedTestConfigurations.filter(tc => tc.active).length;\n const selectedInactiveCount = selectedTestConfigurations.filter(tc => !tc.active).length;\n const [filteredTestGroupIds, setFilteredTestGroupIds] = useState([]);\n const [searchInput, setSearchInput] = useState(\"\");\n const [selectedTestGroupIds, setSelectedTestGroupIds] = useState([]);\n const [showModal, setShowModal] = useState(false);\n const [modalType, setModalType] = useState(null);\n\n useEffect(() => {\n if (!!modalType) setShowModal(true);\n }, [modalType]);\n\n useEffect(() => {\n if (!showModal) {\n setModalType(null);\n setSelectedTestGroupIds([]);\n }\n }, [showModal]);\n\n const onModalHide = () => {\n setShowModal(false);\n setSearchInput(\"\");\n filteredTestGroupIds([]);\n };\n\n return (\n \n \n \n {modalMapping[modalType].title}\n \n \n \n \n handleSearchBarChange(e.target.value)}\n value={searchInput}\n prependIcon=\"search\"\n />\n \n
\n )}\n \n \n \n
\n \n \n {modalMapping[modalType].subTitle}\n
\n {selectableTestGroups && (\n \n \n Cancel\n \n \n {modalMapping[modalType].actionText}\n \n
\n \n
\n );\n};\n\nexport default TestConfigurationActions;","import React from \"react\";\nimport { Button } from \"react-bootstrap\";\n\nimport SelectableTable from \"../../common/components/SelectableTable/SelectableTable\";\nimport TablePagination from \"../../common/components/TablePagination\";\n\nconst TestConfigurationsIndex = ({\n meta,\n selectedTestConfigurationIds,\n setSelectedTestConfigurationIds,\n testConfigurations,\n flippers,\n}) => {\n\n const handlePageChange = (newPage) => {\n updatePage({ page: newPage });\n };\n\n const handleLimitChange = (newLimit) => {\n updatePage({ limit: newLimit });\n };\n\n const updatePage = (newParams) => {\n const path = window.location.pathname;\n const urlParams = new URLSearchParams(window.location.search);\n Object.keys(newParams).forEach((key) => {\n urlParams.set(key, newParams[key]);\n });\n window.location.href = `${path}?${urlParams.toString()}`;\n };\n\n const ServiceComponent = ({ props }) => {\n return (\n \n
\n \n {selectedCount} of {totalCount} selected\n
\n \n {!!selectedActiveCount && (\n setModalType(\"deactivate\")}\n variant=\"outline-danger\"\n >\n Make {selectedActiveCount} inactive\n \n )}\n {!!selectedInactiveCount && (\n setModalType(\"activate\")}\n variant=\"outline-success\"\n >\n Make {selectedInactiveCount} active\n \n )}\n setModalType(\"addIntoTestGroups\")}\n >\n Add {selectedCount} into groups\n \n
\n \n {props.checkout_name}\n
\n );\n };\n\n const StatusComponent = ({ props }) => {\n const active = props.active;\n return (\n {props.test_type}
\n \n
\n );\n};\n\nexport default TestConfigurationsIndex;\n","import React, { useState } from \"react\";\n\nimport TestConfigurationActions from \"./TestConfigurationActions\";\nimport TestConfigurationsIndex from \"./TestConfigurationsIndex\";\n\nconst TestConfigurationsContainer = ({\n allowed_test_groups,\n meta,\n test_configurations,\n flippers,\n}) => {\n\n const [selectedTestConfigurationIds, setSelectedTestConfigurationIds] = useState([]);\n\n return (\n \n {!!selectedTestConfigurationIds.length && (\n
\n );\n};\n\nexport default TestConfigurationsContainer;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport Select, { components } from 'react-select';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronUp } from '@fortawesome/pro-solid-svg-icons';\nimport { Button } from \"react-bootstrap\";\n\nconst ButtonSelect = ({\n className,\n onChange,\n options,\n selectedLabel,\n}) => {\n\n const [isOpen, setIsOpen] = useState(false);\n const ref = useRef(null);\n\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n\n const customStyles = {\n option: (provided, state) => ({\n ...provided,\n color: state.data.text_color,\n cursor: 'pointer',\n }),\n };\n\n const CustomControl = props => {\n return (\n \n setIsOpen(true)}\n onMenuClose={() => setIsOpen(false)}\n menuIsOpen={isOpen}\n />\n
\n );\n}\n\nexport default ButtonSelect;\n","import React, { useState } from \"react\";\nimport axios from \"axios\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faExclamationCircle } from '@fortawesome/pro-regular-svg-icons';\nimport { Button, Modal } from \"react-bootstrap\";\nimport ModalHeader from \"../common/components/ModalHeader\";\n\nimport ButtonSelect from \"../common/components/ButtonSelect\";\nimport StatusBadge from \"../common/components/StatusBadge\";\n\nconst OverviewInfo = ({ labelClassName, label, value }) => {\n return (\n \n {label}: \n {value}\n
\n );\n};\n\nconst LocationsList = ({ locations }) => {\n const [showMore, setShowMore] = useState(false);\n\n let first_five = locations.slice(0, 5);\n let rest = locations.slice(5);\n return (\n \n {first_five.map(l => {\n return (\n setShowMore(!showMore)}\n >\n {showMore ? \"Show less -\" : \"Show more +\"}\n \n \n
\n )\n};\n\nconst StatusChangeConfirmationModal = ({\n onSubmit,\n setStatusChangeConfirmationModalType,\n statusChangeConfirmationModalType,\n}) => {\n if (!statusChangeConfirmationModalType) return ;\n return (\n \n {rest.map(l => {\n return (\n
\n ').map((line, index) => (\n
{line}
\n ))}\n\n updateStatus({value: statusChangeConfirmationModalType.value})}\n setStatusChangeConfirmationModalType={setStatusChangeConfirmationModalType}\n statusChangeConfirmationModalType={statusChangeConfirmationModalType}\n />\n {!!test_group_banner?.text && (\n
\n );\n};\n\nexport default TestGroupOverview;\n","import React, { useEffect, useState } from \"react\";\nimport { Button, Modal } from \"react-bootstrap\";\n\nimport FloatingLabelInput from \"../common/components/FloatingLabelInput\";\nimport ModalHeader from \"../common/components/ModalHeader\";\nimport { SERVICE_SPECIFICATION_TYPES } from \"../TestGroupTestConfigurations/components/TestGroupTestConfigurationsIndex\";\nimport StatusBadge from \"../common/components/StatusBadge\";\n\nconst TemplateServicesModal = ({\n handleClose,\n selectedTemplate,\n show,\n}) => {\n if (!selectedTemplate) return <>;\n\n const [search, setSearch] = useState(\"\");\n const [filter, setFilter] = useState(null);\n const [filteredServices, setFilteredServices] = useState(selectedTemplate.test_group_test_configurations);\n\n useEffect(() => {\n let newFilteredServices = selectedTemplate.test_group_test_configurations;\n if (!!search.length) {\n newFilteredServices = newFilteredServices.filter((tgtc) => {\n return tgtc.display_name.toLowerCase().includes(search.toLowerCase());\n })\n }\n if (!!filter) {\n newFilteredServices = newFilteredServices.filter((tgtc) => {\n return tgtc.service_specification_type == filter;\n })\n }\n setFilteredServices(newFilteredServices);\n }, [filter, search]);\n\n return (\n <>\n \n
\n )}\n \n setStatusChangeConfirmationModalType(option)}\n options={test_group_statuses}\n selectedLabel={selected_status_label}\n />\n )}\n
\n \n {name}\n
\n {show_status_dropdown && (\n \n
\n \n
\n {primary_leads && (\n \n Locations & dates:\n
\n {appointment_slot_groups.length > 5 ? (\nServices
\n\n The services below are configured for the{\" \"}\n \n {selectedTemplate.name}\n {\" \"}\n template.\n
\n\n
\n
\n )\n })}\n \n \n
\n \n
\n {tgtc.display_name}
\n {tgtc.age_range_label}
\n \n {!tgtc.active && (\n
\n \n
\n {restrictions.map((restriction, index) => (\n \n {restriction}\n {index < restrictions.length - 1 && \", \"}\n \n ))}\n
\n );\n};\n\nconst TemplateCard = ({ setSelectedTemplateId, template }) => {\n\n const displayedServices = template.test_group_test_configurations.slice(0, MAX_DISPLAYED_SERVICES);\n const hiddenServicesCount = template.test_group_test_configurations.length - MAX_DISPLAYED_SERVICES;\n\n return (\n {template.name}
\n \n {!!displayedServices.length && (\n\n
\n )}\n {template.restrictions.restricted && (\n \n Services\n
\n \n {displayedServices.map((tgtc) => tgtc.display_name).join(\", \")}\n {hiddenServicesCount > 0 && (\n setSelectedTemplateId(template.id)}\n style={{ color: 'var(--primary, #2862FA)', fontSize: 14 }}\n >\n + {hiddenServicesCount} more\n \n )}\n
\n \n
\n )}\n \n \n Restrictions\n
\n \n window.location.href = `/test_groups/new_from_template?template_test_group_id=${template.id}`}\n style={{\n cursor: \"pointer\",\n backgroundColor: \"#007bff\",\n height: 50,\n width: 50,\n borderRadius: \"50%\",\n marginRight: \"0\",\n }}\n >\n
\n \n \n \n setSearch(e.target.value)}\n value={search}\n />\n {filteredTemplatesTestGroups.map((ttg) => {\n return (\n ttg.id === selectedTemplateId)}\n show={!!selectedTemplateId}\n />\n
\n );\n};\n\nexport default TestGroupTemplatesIndex;","import React, { useState } from \"react\";\n\nconst VaccineLots = ({\n test_group: {\n appointment_slot_group_links_last,\n appointment_slot_links_first,\n more_than_five_groups,\n },\n}) => {\n const [showMore, setShowMore] = useState(false);\n\n return (\n <>\n Activate and deactivate vaccine lots by location
\n {appointment_slot_links_first.map((link) => (\n\n {link.title}\n
\n ))}\n {more_than_five_groups && (\n <>\n \n {appointment_slot_group_links_last.map((link) => (\n
\n \n {link.title}\n
\n ))}\n \n updateForm(\"appointment_slot_group_id\", id, findLabel(locationOptions, id))}\n />\n
\n \n updateDateRange(start, end)}\n clearDate={() => setForm({...form, start_day: \"\", end_day: \"\"})}\n />\n
\n \n updateForm(\"tested\", value, findLabel(testedOptions, value))}\n />\n
\n \n );\n\n useEffect(() => {\n if (initialForm.current !== form) filterParticipants();\n }, [form]);\n\n return (\n \n
\n )}\n \n setSearchInput(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && updateForm('q', e.target.value, e.target.value)}\n onKeyDown={(e) => e.key === \"Tab\" && updateForm('q', e.target.value, e.target.value)}\n ariaLabel=\"Search by name, email, or phone\"\n className=\"d-sm-block flex-md-fill mb-3 mb-md-0\"\n style={{minWidth: \"305px\"}}\n prependIcon=\"search\"\n />\n \n \n \n \n \n setSearchInput2(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && updateForm('q', e.target.value, e.target.value)}\n onKeyDown={(e) => e.key === \"Tab\" && updateForm('q', e.target.value, e.target.value)}\n ariaLabel=\"Search by name, email, or phone\"\n className=\"d-sm-block flex-md-fill mb-3 mb-md-0\"\n style={{minWidth: \"305px\"}}\n prependIcon=\"search\"\n />\n
\n {filtersToDisplay(selectedFilters, setForm, form).length > 0 && (\n \n updateForm(\"test_lane\", value, findLabel(laneOptions, value))}\n />\n
\n \n updateForm(\"consented_to\", value, findLabel(consentedToFilterOptions, value))}\n />\n
\n \n updateTags(value, setForm, form, setSelectedFilters, selectedFilters)}\n />\n
\n \n updateForm(\"archived_status\", value, findLabel(appointmentsStatusOptions, value))}\n />\n
\n \n \n \n
\n ) : (\n \n {appointment_slot.appointment_date}\n
\n \n {appointment_slot.localized_starts_at_time}\n
\n On demand
\n )}\n \n {user.date_of_birth} (age {user.age})\n {user.age < 18 && Minor}\n
\n {user.phone_formatted}
\n )}\n {user.email && (\n {user.email}
\n )}\n \n {appointment_slot_group.title}\n
\n {props.total_appointments} results
\n {props.total_appointments > 0 ? (\n | \n Time\n | \n\n Patient\n | \n\n Contact\n | \n\n Location\n | \n\n Status\n | \n\n | \n | \n \n \n
| \n \n );\n })}\n
|---|
\n No results found. Try changing your search criteria.\n
\n )}\n {appointment && showCheckInModal &&\n \n updateForm(\"location\", id, findLabel(locationOptions, id))}\n />\n
\n )}\n { !consentFlipperEnabled && (\n \n updateForm(\"consented_to\", value, findLabel(consentedToFilterOptions, value))}\n />\n
\n )}\n \n updateForm(\"sort_by\", value, findLabel(sortOptions, value))}\n />\n
\n \n )\n\n useEffect(() => {\n if (initialForm.current !== form) filterTestGroupUsers();\n }, [form]);\n\n useEffect(() => {\n if (consentFlipperEnabled && !consentType && form.consented_to) setForm({...form, consent_type: consentType, consented_to: undefined});\n }, [consentType]);\n\n return (\n \n
\n )}\n \n setSearchInput(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && updateForm('q', e.target.value, e.target.value)}\n onKeyDown={(e) => e.key === \"Tab\" && updateForm('q', e.target.value, e.target.value)}\n ariaLabel=\"Search by name, email, or phone\"\n className=\"d-sm-block flex-md-fill mb-3 mb-md-0\"\n style={{minWidth: \"305px\"}}\n prependIcon=\"search\"\n />\n \n \n setSearchInput2(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && updateForm('q', e.target.value, e.target.value)}\n onKeyDown={(e) => e.key === \"Tab\" && updateForm('q', e.target.value, e.target.value)}\n ariaLabel=\"Search by name, email, or phone\"\n className=\"d-sm-block flex-md-fill mb-3 mb-md-0\"\n style={{minWidth: \"305px\"}}\n prependIcon=\"search\"\n />\n
\n {filtersToDisplay(selectedFilters, setForm, form).length > 0 && (\n \n updateTags(value)}\n />\n
\n \n updateForm(\"populations\", value, findLabel(populationOptions, value))}\n />\n
\n {consentFlipperEnabled && (\n <>\n \n setConsentType(value)}\n />\n
\n \n \n \n setForm({...form, consented_to: value, consent_type: consentType})}\n containerClassName={consentType ? \"\" : \"disabled-pointer\"}\n />\n \n \n
\n \n )}\n \n \n \n {user.date_of_birth} (age {user.age})\n {user.age < 18 && Minor}\n
\n {user.phone_formatted}
\n )}\n {user.email && (\n {user.email}
\n )}\n \n \n \n \n
\n - \n
- \n Patient Details\n \n
- \n
- \n Edit patient\n \n
- \n {test_group_user.has_archived_appointment && (\n
- \n View past appointments\n \n )}\n
{usersCount} results
\n {usersCount > 0 ? (\n \n No results found. Try changing your search criteria.\n
\n )}\n {modalOpen && (\n \n {formattedDate}\n setShowAllCard(!showAllCard)}\n >\n {showAllCard ? 'Hide' : 'Show'}\n \n
\n \n {formattedTime}, {props.caseReportHistory.assignedUser.fullName}\n
\n\n {props.caseReportHistory.tests\n .map((test) => test.testConfiguration?.displayName)\n .join(', ')}\n
\n {showAllCard && (\n\n Note\n
\n )}\n {props.caseReportHistory.caseReportNotes}
\n\n \n Remove\n \n setShowOverlay(true)}\n >\n View/Edit\n \n
\n \n \n Contact\n \n
\n {props.selectableTests.map((test) => (\n handleTestSelection(test)}\n >\n {test.testConfiguration?.displayName}\n \n ))}\n \n Notes \n setNotes(e.target.value)}\n />\n \n
\n \n \n \n \n
\n {formattedDate}
\n\n {formattedTime}, {props.caseReportHistory.assignedUser.fullName}\n
\n\n setSelectedCaseStatus(value)}\n placeholder=\"Select status\"\n />\n
\n Test results\n \n {props.selectableTests.map((test) => (\n
\n
\n \n );\n};\n","import React, { useState } from 'react';\nimport HighlightedDatePicker from '../../common/components/HighlightedDatePicker';\nimport AsyncSelect from '../../common/components/AsyncSelect';\n\nexport const FilterBar = ({\n location_id,\n location_options_url,\n form_url,\n start_day,\n month_capacities_url,\n edit_location_url\n}) => {\n const [date, setDate] = useState(start_day);\n const onDateChange = (dateObj) => setDate(dateObj.format('YYYY-MM-DD'));\n\n const redirectToCapacityPlanningUrl = (locationId) => {\n window.location.href = `/capacity_plannings/${locationId}?start_day=${start_day}`;\n };\n\n return (\n \n
\n \n
\n \n
\n \n \n
\n \n
\n | Group | \nBooked capacity | \nStandard capacity | \nAccess key capacity | \n
|---|---|---|---|
| \n | \n |||
| \n | \n {appointmentSlotGroup.test_group_appointments} | \n{appointmentSlotGroup.test_group_standard_capacity} | \n{appointmentSlotGroup.test_group_access_key_capacity} | \n
\n \n \n \n
\n );\n};\n","import React from 'react';\nimport StiFlow from './Sti/StiFlow';\nimport { ViralSurveillanceFlow } from './ViralSurveillance/ViralSurveillanceFlow';\n\nexport default function KitFlow({ kitProps, finishRegistrationProps }) {\n const params = new URLSearchParams(document.location.search);\n const FLOW =\n params.get('barcode')?.startsWith('PR-VS') ||\n params.get('id')?.startsWith('PR-VS') ||\n params.get('source') === 'viralsurveillance' ||\n params.get('source') === 'vsp'\n ? 'viral_surveillance'\n : 'sti';\n return (\n <>\n {FLOW === 'sti' && (\n \n window.open(instructionsLink())}\n >\n {t('public_test_groups.demo.download_instructions')}\n \n
\n \n \n {t('public_test_groups.demo.title')}
\n\n \n {\n window.location.href = `/test-instructions/quickvue?locale=${lang()}`;\n }}\n >\n {t('public_test_groups.demo.begin')}\n \n \n \n
\n