feat(SW-938) Added icon to roomFacilitiesSchema and detailedFacilitySchema

2024-11-20 14:32:33 +01:00
parent 43a44e31ad
commit c71c8af35a
7 changed files with 41 additions and 10 deletions
--- a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
+++ b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
@@ -13,8 +13,14 @@
  font-family: var(--typography-Body-Regular-fontFamily);
  border-bottom: 1px solid var(--Base-Border-Subtle);
  /* padding set to align with AccordionItem which has a different composition */
-  padding: var(--Spacing-x2)
-    calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half));
+  padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
+    var(--Spacing-x3);
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.noIcon {
+  margin-left: var(--Spacing-x4);
 }

 .list {
--- a/components/SidePeeks/HotelSidePeek/index.tsx
+++ b/components/SidePeeks/HotelSidePeek/index.tsx
@@ -8,12 +8,15 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

+import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
+
 import styles from "./hotelSidePeek.module.css"

-import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
-import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
+import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import { Amenities, Hotel } from "@/types/hotel"
+import { IconName } from "@/types/components/icon"
+import type { Amenities, Hotel } from "@/types/hotel"

 function getAmenitiesList(hotel: Hotel) {
  const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
@@ -46,7 +49,10 @@ export default function HotelSidePeek({
        <Accordion>
          {/* parking */}
          {hotel.parking.length ? (
-            <AccordionItem title={intl.formatMessage({ id: "Parking" })}>
+            <AccordionItem
+              title={intl.formatMessage({ id: "Parking" })}
+              icon={IconName.Parking}
+            >
              {hotel.parking.map((p) => (
                <Parking key={p.name} parking={p} />
              ))}
@@ -56,9 +62,19 @@ export default function HotelSidePeek({
            {intl.formatMessage({ id: "Accessibility" })}
          </div>
          {amenitiesList.map((amenity) => {
+            const Icon = getFacilityIcon(amenity.icon)
            return (
              <div key={amenity.id} className={styles.amenity}>
-                {amenity.name}
+                {Icon && (
+                  <Icon width={24} height={24} color="uiTextMediumContrast" />
+                )}
+                <Body
+                  asChild
+                  className={!Icon ? styles.noIcon : undefined}
+                  color="uiTextMediumContrast"
+                >
+                  <span>{amenity.name}</span>
+                </Body>
              </div>
            )
          })}
--- a/components/SidePeeks/RoomSidePeek/index.tsx
+++ b/components/SidePeeks/RoomSidePeek/index.tsx
@@ -56,10 +56,16 @@ export default function RoomSidePeek({
            {room.roomFacilities
              .sort((a, b) => a.sortOrder - b.sortOrder)
              .map((facility) => {
-                const Icon = getFacilityIcon(facility.name)
+                const Icon = getFacilityIcon(facility.icon)
                return (
                  <li key={facility.name}>
-                    {Icon && <Icon color="uiTextMediumContrast" />}
+                    {Icon && (
+                      <Icon
+                        width={24}
+                        height={24}
+                        color="uiTextMediumContrast"
+                      />
+                    )}
                    <Body
                      asChild
                      className={!Icon ? styles.noIcon : undefined}
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
@@ -10,7 +10,7 @@
  position: relative;
  display: flex;
  align-items: center;
-  gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
  cursor: pointer;
  color: var(--Base-Text-High-contrast);
  font-family: var(--typography-Body-Bold-fontFamily);
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -125,6 +125,7 @@ const detailedFacilitySchema = z.object({
  public: z.boolean(),
  sortOrder: z.number(),
  filter: z.string().optional(),
+  icon: z.string(),
 })

 export const facilitySchema = z.object({
--- a/server/routers/hotels/schemas/room.ts
+++ b/server/routers/hotels/schemas/room.ts
@@ -56,6 +56,7 @@ const roomFacilitiesSchema = z.object({
  name: z.string(),
  isUniqueSellingPoint: z.boolean(),
  sortOrder: z.number(),
+  icon: z.string(),
 })

 export const roomSchema = z
--- a/types/components/hotelReservation/selectHotel/hotelFilters.ts
+++ b/types/components/hotelReservation/selectHotel/hotelFilters.ts
@@ -15,6 +15,7 @@ export type Filter = {
  public: boolean
  sortOrder: number
  filter?: string
+  icon: string
 }

 export type HotelFilterModalProps = {