Merge pull request #586 from Rushikesh-Sonawane99/release-1.1.0

Issue #PS-000 chore: Updated dynamic values for hidden fields with deviceInfo of user and added support icon
tekdi · Jan 9, 2025 · fa65d57 · fa65d57
2 parents 4428364 + 416dcda
commit fa65d57
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -9,6 +9,8 @@ export const eventDaysLimit: number = 7;
 export const toastAutoHideDuration: number = 5000; // 5 seconds
 export const idealTimeForSession: string = '120';
 export const timeZone: string = 'Asia/Kolkata';
+export const jotFormId = '250065095006449';
+
 export const dropoutReasons = [
   {
     label: 'UNABLE_TO_COPE_WITH_STUDIES',

diff --git a/src/assets/images/Support.svg b/src/assets/images/Support.svg
diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -30,6 +30,7 @@ import { accessControl, TENANT_DATA } from '../../app.config';
 import config from '../../config.json';
 import { isEliminatedFromBuild } from '../../featureEliminationUtil';
 import board from '../assets/images/Board.svg';
+import support from '../assets/images/Support.svg';
 import checkBook from '../assets/images/checkbook.svg';
 import { useDirection } from '../hooks/useDirection';
 
@@ -601,7 +602,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                 marginTop: '15px',
               }}
               startIcon={
-                <Image src={board} alt="feedback-icon" width={24} height={24} />
+                <Image src={support} alt="support-icon" width={24} height={24} />
               }
               onClick={() => {
                 router.push(`/support-request`);

diff --git a/src/pages/support-request.tsx b/src/pages/support-request.tsx
@@ -4,15 +4,78 @@ import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useEffect, useState } from 'react';
+import { jotFormId } from '../../app.config';
+
+type QueryParams = {
+  fullName: string;
+  userName: string;
+  userid: string;
+  email: string;
+  deviceInfo?: string;
+};
 
 const SupportRequest = () => {
   const { t } = useTranslation();
-  const queryParams = {
-    fullName: 'JohnDoe',
-    username: 'JohnD',
-    userid: 'JohnDoe123',
-    email: '[email protected]',
-  };
+  const [queryParams, setQueryParams] = useState<QueryParams>({
+    fullName: '',
+    userName: '',
+    userid: '',
+    email: '',
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
+      const name = localStorage.getItem('userName') || '';
+      const loginUserName = localStorage.getItem('userIdName') || '';
+      const userId = localStorage.getItem('userId') || '';
+      const email = localStorage.getItem('userEmail') || '';
+
+      const { userAgent, language, platform, cookieEnabled, onLine, hardwareConcurrency } = navigator;
+      const screenResolution = `${window.screen.width}x${window.screen.height}`;
+      const viewportSize = `${window.innerWidth}x${window.innerHeight}`;
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const screenOrientation = screen.orientation?.type || 'Unknown';
+      const referrer = document.referrer || 'Direct Access';
+
+      // Detect device type
+      const deviceType = /Mobile|Android|iPhone|iPad/i.test(userAgent) ? 'Mobile' : /Tablet/i.test(userAgent) ? 'Tablet' : 'Desktop';
+
+      // Extract browser name and version
+      const browserMatch = userAgent.match(/(firefox|msie|trident|chrome|safari|edge|opr|edg(?=\/))\/?\s*(\d+)/i) || [];
+      const browser = browserMatch[1] || 'Unknown';
+      const browserVersion = browserMatch[2] || 'Unknown';
+
+      // Access deviceMemory safely
+      const deviceMemory = (navigator as any).deviceMemory || 'Unknown';
+
+      // Format the device-related data into a string
+      const deviceInfo = `
+        Browser: ${browser} ${browserVersion}
+        OS: ${platform}
+        Screen Resolution: ${screenResolution}
+        Language: ${language}
+        Cookies Enabled: ${cookieEnabled}
+        Online Status: ${onLine ? 'Online' : 'Offline'}
+        Device Type: ${deviceType}
+        Hardware Concurrency: ${hardwareConcurrency || 'Unknown'}
+        Device Memory: ${deviceMemory}
+        Time Zone: ${timeZone}
+        Screen Orientation: ${screenOrientation}
+        Viewport Size: ${viewportSize}
+        Referrer: ${referrer}
+      `.trim();
+
+      setQueryParams({
+        fullName: name,
+        userName: loginUserName,
+        userid: userId,
+        email,
+        deviceInfo,
+      });
+    }
+  }, []);
+
 
   return (
     <>
@@ -25,12 +88,12 @@ const SupportRequest = () => {
           {t('COMMON.SUBMIT_YOUR_REQUEST_FOR_ISSUES')}
         </Typography>
       </Box>
-      <JotFormEmbed formId="250065095006449" queryParams={queryParams} />
+      <JotFormEmbed formId={jotFormId} queryParams={queryParams} />
     </>
   );
 };
 
-export async function getStaticProps({ locale }: any) {
+export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['common'])),