diff --git a/src/pages/faq-page/assets/call-icon.svg b/src/pages/faq-page/assets/call-icon.svg
deleted file mode 100644
index 68b7440c..00000000
--- a/src/pages/faq-page/assets/call-icon.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
\ No newline at end of file
diff --git a/src/pages/faq-page/config.json b/src/pages/faq-page/config.json
index 357b7172..7b5549d2 100644
--- a/src/pages/faq-page/config.json
+++ b/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",
diff --git a/src/pages/faq-page/index.module.css b/src/pages/faq-page/index.module.css
index 7e83bf54..6b6a618a 100644
--- a/src/pages/faq-page/index.module.css
+++ b/src/pages/faq-page/index.module.css
@@ -39,7 +39,3 @@
padding-bottom: 1vh;
}
-.callIconBox {
- height: 5vh;
- width: 5vh;
-}
diff --git a/src/pages/faq-page/index.test.tsx b/src/pages/faq-page/index.test.tsx
index 538348a7..24b61cf5 100644
--- a/src/pages/faq-page/index.test.tsx
+++ b/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();
- const textElement = getByText(config.component.title);
+ const textElement = getByText(component.title ?? "Faq");
expect(textElement).toBeInTheDocument();
});
test('displays "Contact description" text', () => {
const { getByText } = render();
- 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();
- 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();
- 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();
-
- const imageElement = getByAltText(alt);
- expect(imageElement).toBeInTheDocument();
- expect(imageElement).toHaveAttribute('src', src);
-});
-
});
diff --git a/src/pages/faq-page/index.tsx b/src/pages/faq-page/index.tsx
index 6e74f5f6..2af7de67 100644
--- a/src/pages/faq-page/index.tsx
+++ b/src/pages/faq-page/index.tsx
@@ -1,19 +1,24 @@
-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 (
<>
@@ -21,24 +26,30 @@ const FAQPage: React.FC = () => {
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- {config.component.title}
+ {component.title ?? "Faq"}
- {config?.component?.userManualText && (
+ {component?.userManualText && (
)}
- {config?.component?.contactText && (
+ {component?.contactText && (
- {config.component.contactDescriptionText}
+ {component.contactDescriptionText ?? "contact description"}
-
-
-
+
+
+
+
+
)}