fix: import pdf component conditionally in supported browsers (#9071)

* fix: render pdf component conditionally in supported browsers

* refactor: added additonal comments

* feat: conditional render of widget in view page

* refactor: removed unused packages

* refactor: removed unused packages

* refactor: removed unused code

* refactor: remove dead code

* refactor: minor formatting

* refactor: minor formatting

* feat: hide pdf in edit as well for older browsers

* chore: minor release version bump

.version

@@ -1 +1 @@
-2.32.3
+2.32.4

frontend/.version

@@ -1 +1 @@
-2.32.3
+2.32.4

frontend/src/Editor/Box.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useContext, useRef, memo, useCallback } from 'react';
+import React, { useEffect, useState, useMemo, useContext, memo } from 'react';
 import { Button } from './Components/Button';
 import { Image } from './Components/Image';
 import { Text } from './Components/Text';
@@ -42,7 +42,6 @@ import { Html } from './Components/Html';
 import { ButtonGroup } from './Components/ButtonGroup';
 import { CustomComponent } from './Components/CustomComponent/CustomComponent';
 import { VerticalDivider } from './Components/verticalDivider';
-import { PDF } from './Components/PDF';
 import { ColorPicker } from './Components/ColorPicker';
 import { KanbanBoard } from './Components/KanbanBoard/KanbanBoard';
 import { Kanban } from './Components/Kanban/Kanban';
@@ -68,6 +67,7 @@ import { EditorContext } from '@/Editor/Context/EditorContextWrapper';
 import { useTranslation } from 'react-i18next';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppInfo } from '@/_stores/appDataStore';
+import { isPDFSupported } from '@/_stores/utils';
 
 export const AllComponents = {
   Button,
@@ -112,7 +112,6 @@ export const AllComponents = {
   ButtonGroup,
   CustomComponent,
   VerticalDivider,
-  PDF,
   ColorPicker,
   KanbanBoard,
   Kanban,
@@ -124,6 +123,14 @@ export const AllComponents = {
   BoundedBox,
 };
 
+/**
+ * Conditionally importing PDF component since importing it breaks app in older versions of browsers.
+ * refer: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#compatibility
+ **/
+if (isPDFSupported()) {
+  AllComponents.PDF = await import('./Components/PDF').then((module) => module.PDF);
+}
+
 export const Box = memo(
   ({
     id,
@@ -281,6 +288,9 @@ export const Box = memo(
         ...{ validationObject: component.definition.validation, currentState },
         customResolveObjects: customResolvables,
       });
+
+    const shouldHideWidget = component.component === 'PDF' && !isPDFSupported();
+
     return (
       <OverlayTrigger
         placement={inCanvas ? 'auto' : 'top'}
@@ -315,7 +325,7 @@ export const Box = memo(
           }}
           role={preview ? 'BoxPreview' : 'Box'}
         >
-          {!resetComponent ? (
+          {!resetComponent && !shouldHideWidget ? (
             <ComponentToRender
               onComponentClick={onComponentClick}
               onComponentOptionChanged={onComponentOptionChanged}

frontend/src/Editor/Container.jsx

@@ -22,6 +22,8 @@ import { shallow } from 'zustand/shallow';
 import _ from 'lodash';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
+import { isPDFSupported } from '@/_stores/utils';
+import toast from 'react-hot-toast';
 
 const NO_OF_GRIDS = 43;
 
@@ -256,6 +258,13 @@ export const Container = ({
           return;
         }
 
+        if (item.component.component === 'PDF' && !isPDFSupported()) {
+          toast.error(
+            'PDF is not supported in this version of browser. We recommend upgrading to the latest version for full support.'
+          );
+          return;
+        }
+
         if (item.name === 'comment') {
           const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
           const offsetFromTopOfWindow = canvasBoundingRect.top;

frontend/src/Editor/SubContainer.jsx

@@ -18,6 +18,7 @@ import { useMounted } from '@/_hooks/use-mount';
 import { useEditorStore } from '@/_stores/editorStore';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
+import { isPDFSupported } from '@/_stores/utils';
 
 const NO_OF_GRIDS = 43;
 
@@ -308,6 +309,13 @@ export const SubContainer = ({
     () => ({
       accept: ItemTypes.BOX,
       drop(item, monitor) {
+        if (item.component.component === 'PDF' && !isPDFSupported()) {
+          toast.error(
+            'PDF is not supported in this version of browser. We recommend upgrading to the latest version for full support.'
+          );
+          return;
+        }
+
         const componentMeta = _.cloneDeep(
           componentTypes.find((component) => component.component === item.component.component)
         );

frontend/src/_stores/utils.js

@@ -329,3 +329,68 @@ function toRemoveExposedvariablesFromComponentDiff(object) {
 
   return copy;
 }
+
+export function isPDFSupported() {
+  const browser = getBrowserUserAgent();
+
+  if (!browser) {
+    return true;
+  }
+
+  const isChrome = browser.name === 'Chrome' && browser.major >= 92;
+  const isEdge = browser.name === 'Edge' && browser.major >= 92;
+  const isSafari = browser.name === 'Safari' && browser.major >= 15 && browser.minor >= 4; // Handle minor version check for Safari
+  const isFirefox = browser.name === 'Firefox' && browser.major >= 90;
+
+  console.log('browser--', browser, isChrome || isEdge || isSafari || isFirefox);
+
+  return isChrome || isEdge || isSafari || isFirefox;
+}
+
+export function getBrowserUserAgent(userAgent) {
+  var regexps = {
+      Chrome: [/Chrome\/(\S+)/],
+      Firefox: [/Firefox\/(\S+)/],
+      MSIE: [/MSIE (\S+);/],
+      Opera: [/Opera\/.*?Version\/(\S+)/ /* Opera 10 */, /Opera\/(\S+)/ /* Opera 9 and older */],
+      Safari: [/Version\/(\S+).*?Safari\//],
+    },
+    re,
+    m,
+    browser,
+    version;
+
+  if (userAgent === undefined) userAgent = navigator.userAgent;
+
+  for (browser in regexps)
+    while ((re = regexps[browser].shift()))
+      if ((m = userAgent.match(re))) {
+        version = m[1].match(new RegExp('[^.]+(?:.[^.]+){0,1}'))[0];
+        const { major, minor } = extractVersion(version);
+        return {
+          name: browser,
+          major,
+          minor,
+        };
+      }
+
+  return null;
+}
+
+function extractVersion(versionStr) {
+  // Split the string by "."
+  const parts = versionStr.split('.');
+
+  // Check for valid input
+  if (parts.length === 0 || parts.some((part) => isNaN(part))) {
+    return { major: null, minor: null };
+  }
+
+  // Extract major version
+  const major = parseInt(parts[0], 10);
+
+  // Handle minor version (default to 0)
+  const minor = parts.length > 1 ? parseInt(parts[1], 10) : 0;
+
+  return { major, minor };
+}

server/.version

@@ -1 +1 @@
-2.32.3
+2.32.4