Merged in fix/remove-old-select-rate (pull request #2647)

Fix/remove old select rate

* remove old select-rate

* Fix imports

* renamed SelectRate2 -> SelectRate

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css

@@ -1,12 +1,11 @@
 .hotelDescription {
   overflow: hidden;
-  text-align: left;
 }
 
 .descriptionWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x2);
+  align-items: center;
 }
 
 .collapsed {
@@ -25,6 +24,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-top: var(--Space-x2);
 }
 
 .description {
@@ -34,6 +34,7 @@
 
 .showMoreButton {
   display: flex;
+  align-items: flex-end;
   background-color: transparent;
   border-width: 0;
   padding: 0;
@@ -49,13 +50,16 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x15);
+  align-items: center;
 }
 
 .facilityList {
   display: flex;
+  align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--Space-x15);
+  padding-bottom: var(--Space-x2);
 }
 
 .facilitiesItem {

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx

@@ -53,21 +53,22 @@ export default function HotelDescription({
           </div>
         ))}
       </div>
-      <div>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p
-            className={`${styles.hotelDescription} ${
-              expanded ? styles.expanded : styles.collapsed
-            }`}
-          >
-            {description}
-          </p>
-        </Typography>
-        <Typography variant="Link/md">
-          <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
-            {expanded ? textShowLess : textShowMore}
-          </ButtonRAC>
-        </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p
+          className={`${styles.hotelDescription} ${
+            expanded ? styles.expanded : styles.collapsed
+          }`}
+        >
+          {description}
+        </p>
+      </Typography>
+      <Typography variant="Link/md">
+        <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
+          {expanded ? textShowLess : textShowMore}
+        </ButtonRAC>
+      </Typography>
+
+      {expanded && (
         <div className={styles.expandedContent}>
           <ReadMore
             label={intl.formatMessage({
@@ -77,17 +78,16 @@ export default function HotelDescription({
             showCTA={false}
             sidePeekKey={SidePeekEnum.hotelDetails}
           />
+          {hotel.specialAlerts.map((alert) => (
+            <Alert
+              key={alert.id}
+              type={alert.type}
+              heading={alert.heading}
+              text={alert.text}
+            />
+          ))}
         </div>
-      </div>
-
-      {hotel.specialAlerts.map((alert) => (
-        <Alert
-          key={alert.id}
-          type={alert.type}
-          heading={alert.heading}
-          text={alert.text}
-        />
-      ))}
+      )}
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -17,13 +17,17 @@ import HotelDescription from "./HotelDescription"
 
 import styles from "./hotelInfoCard.module.css"
 
-import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+
+import type { SelectRateBooking } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export default async function HotelInfoCard({
-  booking,
-  hotel,
-}: HotelInfoCardProps) {
+export type HotelInfoCardProps = {
+  booking: SelectRateBooking
+  hotel: Hotel
+}
+
+export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) {
   const intl = await getIntl()
 
   const sortedFacilities = hotel.detailedFacilities
@@ -34,7 +38,6 @@ export default async function HotelInfoCard({
 
   const bookingFromDate = dt(booking.fromDate)
   const bookingToDate = dt(booking.toDate)
-
   const specialAlerts = getHotelAlertsForBookingDates(
     hotel.specialAlerts,
     bookingFromDate,
@@ -109,22 +112,26 @@ export default async function HotelInfoCard({
           </div>
         </div>
       </section>
-      {specialAlerts.map((alert) => {
-        return (
-          <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
-            <Alert
-              key={alert.id}
-              type={alert.type}
-              heading={alert.heading}
-              text={alert.text}
-            />
-          </div>
-        )
-      })}
+      {specialAlerts.map((alert) => (
+        <SpecialAlert key={alert.id} alert={alert} />
+      ))}
     </article>
   )
 }
 
+function SpecialAlert({ alert }: { alert: Hotel["specialAlerts"][number] }) {
+  return (
+    <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
+      <Alert
+        key={alert.id}
+        type={alert.type}
+        heading={alert.heading}
+        text={alert.text}
+      />
+    </div>
+  )
+}
+
 export function HotelInfoCardSkeleton() {
   return (
     <article className={styles.container}>
@@ -157,7 +164,7 @@ export function HotelInfoCardSkeleton() {
               >
                 <SkeletonShimmer width="20ch" />
               </Typography>
-              {[1, 2, 3, 4, 5].map((id) => {
+              {[1, 2, 3, 4, 5]?.map((id) => {
                 return (
                   <div className={styles.facilitiesItem} key={id}>
                     <SkeletonShimmer width="10ch" />