Merge pull request #2630 from tekdi/release-prod-fix

Release prod fix to admin qa

Author: rushi-tekdi

apps/learner-web-app/src/components/Content/Player.tsx

@@ -57,6 +57,7 @@ const App = ({
   const [breadCrumbs, setBreadCrumbs] = useState<any>();
   const [isShowMoreContent, setIsShowMoreContent] = useState(false);
   const [mimeType, setMemetype] = useState('');
+  const [isVideo, setIsVideo] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
   const [showJotFormModal, setShowJotFormModal] = useState(false);
@@ -66,6 +67,31 @@ const App = ({
     mimeType: string;
   } | null>(null);
 
+  const [isPortrait, setIsPortrait] = useState(false);
+
+  useEffect(() => {
+    setIsVideo(mimeType=='video/mp4' || mimeType=='video/webm');
+  }, [mimeType]);
+
+  // Check if device is in portrait mode (width < height)
+  useEffect(() => {
+    const checkOrientation = () => {
+      setIsPortrait(window.innerWidth < window.innerHeight);
+    };
+
+    // Check on mount
+    checkOrientation();
+
+    // Listen for resize and orientation changes
+    window.addEventListener('resize', checkOrientation);
+    window.addEventListener('orientationchange', checkOrientation);
+
+    return () => {
+      window.removeEventListener('resize', checkOrientation);
+      window.removeEventListener('orientationchange', checkOrientation);
+    };
+  }, []);
+
   let activeLink = null;
   if (typeof window !== 'undefined') {
     const searchParams = new URLSearchParams(window.location.search);
@@ -403,9 +429,13 @@ const App = ({
           unitId={unitId}
           mimeType={mimeType}
           {..._config?.player}
+          isPortrait={isPortrait}
+          isVideo={isVideo}
         />
         {item?.content?.artifactUrl &&
+          
           isDownloadableMimeType(item?.content?.mimeType || mimeType) &&
+          (!isPortrait || (isVideo && !isPortrait)) &&
           isDownloadContentEnabled() && (
             <Box
               sx={{
@@ -457,7 +487,8 @@ const App = ({
 
       <Grid
         sx={{
-          display: isShowMoreContent ? 'flex' : 'none',
+          display: isShowMoreContent && (!isPortrait || (isVideo && !isPortrait)) ? 'flex' : 'none',
+
           flexDirection: 'column',
           flex: { xs: 1, sm: 1, md: 9 },
         }}
@@ -615,13 +646,14 @@ const PlayerBox = ({
   trackable,
   isShowMoreContent,
   mimeType,
+  isPortrait,
+  isVideo
 }: any) => {
   const router = useRouter();
   const { t } = useTranslation();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [play, setPlay] = useState(false);
-  const [isPortrait, setIsPortrait] = useState(false);
 
   // Determine aspectRatio based on mimeType and mobile mode
   const getAspectRatio = () => {
@@ -631,25 +663,6 @@ const PlayerBox = ({
     return '16/9';
   };
 
-  // Check if device is in portrait mode (width < height)
-  useEffect(() => {
-    const checkOrientation = () => {
-      setIsPortrait(window.innerWidth < window.innerHeight);
-    };
-
-    // Check on mount
-    checkOrientation();
-
-    // Listen for resize and orientation changes
-    window.addEventListener('resize', checkOrientation);
-    window.addEventListener('orientationchange', checkOrientation);
-
-    return () => {
-      window.removeEventListener('resize', checkOrientation);
-      window.removeEventListener('orientationchange', checkOrientation);
-    };
-  }, []);
-
   useEffect(() => {
     if (checkAuth() || userIdLocalstorageName) {
       setPlay(true);
@@ -716,9 +729,7 @@ const PlayerBox = ({
             width: isShowMoreContent
               ? '100%'
               : { xs: '100%', sm: '100%', md: '90%', lg: '80%', xl: '70%' },
-            p:0,
-            ml:-10,
-            mr:-5,
+            ...(isPortrait && isVideo ? { p:0, ml:-10, mr:-5 } : {}),
           }}
         >
           <iframe
@@ -741,8 +752,8 @@ const PlayerBox = ({
               aspectRatio: getAspectRatio(),
             }}
             allowFullScreen
-            width={"110%"}
-            height={isPortrait ? '300%' : '100%'}
+            width={isPortrait && isVideo ? "110%" : "100%"}
+            height={isPortrait && isVideo ? '300%' : '100%'}
             title="Embedded Localhost"
             allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
             frameBorder="0"

apps/learner-web-app/src/components/EditProfile/EditProfile.tsx

@@ -143,6 +143,7 @@ const EditProfile = ({ completeProfile, enrolledProgram, uponEnrollCompletion }:
         delete responseFormForEnroll?.schema?.properties?.district;
         delete responseFormForEnroll?.schema?.properties?.block;
         delete responseFormForEnroll?.schema?.properties?.village;
+        delete responseFormForEnroll?.schema?.properties?.consent_file;
         responseFormForEnroll?.schema?.required?.pop('batch');
 
         const responseFormCopy = JSON.parse(JSON.stringify(responseForm));

apps/learner-web-app/src/components/UserProfileCard/UserProfileCard.tsx

@@ -9,17 +9,24 @@ import {
   Menu,
   MenuItem,
   IconButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import settingImage from '../../../public/images/settings.png';
 import Image from 'next/image';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { useRouter } from 'next/navigation';
 import { getUserDetails } from '@learner/utils/API/userService';
 import { Loader, useTranslation } from '@shared-lib';
 import { isUnderEighteen, toPascalCase } from '@learner/utils/helper';
 import { fetchForm } from '@shared-lib-v2/DynamicForm/components/DynamicFormCallback';
 import { FormContext } from '@shared-lib-v2/DynamicForm/components/DynamicFormConstant';
+import DocumentViewer from '@shared-lib-v2/DynamicForm/components/DocumentViewer/DocumentViewer';
 
 // Helper function to get field value from userData based on schema
 const getFieldValue = (fieldName: string, fieldSchema: Record<string, unknown>, userData: Record<string, unknown>, customFields: Array<Record<string, unknown>> = []) => {
@@ -104,6 +111,9 @@ const UserProfileCard = ({ maxWidth = '600px' }) => {
   const [formSchema, setFormSchema] = useState<Record<string, unknown> | null>(null); // Form schema state
   const { t } = useTranslation();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [previewTitle, setPreviewTitle] = useState<string>('');
 
   const storedConfig =
     typeof window !== 'undefined'
@@ -184,6 +194,39 @@ const UserProfileCard = ({ maxWidth = '600px' }) => {
     setAnchorEl(null);
   };
 
+  const handlePreview = (url: string, title: string) => {
+    setPreviewUrl(url);
+    setPreviewTitle(title);
+    setIsPreviewOpen(true);
+  };
+
+  const handleClosePreview = () => {
+    setIsPreviewOpen(false);
+    setPreviewUrl(null);
+    setPreviewTitle('');
+  };
+
+  // Helper function to check if a field is a file field
+  const isFileField = (fieldSchema: Record<string, unknown>): boolean => {
+    return (
+      fieldSchema?.field_type === 'file_upload' ||
+      fieldSchema?.field_type === 'file' ||
+      fieldSchema?.type === 'array' && (fieldSchema?.items as Record<string, unknown>)?.type === 'string' && 
+      ((fieldSchema?.items as Record<string, unknown>)?.format === 'data-url' || (fieldSchema?.items as Record<string, unknown>)?.format === 'uri')
+    );
+  };
+
+  // Helper function to check if a value is a valid URL
+  const isValidUrl = (value: unknown): boolean => {
+    if (typeof value !== 'string') return false;
+    try {
+      const url = new URL(value);
+      return url.protocol === 'http:' || url.protocol === 'https:';
+    } catch {
+      return false;
+    }
+  };
+
   const handleOpen = (option: string) => {
     console.log(option);
     if (option === t('LEARNER_APP.USER_PROFILE_CARD.EDIT_PROFILE')) {
@@ -564,13 +607,46 @@ const UserProfileCard = ({ maxWidth = '600px' }) => {
                 {otherSectionFields.map((field) => {
                   const fieldTitle = (field.schema.title as string) || field.name;
                   const labelKey = `FORM.${fieldTitle}`;
+                  const isFile = isFileField(field.schema);
+                  const hasValidUrl = isValidUrl(field.rawValue);
 
                   return (
                     <Grid item xs={6} key={field.name}>
                       <Typography sx={labelStyle}>
                         {t(labelKey, { defaultValue: toPascalCase(String(fieldTitle).replace(/_/g, ' ')) })}
                       </Typography>
-                      <Typography sx={valueStyle}>{t(`FORM.${String(field.value).toUpperCase()}`, { defaultValue: toPascalCase(String(field.value)) })}</Typography>
+                      {isFile && hasValidUrl ? (
+                        <Box 
+                          sx={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            gap: 0.5,
+                            cursor: 'pointer',
+                            '&:hover': {
+                              '& .view-text': {
+                                textDecoration: 'underline',
+                              }
+                            }
+                          }}
+                          onClick={() => handlePreview(String(field.rawValue), fieldTitle)}
+                        >
+                          <VisibilityIcon sx={{ fontSize: '1rem', color: 'primary.main' }} />
+                          <Typography 
+                            className="view-text"
+                            sx={{ 
+                              ...valueStyle, 
+                              color: 'primary.main',
+                              fontWeight: 500
+                            }}
+                          >
+                            {t('VIEW_FILE', { defaultValue: 'View File' })}
+                          </Typography>
+                        </Box>
+                      ) : (
+                        <Typography sx={valueStyle}>
+                          {t(`FORM.${String(field.value).toUpperCase()}`, { defaultValue: toPascalCase(String(field.value)) })}
+                        </Typography>
+                      )}
                     </Grid>
                   );
                 })}
@@ -615,6 +691,56 @@ const UserProfileCard = ({ maxWidth = '600px' }) => {
       >
         Open PDF
       </a> */}
+
+      {/* File Preview Dialog */}
+      <Dialog
+        open={isPreviewOpen}
+        onClose={handleClosePreview}
+        maxWidth="lg"
+        fullWidth
+        PaperProps={{
+          sx: {
+            height: '90vh',
+            maxHeight: '90vh',
+          },
+        }}
+      >
+        <DialogTitle>
+          {t('FILE_PREVIEW', { defaultValue: 'File Preview' })} - {t(`FORM.${previewTitle}`, { defaultValue: toPascalCase(String(previewTitle).replace(/_/g, ' ')) })}
+        </DialogTitle>
+        <DialogContent
+          sx={{
+            p: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          {previewUrl && (
+            <DocumentViewer
+              url={previewUrl}
+              width="100%"
+              height="100%"
+              showError={true}
+              showDownloadButton={false}
+            />
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClosePreview}>{t('COMMON.CLOSE', { defaultValue: 'Close' })}</Button>
+          {/* {previewUrl && (
+            <Button
+              variant="contained"
+              href={previewUrl}
+              download
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('COMMON.DOWNLOAD', { defaultValue: 'Download' })}
+            </Button> */}
+          
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };

apps/teachers/public/locales/en/common.json

@@ -52,6 +52,9 @@
     "CLOSE": "Close",
     "CANCEL": "Cancel",
     "OK": "OK",
+    "VIEW_FILE": "View File",
+    "FILE_PREVIEW": "File Preview",
+    "DOWNLOAD": "Download",
     "FROM_TO_DATE": "From - To dates",
     "REMOVE": "Remove",
     "SEND_REQUEST": "Send Request",

libs/shared-lib-v2/src/DynamicForm/components/DocumentViewer/DocumentViewer.tsx

@@ -31,13 +31,15 @@ interface DocumentViewerProps {
   width?: string | number;
   height?: string | number;
   showError?: boolean;
+  showDownloadButton?: boolean;
 }
 
 const DocumentViewer: React.FC<DocumentViewerProps> = ({
   url,
   width = '100%',
   height = '600px',
   showError = true,
+  showDownloadButton = true,
 }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -626,16 +628,18 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
               </>
             )}
           </Box>
-          <IconButton
-            size="small"
-            href={url}
-            download
-            target="_blank"
-            rel="noopener noreferrer"
-            title="Download"
-          >
-            <Download />
-          </IconButton>
+          {showDownloadButton && (
+            <IconButton
+              size="small"
+              href={url}
+              download
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Download"
+            >
+              <Download />
+            </IconButton>
+          )}
         </Box>
       )}