From c7386ca25488212f91302adb3bec4d400dabe073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Thu, 10 Oct 2024 10:10:08 +0200
Subject: [PATCH] refactor(SW-194): use design system button

---
 components/Blocks/Accordion/index.tsx         | 26 +++++++++++--------
 .../TempDesignSystem/ShowMoreButton/index.tsx |  4 ++-
 .../ShowMoreButton/showMoreButton.ts          |  2 ++
 types/components/blocks/Accordion.ts          |  2 +-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/Blocks/Accordion/index.tsx b/components/Blocks/Accordion/index.tsx
index f1343a237..cdb47c01e 100644
--- a/components/Blocks/Accordion/index.tsx
+++ b/components/Blocks/Accordion/index.tsx
@@ -6,23 +6,26 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-
-import { ShowMoreButton } from "../../ContentType/HotelPage/ShowMoreButton"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./accordion.module.css"
 
 import type { AccordionProps } from "@/types/components/blocks/Accordion"
 
 export default function AccordionSection({ accordion, title }: AccordionProps) {
-  const [allItemsVisible, setAllItemsVisible] = useState(false)
-  function handleToggleShowMore() {
-    setAllItemsVisible((previousState) => !previousState)
+  const initialPageSize = 5
+  const [pageSize, setPageSize] = useState(initialPageSize)
+  const showMoreVisible = accordion.length > initialPageSize
+  const showLessVisible = pageSize >= accordion.length
+
+  function handleShowMore() {
+    setPageSize(showLessVisible ? initialPageSize : accordion.length)
   }
 
   function getClassName(idx: number): string {
-    if (!allItemsVisible && idx > 4) {
+    if (showMoreVisible && idx > pageSize - 1) {
       return styles.hiddenItem
-    } else if (!allItemsVisible && idx == 4) {
+    } else if (showMoreVisible && idx == pageSize - 1) {
       return styles.lastItem
     }
     return ""
@@ -34,11 +37,12 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
       <Accordion theme={"light"} variant={"card"}>
         {accordion.map((acc, idx: number) => (
           <AccordionItem
-            key={acc.question + idx}
+            key={`${acc.question}-${idx}`}
             title={acc.question}
             className={getClassName(idx)}
           >
             <JsonToHtml
+              key={`${acc.question}-${idx}`}
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}
             />
@@ -46,12 +50,12 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
         ))}
       </Accordion>
 
-      {accordion.length > 5 ? (
+      {showMoreVisible ? (
         <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={showLessVisible}
           textShowMore="See all FAQ"
           textShowLess="See less FAQ"
-          allItemsVisible={allItemsVisible}
-          handleToggleShowMore={handleToggleShowMore}
         />
       ) : null}
     </SectionContainer>
diff --git a/components/TempDesignSystem/ShowMoreButton/index.tsx b/components/TempDesignSystem/ShowMoreButton/index.tsx
index ca8a24dcb..7be723fd1 100644
--- a/components/TempDesignSystem/ShowMoreButton/index.tsx
+++ b/components/TempDesignSystem/ShowMoreButton/index.tsx
@@ -16,6 +16,8 @@ export default function ShowMoreButton({
   intent,
   disabled,
   showLess,
+  textShowMore = "Show less",
+  textShowLess = "Show more",
   loadMoreData,
 }: ShowMoreButtonProps) {
   const intl = useIntl()
@@ -36,7 +38,7 @@ export default function ShowMoreButton({
         intent="text"
       >
         <ChevronDownIcon className={styles.icon} />
-        {intl.formatMessage({ id: showLess ? "Show less" : "Show more" })}
+        {intl.formatMessage({ id: showLess ? textShowLess : textShowMore })}
       </Button>
     </div>
   )
diff --git a/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts b/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
index b6ad929f5..1b7d66b07 100644
--- a/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
+++ b/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
@@ -7,5 +7,7 @@ export interface ShowMoreButtonProps
     VariantProps<typeof showMoreButtonVariants> {
   disabled?: boolean
   showLess?: boolean
+  textShowMore?: string
+  textShowLess?: string
   loadMoreData: () => void
 }
diff --git a/types/components/blocks/Accordion.ts b/types/components/blocks/Accordion.ts
index 3beb86c1f..69325ae40 100644
--- a/types/components/blocks/Accordion.ts
+++ b/types/components/blocks/Accordion.ts
@@ -1,4 +1,4 @@
-import { Accordion } from "@/server/routers/contentstack/schemas/blocks/accordion"
+import type { Accordion } from "@/server/routers/contentstack/schemas/blocks/accordion"
 
 export type AccordionProps = {
   accordion: Accordion["accordion"]["faq"]