Faq

3 files changed, 92 insertions, 2 deletions

diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
index 4fe70de8..534cfe02 100644
--- a/src/components/layouts/AppBar.js
+++ b/src/components/layouts/AppBar.js
@@ -1,7 +1,6 @@
 import { Bars3Icon, ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
 import Link from "../elements/Link";
 
 const AppBar = ({ title }) => {
diff --git a/src/pages/faqs.js b/src/pages/faqs.js
new file mode 100644
index 00000000..2d0cab4b
--- /dev/null
+++ b/src/pages/faqs.js
@@ -0,0 +1,91 @@
+import AppBar from "@/components/layouts/AppBar";
+import Layout from "@/components/layouts/Layout";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import { useEffect, useState } from "react";
+
+const dataFaqs = [
+  {
+    id: 1,
+    name: 'Akun',
+    description: 'Bantuan tentang pengelolaan fitur dan akun'
+  },
+  {
+    id: 2,
+    name: 'Pembelian',
+    description: 'Bantuan seputar status stock, layanan pengiriman & asuransi hingga seluruh indonesia'
+  },
+  {
+    id: 3,
+    name: 'Metode Pembayaran',
+    description: 'Bantuan terkait layanan metode pembayaran'
+  },
+  {
+    id: 4,
+    name: 'Quotation',
+    description: 'Bantuan fitur RFQ & quotation Express'
+  },
+  {
+    id: 5,
+    name: 'Faktur Pajak & Invoice',
+    description: 'Bantuan seputar layanan terbit faktur pajak & invoice'
+  },
+  {
+    id: 6,
+    name: 'Pengembalian & Garansi',
+    description: 'Bantuan cara pengembalian produk & garansi produk'
+  }
+];
+
+export default function Faqs() {
+  const [ faqs, setFaqs ] = useState([]);
+
+  useEffect(() => {
+    if (faqs.length == 0) {
+      setFaqs(dataFaqs.map((dataFaq) => ({
+        ...dataFaq,
+        isOpen: false
+      })));
+    }
+  }, [ faqs ]);
+
+  const toggleFaq = (id) => {
+    const faqsToUpdate = faqs.map(faq => {
+      if (faq.id == id) faq.isOpen = !faq.isOpen;
+      return faq;
+    });
+    setFaqs(faqsToUpdate);
+  };
+
+  return (
+    <Layout>
+      <AppBar title="FAQ's" />
+      
+      <div className="divide-y divide-gray_r-6">
+        { faqs.map((faq, index) => (
+          <div className="p-4" key={index}>
+            <div className="flex gap-x-3 items-center">
+              <div className="flex-1">
+                <p className="font-medium mb-1">{ faq.name }</p>
+                <p className="text-caption-1 text-gray_r-11">
+                  { faq.description }
+                </p>
+              </div>
+              <button type="button" className="p-2 rounded bg-gray_r-4 h-fit" onClick={() => toggleFaq(faq.id)}>
+                { faq.isOpen ? (
+                  <ChevronUpIcon className="w-5"/>
+                  ) : (
+                  <ChevronDownIcon className="w-5"/>
+                ) }
+              </button>
+            </div>
+            { faq.isOpen && (
+              <p className="text-caption-1 text-gray_r-11 leading-6 mt-4">
+                { faq?.content || 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' }
+              </p>
+            ) }
+          </div>
+        )) }
+      </div>
+    </Layout>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js
index 91d2d7c7..ae6c2af8 100644
--- a/src/pages/my/menu.js
+++ b/src/pages/my/menu.js
@@ -67,7 +67,7 @@ export default function MyMenu() {
           <p className="font-medium mb-2">Pusat Bantuan</p>
           <div className="flex flex-col mb-6">
             <Menu icon={<ChatBubbleLeftRightIcon className="w-5"/>} name="Layanan Pelanggan" url="/" />
-            <Menu icon={<QuestionMarkCircleIcon className="w-5"/>} name="F.A.Q" url="/" />
+            <Menu icon={<QuestionMarkCircleIcon className="w-5"/>} name="F.A.Q" url="/faqs" />
           </div>
 
           <p className="font-medium mb-2">Pengaturan Akun</p>