NEW - allow the review page (panviewer) to render a pdf

CHANGELOG.md

@@ -21,6 +21,7 @@ HTTP input now accepts `field('..')` references in the HTTP body definition.
   field(<page>.query-params).get('data.code')
 
 - **Removed support for following scopes**
+
   - `NATLSYSADMIN`
   - `DECLARE`
   - `VALIDATE`
@@ -37,6 +38,8 @@ HTTP input now accepts `field('..')` references in the HTTP body definition.
   - `RECORD_REGISTRATION_VERIFY_CERTIFIED_COPIES`
   - `PROFILE_UPDATE`
 
+  - Review page now supports PDF rendering when a PDF link is clicked allowing to verify the uploaded PDF
+
 ## [1.9.0](https://github.com/opencrvs/opencrvs-core/compare/v1.8.1...v1.9.0)
 
 ### Breaking changes

packages/client/src/tests/languages.json

@@ -1017,6 +1017,7 @@
         "review.modal.desc.submitConfirmation": "{completeDeclaration, select, true {This declaration will be sent to the Registrar for them to review.} false {This declaration will be sent to the Registrar for completion. Please inform the Informant that they will need to visit the office with the missing information and supporting documents.}}",
         "review.modal.title.registerConfirmation": "Register this {event}?",
         "review.modal.title.submitConfirmation": "{completeDeclaration, select, true {Send declaration for review?} false {Send incomplete declaration?}}",
+        "review.panViewer.openPDF": "Open PDF in new tab",
         "review.rejection.form": "Rejection form",
         "review.rejection.form.commentInstruction": "Please provide specific instructions of what needs to be updated by the health worker to correctly update the declaration",
         "review.rejection.form.commentLabel": "Comments or instructions for health worker to rectify declaration",

packages/commons/src/documents.ts

@@ -14,7 +14,7 @@ import { extendZodWithOpenApi } from 'zod-openapi'
 extendZodWithOpenApi(z)
 
 export const MINIO_REGEX =
-  /^https?:\/\/[^\/]+(.*)?\/[^\/?]+\.(jpg|png|jpeg|svg)(\?.*)?$/i
+  /^https?:\/\/[^\/]+(.*)?\/[^\/?]+\.(jpg|png|jpeg|pdf|svg)(\?.*)?$/i
 
 export function isBase64FileString(str: string) {
   if (str === '' || str.trim() === '') {

packages/components/src/DocumentViewer/components/PanViewer.tsx

@@ -9,8 +9,11 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import * as React from 'react'
+import { useIntl } from 'react-intl'
 import { useState } from 'react'
 import ReactPanZoom from './PanDraggable'
+import { Button } from '../../Button'
+import { Icon } from '../../Icon'
 import styled from 'styled-components'
 
 const StyledReactPanZoom = styled(ReactPanZoom)<{
@@ -39,9 +42,23 @@ interface IProps {
 }
 
 const PanViewer: React.FC<IProps> = ({ image, zoom, rotation }) => {
+  const intl = useIntl()
   const [dx] = useState(0)
   const [dy] = useState(0)
 
+  const isPdf = image.endsWith('.pdf')
+
+  const handleOpenPdf = async () => {
+    try {
+      const res = await fetch(image, { cache: 'default' })
+      const blob = await res.blob()
+      const blobUrl = URL.createObjectURL(blob)
+      window.open(blobUrl, '_blank')
+    } catch (err) {
+      console.error('Failed to open PDF', err)
+    }
+  }
+
   return (
     <React.Fragment>
       <StyledReactPanZoom
@@ -51,11 +68,29 @@ const PanViewer: React.FC<IProps> = ({ image, zoom, rotation }) => {
         rotation={rotation}
         key={dx}
       >
-        <img
-          src={image}
-          alt="Supporting Document"
-          style={{ transform: `rotate(${rotation}deg)` }}
-        />
+        {!isPdf ? (
+          <img
+            src={image}
+            alt="Supporting Document"
+            style={{ transform: `rotate(${rotation}deg)` }}
+          />
+        ) : (
+          <Button
+            id="preview_close"
+            aria-label="Preview PDF1970
+             in new tab"
+            size="medium"
+            type="positive"
+            onClick={handleOpenPdf}
+          >
+            {intl.formatMessage({
+              id: 'review.panViewer.openPDF',
+              defaultMessage: 'Open PDF in a new tab',
+              description: 'Label for open PDF button'
+            })}
+            <Icon name="ArrowSquareOut" size="medium" />
+          </Button>
+        )}
       </StyledReactPanZoom>
     </React.Fragment>
   )

packages/components/src/Icon/all-icons.ts

@@ -16,6 +16,7 @@ export {
   ArchiveTray,
   ArrowCircleDown,
   ArrowCounterClockwise,
+  ArrowSquareOut,
   ArrowLeft,
   ArrowRight,
   Buildings,