From 63f63714f0bb178db4bf9ad66396b4d17be5a2f4 Mon Sep 17 00:00:00 2001 From: Wallewdev Date: Sun, 21 Jul 2024 17:45:38 +0100 Subject: [PATCH] feature: Create and Implement the Help Center Page --- app/routes/help-center.tsx | 302 +++++++++++++++++++++++++++++++++++++ public/icons/arrow.png | Bin 0 -> 195 bytes public/icons/search.png | Bin 0 -> 523 bytes 3 files changed, 302 insertions(+) create mode 100644 app/routes/help-center.tsx create mode 100644 public/icons/arrow.png create mode 100644 public/icons/search.png 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 0000000000000000000000000000000000000000..54132d97d7cfe001309952ed4abdf3ca6c8ac69a GIT binary patch literal 195 zcmeAS@N?(olHy`uVBq!ia0vp^AT}EZ8<70(0r%1aer?9eo`c7&i8E|4C#8@*_N5978G?OZyzT8XP!WFHhZ-*>{8Y728?C zS1Z=uiR2P(KEomZi1w%!LHrKLS(zFNG!=#BpB npTDQK2f536`~K9O^plx=ro_AJ>scoO?O^b9^>bP0l+XkKBQ8OZ literal 0 HcmV?d00001 diff --git a/public/icons/search.png b/public/icons/search.png new file mode 100644 index 0000000000000000000000000000000000000000..67198a9a37f83b1c5ca21b6986ecbb95873ebebc GIT binary patch literal 523 zcmV+m0`&cfP)G*o8_;tcV?UmMOIXzkv-eAei91 zH*B)(e6#as#!v^$b=_OjH0wOttJTUf3?t!rv|KKuFbo%mVvGZTM*-jo5D7{E)mSZD z-u>ZlI5-MwHk&O1eK}0#4w<99BsG9Nyrp5C?Ej_Ap)o!KaswpZ<z?CmvQR6-nM> zwdV8r%MPeot-eYL8j`3#jNr&|oHMyyxm=zAU&y{Gx@b)Xd63kQz*8IT+;q>>F9|jK zs-Q_iU?XDdTM&N5=1iSvKo)9K$rkiqTg!knRtoxnZmScGDr|wJx{5|pmaRoEY@$zA z5|dBvtIZd9C<-BITapv=l61wg#Ab{FZZi#npuYvl55ZHK>{6Oc zI+jLzC&90tVvM?+dFD|DIm~wU&d@d*4Ua`i6i9@>>E{c)EdXw^-UrlW_0j<@WkJ&Z z+(zm?=is$eg5Tke2#d=w54i1E&zzUaVW=FFJ~=iznF{*3pghyC