refactor(SW-194): use design system button

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>

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>
   )

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
 }

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"]