diff --git a/app/routes/help-center.tsx b/app/routes/help-center.tsx new file mode 100644 index 00000000..51d9f813 --- /dev/null +++ b/app/routes/help-center.tsx @@ -0,0 +1,302 @@ +import type { MetaFunction } from "@remix-run/node"; +import { redirect } from "@remix-run/react"; +import React, { useEffect, useRef, useState } from "react"; + +import { Button } from "~/components/ui/button"; +import Footer from "~/components/ui/footer"; +import Header from "~/components/ui/header"; + +export const meta: MetaFunction = () => { + return [ + { title: "Help Center" }, + { name: "description", content: "How can we help You?" }, + ]; +}; + +export const topics = [ + { + topic: "What is EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "How does EcoClean work?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "What are the key features of EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "Who can benefit from using EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "What are the system requirements for EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "How do I use EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "How do I store EcoClean?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "How much does EcoClean cost?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + topic: "Are there any discounts available?", + ans: "Yes. It adheres to the WAI-ARIA design pattern.", + }, +]; + +export const questtions = [ + { + ques: "What payment methods do you accept?", + ans: "Lorem ipsum dolor sit amet consectetur adipisicing elit.", + }, + { + ques: "Is there a discount for annual subscriptions?", + ans: "Lorem ipsum dolor sit amet consectetur adipisicing elit.", + }, + { + ques: "Do you offer a free trial?", + ans: "Yes, we offer a 14-day free trial for new users. You can explore all the features of our premium plan without any cost during this period.", + }, +]; + +export default function HelpCenter() { + const [query, setQuery] = useState(""); + const [openTopics, setOpenTopics] = useState<{ [key: number]: boolean }>({}); + const [openQuestions, setOpenQuestions] = useState<{ + [key: number]: boolean; + }>({}); + const [showDropdown, setShowDropdown] = useState(false); + const dropdownReference = useRef(null); + + const handleInputChange = (event: React.ChangeEvent) => { + setQuery(event.target.value); + setShowDropdown(event.target.value.length > 0); + }; + + const handleTopicToggle = (index: number) => { + setOpenTopics((previous) => ({ + ...previous, + [index]: !previous[index], + })); + }; + + const handleQuestionToggle = (index: number) => { + setOpenQuestions((previous) => ({ + ...previous, + [index]: !previous[index], + })); + }; + + const handleKeyPressTopicToggle = ( + event: React.KeyboardEvent, + index: number, + ) => { + if (event.key === "Enter" || event.key === " ") { + handleTopicToggle(index); + } + }; + + const handleKeyPressQuestionToggle = ( + event: React.KeyboardEvent, + index: number, + ) => { + if (event.key === "Enter" || event.key === " ") { + handleQuestionToggle(index); + } + }; + + const filteredTopics = topics.filter((topic) => + topic.topic.toLowerCase().includes(query.toLowerCase()), + ); + + const handleDropdownClick = (topicIndex: number) => { + setQuery(topics[topicIndex].topic); + setShowDropdown(false); + setOpenTopics({ [topicIndex]: true }); + }; + + const handleDropdownKeyPress = ( + event: React.KeyboardEvent, + topicIndex: number, + ) => { + if (event.key === "Enter" || event.key === " ") { + handleDropdownClick(topicIndex); + } + }; + + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownReference.current && + !dropdownReference.current.contains(event.target as Node) + ) { + setShowDropdown(false); + } + }; + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( +
+ {/* ======> import Header component <====== */} +
+ +
+

+ Help Center +

+

+ How can we help You? +

+

+ Find advice and answers from our support team +

+
+ + search-icon + {showDropdown && ( +
+ {filteredTopics.length > 0 ? ( + filteredTopics.map((topic, index) => ( +
handleDropdownClick(index)} + onKeyDown={(event) => handleDropdownKeyPress(event, index)} + > + {topic.topic} +
+ )) + ) : ( +
No topics found
+ )} +
+ )} +
+
+ +
+

+ Browse by topics +

+
+ {filteredTopics.length > 0 && + filteredTopics.map((topic, index) => ( +
handleTopicToggle(index)} + onKeyDown={(event) => handleKeyPressTopicToggle(event, index)} + > +
+

+ {topic.topic} +

+ arrow +
+ {openTopics[index] &&

{topic.ans}

} +
+ ))} +
+
+ +
+
+
+

+ Frequently Asked Questions +

+

+ We couldn’t answer your question? +

+ +
+ +
+ {questtions.map((ques, ind) => ( +
handleQuestionToggle(ind)} + onKeyDown={(event) => handleKeyPressQuestionToggle(event, ind)} + > +
+

+ {ques.ques} +

+ arrow +
+ {openQuestions[ind] &&

{ques.ans}

} +
+ ))} +
+
+ +
+

+ Didn’t find an answer? +

+

+ Contact us for more inquires and information about our services. +

+ +
+
+ + {/* ======> import Footer component <====== */} +
+ ); +} diff --git a/public/icons/arrow.png b/public/icons/arrow.png new file mode 100644 index 00000000..54132d97 Binary files /dev/null and b/public/icons/arrow.png differ diff --git a/public/icons/search.png b/public/icons/search.png new file mode 100644 index 00000000..67198a9a Binary files /dev/null and b/public/icons/search.png differ