fix(DEV-11506): prevent incorrect rendering of images in <FileViewer /> 😶‍🌫️

[radist2s]

Problem

When an image was selected instead of a PDF for an invoice, the PDFObject.embed() function was still being called, even though the PDF container wasn't rendered. This caused the entire page content to be replaced with the image inside an iframe, as the ref wasn't properly set.

Solution

We've refactored the FileViewer component to correctly handle different file types, particularly distinguishing between PDFs and images.

Changes

• Added a check to prevent PDFObject.embed() calls for non-PDF files
• Implemented separate rendering logic for PDFs and images:
  • For PDFs: Use PDFFileViewer component
  • For images: Render a simple <img /> tag with appropriate styling

Impact

• Prevents unintended page content replacement when viewing non-PDF files
• Simplifies the codebase by removing redundant conditional checks

Testing

Please test the following scenarios:

1. Uploading and viewing PDF files for invoices
2. Uploading and viewing image files for invoices
3. Switching between PDF invoice and image file invoice to ensure correct rendering
4. Checking that the page layout remains intact when viewing non-PDF files

[changeset-bot]

🦋 Changeset detected

Latest commit: 84ebfff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@monite/sdk-react	Patch
@team-monite/sdk-demo	Patch
@monite/sdk-drop-in	Patch
@monite/sdk-api	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR