Merged in fix/sw-453-icons-on-filter (pull request #812)

fix(sw-453): Correct view of cards and icons when filter

Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -23,6 +23,7 @@ export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
   roomCategories,
+  selectedPackages,
   handleSelectRate,
 }: RoomCardProps) {
   const intl = useIntl()
@@ -133,15 +134,17 @@ export default function RoomCard({
                 >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
               </span>
             )}
-            {roomConfiguration.features.map((feature) => (
-              <span className={styles.chip} key={feature.code}>
-                {createElement(getIconForFeatureCode(feature.code), {
-                  width: 16,
-                  height: 16,
-                  color: "burgundy",
-                })}
-              </span>
-            ))}
+            {roomConfiguration.features
+              .filter((feature) => selectedPackages.includes(feature.code))
+              .map((feature) => (
+                <span className={styles.chip} key={feature.code}>
+                  {createElement(getIconForFeatureCode(feature.code), {
+                    width: 16,
+                    height: 16,
+                    color: "burgundy",
+                  })}
+                </span>
+              ))}
           </div>
           {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
          which can't be accessed unless on Scandic's Wifi or using Citrix. */}

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -16,6 +16,7 @@ export default function RoomSelection({
   roomCategories,
   user,
   packages,
+  selectedPackages,
 }: RoomSelectionProps) {
   const [rateSummary, setRateSummary] = useState<Rate | null>(null)
 
@@ -67,6 +68,7 @@ export default function RoomSelection({
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
                 handleSelectRate={setRateSummary}
+                selectedPackages={selectedPackages}
               />
             </li>
           ))}

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -9,6 +9,10 @@ import RoomSelection from "../RoomSelection"
 
 import styles from "./rooms.module.css"
 
+import {
+  RoomPackageCodeEnum,
+  type RoomPackageCodes,
+} from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export default function Rooms({
@@ -16,20 +20,25 @@ export default function Rooms({
   roomCategories = [],
   user,
   packages,
-}: RoomSelectionProps) {
-  const defaultRooms = roomsAvailability.roomConfigurations.filter(
-    (room) => room.features.length === 0
-  )
+}: Omit<RoomSelectionProps, "selectedPackages">) {
+  const defaultRooms = roomsAvailability.roomConfigurations
   const [rooms, setRooms] = useState<RoomsAvailability>({
     ...roomsAvailability,
     roomConfigurations: defaultRooms,
   })
+  const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
+    []
+  )
 
   const handleFilter = useCallback(
-    (filter: Record<string, boolean | undefined>) => {
-      const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+    (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
+      const filteredPackages = Object.keys(filter).filter(
+        (key) => filter[key as RoomPackageCodeEnum]
+      ) as RoomPackageCodeEnum[]
 
-      if (selectedCodes.length === 0) {
+      setSelectedPackages(filteredPackages)
+
+      if (filteredPackages.length === 0) {
         setRooms({
           ...roomsAvailability,
           roomConfigurations: defaultRooms,
@@ -39,8 +48,8 @@ export default function Rooms({
 
       const filteredRooms = roomsAvailability.roomConfigurations.filter(
         (room) =>
-          selectedCodes.every((selectedCode) =>
-            room.features.some((feature) => feature.code === selectedCode)
+          filteredPackages.every((filteredPackage) =>
+            room.features.some((feature) => feature.code === filteredPackage)
           )
       )
       setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
@@ -60,6 +69,7 @@ export default function Rooms({
         roomCategories={roomCategories}
         user={user}
         packages={packages}
+        selectedPackages={selectedPackages}
       />
     </div>
   )

types/components/hotelReservation/selectRate/roomCard.ts

@@ -5,11 +5,13 @@ import {
 
 import { Rate } from "./selectRate"
 
-import { RoomData } from "@/types/hotel"
+import type { RoomData } from "@/types/hotel"
+import type { RoomPackageCodes } from "./roomFilter"
 
 export type RoomCardProps = {
   roomConfiguration: RoomConfiguration
   rateDefinitions: RateDefinition[]
   roomCategories: RoomData[]
+  selectedPackages: RoomPackageCodes[]
   handleSelectRate: (rate: Rate) => void
 }

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -1,11 +1,12 @@
 import type { RoomData } from "@/types/hotel"
 import type { SafeUser } from "@/types/user"
 import type { RoomsAvailability } from "@/server/routers/hotels/output"
-import type { RoomPackageData } from "./roomFilter"
+import type { RoomPackageCodes, RoomPackageData } from "./roomFilter"
 
 export interface RoomSelectionProps {
   roomsAvailability: RoomsAvailability
   roomCategories: RoomData[]
   user: SafeUser
   packages: RoomPackageData
+  selectedPackages: RoomPackageCodes[]
 }