Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 2x 2x 2x 2x 2x 2x | import { Trans, useTranslation } from 'next-i18next'
import { ServiceLevelCode } from '../../lib/types'
import { formatDate } from '../../lib/utils/dates'
import { StatusResultProps } from '../../pages/status'
import ActionButton from '../ActionButton'
import AlertBlock from '../AlertBlock'
import ExternalLink from '../ExternalLink'
import Timeline from '../Timeline'
export const CheckStatusPrinting = ({
displayData,
checkAnotherHandler,
}: StatusResultProps) => {
const { t, i18n } = useTranslation(['status', 'timeline'])
const { receivedDate, serviceLevel, timelineExists, timelineData } =
displayData
const serviceDays = serviceLevel === ServiceLevelCode.TEN_DAYS ? '10' : '20'
const formattedDate = formatDate(receivedDate, i18n.language)
return (
<div id="response-result">
<AlertBlock page="status-ready-pickup" />
<h1 id="main-header" data-testid="printing" className="h1" tabIndex={-1}>
{t('status:printing.in-printing')}
</h1>
<div className="flex flex-col sm:flex-row">
<div className="max-w-prose">
<p>{t('status:printing.reviewed-printing')}</p>
{serviceLevel === ServiceLevelCode.TEN_DAYS && (
<p>{t('status:printing.requested-urgent')}</p>
)}
{timelineExists && (
<div className="flex w-full justify-center sm:hidden">
<Timeline entries={timelineData} />
</div>
)}
<h2
id="service-standards-header"
data-testid="service-standards"
className="h2"
>
{t('status:printing.service-standards.header')}
</h2>
<p>
<Trans
i18nKey="printing.service-standards.we-received"
ns="status"
tOptions={{ formattedDate, serviceDays }}
components={{
Link: (
<ExternalLink
href={t(
'status:status-check-contact.service-standard-href',
)}
/>
),
}}
/>
</p>
<p>{t('status:printing.service-standards.dont-meet')}</p>
<div className="mt-8">
<ActionButton
onClick={checkAnotherHandler}
text={t('status:check-another')}
style="primary"
/>
</div>
</div>
{timelineExists && (
<div className="hidden w-full justify-center sm:flex">
<div className="-mt-6">
<Timeline entries={timelineData} />
</div>
</div>
)}
</div>
</div>
)
}
export default CheckStatusPrinting
|