feat(SW-914): refactor

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx

@@ -1,3 +1,16 @@
-export default function AccessibilityAmenity() {
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-  return <div>AccessibilityAmenity</div>
+import { getIntl } from "@/i18n"
+
+import { IconName } from "@/types/components/icon"
+
+export default async function AccessibilityAmenity() {
+  const intl = await getIntl()
+  return (
+    <AccordionItem
+      title={intl.formatMessage({ id: "Accessibility" })}
+      icon={IconName.Accessibility}
+    >
+      Accessibility
+    </AccordionItem>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx

@@ -1,3 +1,16 @@
-export default function BreakfastAmenity() {
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-  return <div>BreakfastAmenity</div>
+import { getIntl } from "@/i18n"
+
+import { IconName } from "@/types/components/icon"
+
+export default async function BreakfastAmenity() {
+  const intl = await getIntl()
+  return (
+    <AccordionItem
+      title={intl.formatMessage({ id: "Breakfast" })}
+      icon={IconName.CoffeeAlt}
+    >
+      Breakfast
+    </AccordionItem>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx

@@ -1,5 +1,16 @@
-import React from "react"
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import { getIntl } from "@/i18n"
 
-export default function CheckInCheckOutAmenity() {
+import { IconName } from "@/types/components/icon"
-  return <div>CheckInAmenity</div>
+
+export default async function CheckInCheckOutAmenity() {
+  const intl = await getIntl()
+  return (
+    <AccordionItem
+      title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
+      icon={IconName.Business}
+    >
+      Check in / check out information
+    </AccordionItem>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx

@@ -1,3 +1,16 @@
-export default function MeetingsAmenity() {
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-  return <div>MeetingsAmenity</div>
+import { getIntl } from "@/i18n"
+
+import { IconName } from "@/types/components/icon"
+
+export default async function MeetingsAmenity() {
+  const intl = await getIntl()
+  return (
+    <AccordionItem
+      title={intl.formatMessage({ id: "Meetings & Conferences" })}
+      icon={IconName.Business}
+    >
+      Meeting and Conferences
+    </AccordionItem>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx

@@ -1,3 +1,16 @@
-export default function ParkingAmenity() {
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-  return <div>ParkingAmenity</div>
+import { getIntl } from "@/i18n"
+
+import { IconName } from "@/types/components/icon"
+
+export default async function ParkingAmenity() {
+  const intl = await getIntl()
+  return (
+    <AccordionItem
+      title={intl.formatMessage({ id: "Parking" })}
+      icon={IconName.Parking}
+    >
+      Parking
+    </AccordionItem>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css

@@ -1,5 +1,10 @@
 .wrapper {
-  display: flex;
+  padding: var(--Spacing-x1);
-  flex-direction: column;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
-  gap: var(--Spacing-x3);
+}
+
+.amenity {
+  display: flex;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }

components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx

@@ -1,20 +1,30 @@
-import Button from "@/components/TempDesignSystem/Button"
+import { HeartIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import { mapFacilityToIcon } from "../../../data"
 
 import styles from "./amenity.module.css"
 
 import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity"
 
-export default function Amenity({ name, buttonUrl }: AmenityProps) {
+export default function Amenity({ filteredAmenities }: AmenityProps) {
   return (
-    <div className={styles.wrapper}>
+    <>
-      {buttonUrl && (
+      {filteredAmenities.map((amenity) => {
-        <Button theme="base" intent="primary" fullWidth asChild>
+        const Icon = mapFacilityToIcon(amenity.id)
-          <Link href={buttonUrl} color="white">
+        return (
-            {name}
+          <div key={amenity.name} className={styles.wrapper}>
-          </Link>
+            <div className={styles.amenity}>
-        </Button>
+              {Icon ? (
-      )}
+                <Icon color="burgundy" width={24} height={24} />
-    </div>
+              ) : (
+                <HeartIcon color="burgundy" width={24} height={24} />
+              )}
+              <Body color="burgundy">{amenity.name}</Body>
+            </div>
+          </div>
+        )
+      })}
+    </>
   )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css

@@ -1,10 +0,0 @@
-.wrapper {
-  padding: var(--Spacing-x1);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
-.amenity {
-  display: flex;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
-}

components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -1,14 +1,10 @@
 import { amenities } from "@/constants/routes/hotelPageParams"
 
-import { HeartIcon } from "@/components/Icons"
 import Accordion from "@/components/TempDesignSystem/Accordion"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { mapFacilityToIcon } from "../../data"
 import {
   AccessibilityAmenity,
   BreakfastAmenity,
@@ -16,11 +12,9 @@ import {
   MeetingsAmenity,
   ParkingAmenity,
 } from "./AccordionAmenities"
-
+import Amenity from "./Amenity"
-import styles from "./amenities.module.css"
 
 import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities"
-import { IconName } from "@/types/components/icon"
 
 export default async function AmenitiesSidePeek({
   amenitiesList,
@@ -28,7 +22,7 @@ export default async function AmenitiesSidePeek({
   const lang = getLang()
   const intl = await getIntl()
 
-  const filterdList = amenitiesList
+  const filteredAmenities = amenitiesList
     .filter((filter) => !filter.name.startsWith("Parking"))
     .filter((filter) => !filter.name.startsWith("Meeting"))
     .filter((filter) => filter.name !== "Late check-out until 14:00 guaranteed")
@@ -39,51 +33,12 @@ export default async function AmenitiesSidePeek({
       title={intl.formatMessage({ id: "Amenities" })}
     >
       <Accordion>
-        <AccordionItem
+        <ParkingAmenity />
-          title={intl.formatMessage({ id: "Parking" })}
+        <BreakfastAmenity />
-          icon={IconName.Parking}
+        <CheckInCheckOutAmenity />
-        >
+        <AccessibilityAmenity />
-          <ParkingAmenity />
+        <MeetingsAmenity />
-        </AccordionItem>
+        <Amenity filteredAmenities={filteredAmenities} />
-        <AccordionItem
-          title={intl.formatMessage({ id: "Breakfast" })}
-          icon={IconName.CoffeeAlt}
-        >
-          <BreakfastAmenity />
-        </AccordionItem>
-        <AccordionItem
-          title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
-          icon={IconName.Business}
-        >
-          <CheckInCheckOutAmenity />
-        </AccordionItem>
-        <AccordionItem
-          title={intl.formatMessage({ id: "Accessibility" })}
-          icon={IconName.Accessibility}
-        >
-          <AccessibilityAmenity />
-        </AccordionItem>
-        <AccordionItem
-          title={intl.formatMessage({ id: "Meetings & Conferences" })}
-          icon={IconName.Business}
-        >
-          <MeetingsAmenity />
-        </AccordionItem>
-        {filterdList.map((amenity) => {
-          const Icon = mapFacilityToIcon(amenity.id)
-          return (
-            <div key={amenity.name} className={styles.wrapper}>
-              <div className={styles.amenity}>
-                {Icon ? (
-                  <Icon color="burgundy" width={24} height={24} />
-                ) : (
-                  <HeartIcon color="burgundy" width={24} height={24} />
-                )}
-                <Body color="burgundy">{amenity.name}</Body>
-              </div>
-            </div>
-          )
-        })}
       </Accordion>
     </SidePeek>
   )

types/components/hotelPage/sidepeek/amenity.ts

@@ -1,4 +1,5 @@
+import type { Hotel } from "@/types/hotel"
+
 export type AmenityProps = {
-  name: string
+  filteredAmenities: Hotel["detailedFacilities"]
-  buttonUrl?: string
 }