Merge pull request #42 from SamagraX-Stencil/feat/faq-molecule

faq molecule changes

src/pages/faq-page/config.json

@@ -1,14 +1,4 @@
 {
-  "theme": {
-    "primaryColor": {
-      "allowOverride": true,
-      "value": "#219653"
-    },
-    "secondaryColor": {
-      "allowOverride": true,
-      "value": "#000000"
-    }
-  },
   "component": {
       "allowOverride": false,
       "title": "FAQs",

src/pages/faq-page/index.module.css

@@ -39,7 +39,3 @@
   padding-bottom: 1vh;
 }
 
-.callIconBox {
-  height: 5vh;
-  width: 5vh;
-}

src/pages/faq-page/index.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import FAQPage from './index';
-import config from './config.json';
+import {component} from './config.json';
+import { vi } from 'vitest';
 
 
 describe('FAQ component', () => {
@@ -11,37 +12,37 @@ describe('FAQ component', () => {
 
   test('displays "FAQ Title" text', () => {
     const { getByText } = render(<FAQPage />);
-    const textElement = getByText(config.component.title);
+    const textElement = getByText(component.title ?? "Faq");
     expect(textElement).toBeInTheDocument();
   });
 
   test('displays "Contact description" text', () => {
     const { getByText } = render(<FAQPage />);
-    const textElement = getByText(config.component.contactDescriptionText);
+    const textElement = getByText(component.contactDescriptionText ?? "contact description");
     expect(textElement).toBeInTheDocument();
   });
 
   test('renders contact button correctly', () => {
+    const consoleSpy = vi.spyOn(console, 'log');
     render(<FAQPage />);
-    const buttonElement = screen.getByText(config.component.contactText);
-    expect(buttonElement).toBeInTheDocument();
+    const buttonElement = screen.getByText(component.contactText ?? "Contact User");
+
+    // Simulate a button click
+  fireEvent.click(buttonElement);
+
+  // Expect the console.log to be called with the expected value
+  expect(consoleSpy).toHaveBeenCalledWith(component.contactText ?? "Contact User");
   });
 
+
   test('renders Manual User button correctly', () => {
+    const consoleSpy = vi.spyOn(console, 'log');
     render(<FAQPage />);
-    const buttonElement = screen.getByText(config.component.userManualText);
-    expect(buttonElement).toBeInTheDocument();
+    const buttonElement = screen.getByText(component.userManualText ?? "User Manual");
+    fireEvent.click(buttonElement);
+
+  // Expect the console.log to be called with the expected value
+  expect(consoleSpy).toHaveBeenCalledWith(component.userManualText ?? "User Manual");
   });
 
-  test('renders downtime image with correct src and alt text', () => {
-  const src = config.component.contactIcon;
-  const alt = 'callIcon';
-
-  const { getByAltText } = render(<FAQPage />);
-
-  const imageElement = getByAltText(alt);
-  expect(imageElement).toBeInTheDocument();
-  expect(imageElement).toHaveAttribute('src', src);
-});
-
 });

src/pages/faq-page/index.tsx

@@ -1,44 +1,55 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import styles from './index.module.css';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import contactIcon from './assets/call-icon.svg'
-import config from './config.json';
+import {component} from './config.json';
+import CallRoundedIcon from '@mui/icons-material/Call';
+import { useColorPalates } from '../../molecules/theme-provider/hooks';
+import { Avatar } from '@mui/material';
+
+
 
 const FAQPage: React.FC = () => {
-  const downloadPDFHandler=()=>{
-    console.log(config.component.userManualText)
-  }
+  const theme = useColorPalates(); 
+  const downloadPDFHandler=useCallback(()=>{
+    console.log(component.userManualText ?? "User Manual")
+  },[])
 
-  const handleContactClick=()=>{
-    console.log(config.component.contactText)
-  }
+  const handleContactClick=useCallback(()=>{
+    console.log(component.contactText ??"Contact User")
+  },[])
 
   return (
     <>
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"></meta>
       <Box className={styles.main}>
-          <Box m={3}><Typography variant='h4' sx={{fontWeight:"600", color: config.theme.primaryColor.value}}>{config.component.title}</Typography></Box>
+          <Box m={3}><Typography variant='h4' sx={{fontWeight:"600", color: theme?.primary?.main}}>{component.title ?? "Faq"}</Typography></Box>
           <Box>
-            {config?.component?.userManualText && (
+            {component?.userManualText && (
               <Box className={styles.manualButtons} m={3}>
                 <Button
                   onClick={downloadPDFHandler}
-                  variant='contained' sx={{textTransform:'none', backgroundColor:config.theme.primaryColor.value, "&:hover":{backgroundColor:config.theme.primaryColor.value}}}>
-                  {config.component.userManualText}
+                  variant='contained' sx={{textTransform:'none', backgroundColor:theme?.primary?.main, "&:hover":{backgroundColor:theme?.primary?.main}}}>
+                  {component.userManualText ?? "User Manual"}
                 </Button>
               </Box>
             )}
-            {config?.component?.contactText && (
+            {component?.contactText && (
               <Box className={styles.dialerBox} m={3}>
-                <Box p={1.5}><Typography variant='body1' sx={{fontWeight:"bold"}}>{config.component.contactDescriptionText}</Typography>
+                <Box p={1.5}><Typography variant='body1' sx={{fontWeight:"bold"}}>{component.contactDescriptionText ?? "contact description"}</Typography>
                 </Box>
-                <Box px={2} >
-                  <img src={config?.component?.contactIcon || contactIcon} alt="callIcon" className={styles.callIconBox}/>
-                  <Button variant='text' size="large" onClick={handleContactClick} sx={{textTransform:'none',color:config.theme.primaryColor.value, "&:hover":{color:config.theme.primaryColor.value}}}><Typography variant='h5' fontWeight={600}>{config.component.contactText}</Typography></Button>
+                <Box px={2} display={'flex'} alignItems={"center"}>
+                  <Box><Avatar
+            sx={{ bgcolor: theme.primary.main, width:"5vh",height:"5vh" }}
+            alt="Call Icon"
+           >
+           <CallRoundedIcon fontSize='medium'/>
+           </Avatar></Box>
+                  <Button variant='text' size="large" onClick={handleContactClick} sx={{textTransform:'none',color:theme?.primary?.main, "&:hover":{color:theme?.primary?.main}}}>
+                    <Typography variant='h5' fontWeight={600}>{component.contactText ?? "Contact User"}</Typography></Button>
                 </Box>
               </Box>
             )}