Merge pull request #877 from AlabiMuktar/feat/helppolicy

feat: update to privacypolicy and help center - team_bulldozer

src/app/(landing-routes)/help-center/page.tsx

@@ -2,23 +2,61 @@
 
 import { Search } from "lucide-react";
 import Link from "next/link";
+import { ChangeEvent, useEffect, useState } from "react";
 
 import { Input } from "~/components/common/input";
 import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion";
 import TopicsAccordions from "~/components/layouts/accordion/TopicAccordion";
 import { faqData } from "~/constants/faqsdata";
 
-//
+interface Topic {
+  id: string;
+  title: string;
+  content: string;
+}
 
 const HelpCenter = () => {
-  //
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await fetch(
+          "https://deployment.api-php.boilerplate.hng.tech/api/v1/help-center/topics",
+        );
+        if (!response.ok) {
+          return;
+        }
+        const data = await response.json();
+        setTopics(data.data.topics);
+      } catch (error) {
+        return `Error fetching topics: ${error}`;
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTopics();
+  }, []);
+
+  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
+
+  const filteredTopics = topics.filter(
+    (topic) =>
+      topic.title.toLowerCase().includes(searchValue.toLowerCase()) ||
+      topic.content.toLowerCase().includes(searchValue.toLowerCase()),
+  );
 
   return (
     <div className="w-full bg-background">
-      <div className="w-full bg-primary/10">
+      <div className="w-full bg-[#FAFAFA]">
         <div className="mx-auto w-full max-w-[1349px]">
           <section
-            className="flex w-full flex-col items-center justify-center gap-4 px-6 py-[24px] text-center md:px-0 md:py-24"
+            className="flex w-full flex-col items-center justify-center gap-4 px-6 py-[24px] text-center md:px-0"
             aria-labelledby="help-center-heading"
           >
             <span
@@ -27,7 +65,7 @@ const HelpCenter = () => {
             >
               Help Center
             </span>
-            <div className="flex h-48 flex-col items-center justify-center gap-5 self-stretch">
+            <div className="flex flex-col items-center justify-center gap-5">
               <h1
                 className="text-4xl font-bold text-neutral-950 md:text-5xl lg:text-6xl"
                 role="heading"
@@ -38,14 +76,16 @@ const HelpCenter = () => {
               <p className="text-center text-base font-normal text-neutral-600 md:text-lg">
                 Find advice and answers from our support team
               </p>
-              <div className="group flex h-[45px] w-full items-center justify-start overflow-hidden rounded-full border border-slate-300 bg-white px-2 py-[2px] text-xs font-normal leading-none text-neutral-600 focus-within:ring-1 focus-within:ring-primary focus-within:ring-offset-0 md:w-[600px]">
+              <div className="flex w-full items-center justify-start overflow-hidden rounded-full border border-slate-300 bg-white px-2 py-[2px] text-xs font-normal leading-none text-neutral-600 focus-within:ring-1 focus-within:ring-primary focus-within:ring-offset-0 md:w-[600px]">
                 <Search className="flex h-8 w-8 items-center justify-center p-1 text-muted-foreground" />
                 <Input
                   isButtonVisible={false}
-                  className="w-full border-none bg-transparent px-2 py-2 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                  className="w-full border-none bg-transparent py-[16px] pl-[20px] pr-[220px] text-[#0A0A0A] focus:border-none focus:outline-none"
                   type="text"
                   placeholder="Search on any topic..."
                   aria-label="Search on any topic"
+                  value={searchValue}
+                  onChange={handleSearch}
                 />
               </div>
             </div>
@@ -55,7 +95,7 @@ const HelpCenter = () => {
 
       <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
         <section
-          className="flex flex-col items-center justify-start gap-7 py-24"
+          className="flex flex-col items-center justify-start gap-7 py-[24px]"
           aria-labelledby="browse-topics-heading"
         >
           <span
@@ -65,7 +105,15 @@ const HelpCenter = () => {
             Browse by topics
           </span>
 
-          <TopicsAccordions />
+          {loading ? (
+            <p>Loading...</p>
+          ) : searchValue.trim() === "" ? (
+            <TopicsAccordions topics={topics} />
+          ) : filteredTopics.length > 0 ? (
+            <TopicsAccordions topics={filteredTopics} />
+          ) : (
+            <p>No results found.</p>
+          )}
         </section>
 
         <section className="pt-12">
@@ -80,12 +128,12 @@ const HelpCenter = () => {
               </h1>
 
               <p className="mb-3 text-[18px] text-neutral-600">
-                {` We couldn’t answer your question?`}
+                We couldn&apos;t answer your question?
               </p>
 
               <Link
                 href="/contact-us"
-                className="align-center flex w-[150px] justify-center rounded-md bg-primary py-4 text-background"
+                className="align-center flex w-[150px] justify-center rounded-md border border-[#0A0A0A] bg-[#FFF] py-4 text-[#0F172A]"
               >
                 Contact us
               </Link>
@@ -99,7 +147,7 @@ const HelpCenter = () => {
       <div className="bg-white py-40">
         <div className="mx-auto max-w-7xl px-5 text-center md:px-10 lg:px-10 xl:px-10">
           <h1 className="mg-4 text-3xl font-bold text-orange-500">
-            Didn’t find an answer?
+            Didn&apos;t find an answer?
           </h1>
           <p className="mb-3 text-lg font-normal text-neutral-600">
             Contact us for more inquiries and information about our services.

src/app/(landing-routes)/privacy-policy/page.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect } from "react";
 
-import { Breadcrumb } from "~/components/common/breadcrumb";
 import privacyPolicyData, {
   getTableOfContents,
 } from "~/components/layouts/Legal/PrivacyPolicy/constants/privacyPolicyData";
@@ -31,14 +30,14 @@ export default function PrivacyPolicy() {
   return (
     <main className="">
       <SubPageHero
-        heading="Privacy Policy"
-        description="Achieve your dreams with us today"
+        subheading="Privacy Policy"
+        heading="How We Protect Your Information"
+        wordToStyleIndex={2}
+        description="Find advice and answers from our support team"
       />
 
-      <div className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10">
-        <Breadcrumb variant="primary" />
-
-        <section className="my-[70px] flex max-w-full flex-col-reverse items-start justify-between pb-10 lg:flex-row">
+      <div className="mx-auto max-w-7xl px-10 py-[31px] md:py-10 lg:px-10 xl:px-10">
+        <section className="flex max-w-full flex-col-reverse items-start justify-between pb-10 lg:flex-row">
           <PrivacyPolicyContent
             content={privacyPolicyData}
             className="text-neutral-dark-1 lg:w-[750px]"

src/app/(landing-routes)/terms-and-conditions/page.tsx

@@ -1,4 +1,3 @@
-import { Breadcrumb } from "~/components/common/breadcrumb";
 import Main from "~/components/layouts/Legal/Terms&Conditions/Main";
 import SubPageHero from "~/components/layouts/Legal/Terms&Conditions/SubPageHero";
 
@@ -7,30 +6,17 @@ const TermsConditions = () => {
     <div className="" data-testid="terms-conditions">
       <div data-testid="subpage-hero">
         <SubPageHero
-          heading="Terms and Conditions"
+          subheading="Terms and Conditions"
+          heading="View User's Guidelines"
+          wordToStyleIndex={1}
           description="Achieve your dreams with us today"
         />
       </div>
 
       <div
-        className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10"
+        className="mx-auto max-w-7xl px-5 md:px-10 md:py-[52px] lg:px-10 xl:px-10"
         data-testid="breadcrumb-container"
       >
-        <div data-testid="breadcrumb">
-          <Breadcrumb
-            pages={[
-              { name: "Home", href: "/" },
-              { name: "Legal Terms", href: "/" },
-              {
-                name: "Terms and Conditions",
-                href: "/terms-and-conditions",
-                isCurrent: true,
-              },
-            ]}
-            variant="primary"
-          />
-        </div>
-
         <div data-testid="main-content">
           <Main />
         </div>

src/components/layouts/Legal/PrivacyPolicy/PrivacyPolicyContent.tsx

@@ -59,7 +59,7 @@ export default function PrivacyPolicyContent({
       <p className="text-base font-normal text-neutral-dark-1">
         For more information about our terms and conditions, please visit
         our&nbsp;
-        <Link href="/" className="text-primary">
+        <Link href="/terms-and-conditions" className="text-primary">
           Terms and Conditions page
         </Link>
         .

src/components/layouts/Legal/Terms&Conditions/Main.tsx

@@ -51,7 +51,7 @@ const Main = () => {
   //
 
   return (
-    <section className="relative my-[70px] scroll-smooth text-left">
+    <section className="relative my-[3.5rem] scroll-smooth text-left">
       <div className="flex max-w-full flex-col-reverse items-start justify-between pb-10 lg:flex-row">
         <div className="text-neutral-dark-1 lg:w-[750px]">
           <div className="max-w-full self-stretch" id="introduction">
@@ -123,11 +123,8 @@ const Main = () => {
           </div>
           <div className="mb-[10px] text-base text-neutral-dark-1">
             For more information about our privacy practices, please visit our{" "}
-            <Link
-              href={"/legal/privacy-policy"}
-              className="text-primary underline"
-            >
-              Privacy Policy page.{" "}
+            <Link href={"/privacy-policy"} className="text-primary underline">
+              Privacy Policy page.
             </Link>
           </div>
         </div>

src/components/layouts/Legal/Terms&Conditions/SubPageHero.tsx

@@ -1,22 +1,51 @@
 interface SubPageHeroProperty {
+  subheading?: string;
   heading?: string;
   description?: string;
+  wordToStyleIndex?: number;
+  styledWordClassName?: string;
 }
 
 const SubPageHero = ({
-  heading = "Build Your Product Faster",
-  description = "Get Your Free Boilerplate Samples!",
+  subheading,
+  heading,
+  description,
+  wordToStyleIndex,
 }: SubPageHeroProperty) => {
+  const words = heading?.split(" ");
+
   return (
     <div
       data-testid="subpage-hero"
-      className="relative box-border flex h-[13.438rem] w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-black px-[0rem] py-[4.687rem] text-center text-[2rem] text-white md:h-[20.25rem] md:text-[2.75rem] lg:text-[3.75rem]"
+      className="relative box-border flex h-[15.25rem] w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#FAFAFA] p-[0.875rem] text-center text-[2rem] text-white md:text-[2.75rem] lg:text-[3.75rem]"
     >
-      <div className="flex flex-col items-center justify-start gap-[0.25rem]">
-        <b className="relative">{heading}</b>
-        <div className="relative self-stretch text-[1.25rem] md:text-[1.75rem]">
-          {description}
-        </div>
+      <div className="flex flex-col items-center justify-start gap-[10px] py-[0.625rem] md:gap-[24px]">
+        {subheading && (
+          <p className="rounded-[10px] bg-[#F1F1F1] p-[10px] text-sm text-neutral-dark-1">
+            {subheading}
+          </p>
+        )}
+        {heading && (
+          <b className="relative text-[28px] text-black md:text-[60px]">
+            {words?.map((word, index) => (
+              <span
+                key={index}
+                className={
+                  index === wordToStyleIndex
+                    ? "text-[#F97316]"
+                    : "text-[#0A0A0A]"
+                }
+              >
+                {word}{" "}
+              </span>
+            ))}
+          </b>
+        )}
+        {description && (
+          <div className="relative self-stretch text-center text-[1.125rem] text-neutral-dark-1">
+            {description}
+          </div>
+        )}
       </div>
     </div>
   );

src/components/layouts/accordion/TopicAccordion.tsx

@@ -1,18 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "~/components/ui/accordion";
-import { topics } from "~/constants/topicsdata";
 
-const TopicsAccordions = () => {
+const TopicsAccordions = ({ topics }: { topics: any[] }) => {
   return (
     <Accordion
       className="px grid w-full grid-cols-1 gap-x-[20px] gap-y-[12px] md:grid-cols-2 lg:grid-cols-3"
       type="multiple"
     >
-      {topics.map((topic, index) => (
+      {topics.map((topic: any, index: number) => (
         <AccordionItem
           key={index}
           className="flex w-full flex-col border-b-0 bg-white px-6 py-6"
@@ -24,14 +24,14 @@ const TopicsAccordions = () => {
             className="border-b-0 text-left hover:no-underline"
             aria-level={2}
           >
-            {topic.question}
+            {topic.title}
           </AccordionTrigger>
           <AccordionContent
             role="region"
             className="text-sm"
             aria-labelledby={`topic-heading-${index}`}
           >
-            {topic.answer}
+            {topic.content}
           </AccordionContent>
         </AccordionItem>
       ))}