fix(SW-925) disable filter if there are no availablePackages

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -26,7 +26,6 @@ export default function RoomFilter({
   onFilter,
   filterOptions,
 }: RoomFilterProps) {
-  console.log(filterOptions)
   const initialFilterValues = useMemo(
     () =>
       filterOptions.reduce(
@@ -100,11 +99,13 @@ export default function RoomFilter({
         <form onSubmit={handleSubmit(submitFilter)}>
           <div className={styles.roomsFilter}>
             {filterOptions.map((option) => {
-              const { code, description } = option
+              const { code, description, itemCode } = option
               const isPetRoom = code === RoomPackageCodeEnum.PET_ROOM
               const isAllergyRoom = code === RoomPackageCodeEnum.ALLERGY_ROOM
               const isDisabled =
-                (isAllergyRoom && petFriendly) || (isPetRoom && allergyFriendly)
+                (isAllergyRoom && petFriendly) ||
+                (isPetRoom && allergyFriendly) ||
+                !itemCode
 
               const checkboxChip = (
                 <CheckboxChip

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -28,7 +28,6 @@ export default function Rooms({
   user,
   availablePackages,
 }: SelectRateProps) {
-  console.log(availablePackages)
   const visibleRooms: RoomConfiguration[] =
     filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
   const [rateSummary, setRateSummary] = useState<Rate | null>(null)
@@ -50,11 +49,26 @@ export default function Rooms({
   )
 
   const defaultPackages: DefaultFilterOptions[] = [
-    { code: RoomPackageCodeEnum.PET_ROOM, description: "Pet friendly" },
-    { code: RoomPackageCodeEnum.ALLERGY_ROOM, description: "Allergy friendly" },
     {
       code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-      description: "Accessibility",
+      description: "Accessible Room",
+      itemCode: availablePackages.find(
+        (pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
+      )?.itemCode,
+    },
+    {
+      code: RoomPackageCodeEnum.ALLERGY_ROOM,
+      description: "Allergy Room",
+      itemCode: availablePackages.find(
+        (pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM
+      )?.itemCode,
+    },
+    {
+      code: RoomPackageCodeEnum.PET_ROOM,
+      description: "Pet Room",
+      itemCode: availablePackages.find(
+        (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
+      )?.itemCode,
     },
   ]
 
@@ -102,6 +116,7 @@ export default function Rooms({
       notAvailableRooms.forEach((room) => {
         room.status = "NotAvailable"
       })
+
       setRooms({
         ...roomsAvailability,
         roomConfigurations: [...filteredRooms, ...notAvailableRooms],

components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css

@@ -2,11 +2,13 @@
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: calc(var(--Spacing-x1) - 2px) var(--Spacing-x-one-and-half);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   background-color: var(--Base-Surface-Secondary-light-Normal);
   cursor: pointer;
+  height: 32px;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
 }
 
 .label[data-selected="true"],
@@ -21,8 +23,9 @@
 }
 
 .label[data-disabled="true"] {
-  background-color: var(--Base-Button-Primary-Fill-Disabled);
+  background-color: var(--UI-Input-Controls-Surface-Disabled);
-  border-color: var(--Base-Button-Primary-Fill-Disabled);
+  border-color: var(--UI-Input-Controls-Border-Disabled);
+  color: var(--Base-Text-Disabled);
   cursor: not-allowed;
 }
 

types/components/hotelReservation/selectRate/roomFilter.ts

@@ -11,6 +11,7 @@ export enum RoomPackageCodeEnum {
 export interface DefaultFilterOptions {
   code: RoomPackageCodeEnum
   description: string
+  itemCode: string | undefined
 }
 export interface RoomFilterProps {
   numberOfRooms: number