- {packageOptions.map((option) => {
- const isAllergyRoom = checkIsAllergyRoom(option.code)
- const isPetRoom = checkIsPetRoom(option.code)
- const isDisabled =
- (isPetRoom && allergyRoomSelected) ||
- (isAllergyRoom && petRoomSelected)
+
+ {packageOptions.map((option) => {
+ const isAllergyRoom = checkIsAllergyRoom(option.code)
+ const isPetRoom = checkIsPetRoom(option.code)
+ const isDisabled =
+ (isPetRoom && allergyRoomSelected) ||
+ (isAllergyRoom && petRoomSelected)
- const isSelected = field.value.includes(option.code)
- const iconName = getIconNameByPackageCode(option.code)
+ const isSelected = field.value.includes(option.code)
+ const iconName = getIconNameByPackageCode(option.code)
- return (
-
-
-
- {isSelected ? (
-
- ) : null}
-
-
- {option.description}
-
- {iconName ? (
-
+ return (
+
+
+
+ {isSelected ? (
+
) : null}
-
- {isPetRoom ?
: null}
-
- )
- })}
-
+
+
+ {option.description}
+
+ {iconName ? (
+
+ ) : null}
+
+ {isPetRoom ? : null}
+
+ )
+ })}
)
}}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
index b3d7a69ae..65cb9a4ca 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
@@ -1,11 +1,30 @@
.footer {
- display: grid;
- gap: var(--Space-x1);
padding: 0 var(--Space-x15);
}
.buttonContainer {
- align-items: center;
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ gap: var(--Space-x1);
+}
+
+.divider {
+ margin: var(--Space-x15) 0;
+}
+
+@media screen and (max-width: 767px) {
+ .divider {
+ display: none;
+ }
+ .footer {
+ margin-top: var(--Space-x5);
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .buttonContainer {
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ align-items: center;
+ }
}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
index 179003ab4..654306d7c 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
@@ -74,8 +74,13 @@ export default function Form({ close }: { close: VoidFunction }) {