Merged in fix/SW-998-select-room-change-lang-issues (pull request #977)

fix(SW-998): fix issues related to non-english languages

* fix(SW-998): reverse price logic


Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/HotelPriceCard/hotelPriceCard.module.css

@@ -5,18 +5,6 @@
   margin: 0;
   width: 100%;
 }
-
-.noRooms {
-  display: flex;
-  gap: var(--Spacing-x1);
-}
-
-.prices {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
 .divider {
   margin: var(--Spacing-x-half) 0;
 }
@@ -37,9 +25,3 @@
   font-weight: 400;
   font-size: var(--typography-Caption-Regular-fontSize);
 }
-
-@media screen and (min-width: 1367px) {
-  .prices {
-    width: 260px;
-  }
-}

components/HotelReservation/HotelCard/HotelPriceCard/index.tsx

@@ -5,7 +5,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import styles from "../hotelPriceList.module.css"
+import styles from "./hotelPriceCard.module.css"
 
 import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
 

components/HotelReservation/HotelCard/HotelPriceList/index.tsx

@@ -1,56 +0,0 @@
-import { useParams } from "next/dist/client/components/navigation"
-import { useIntl } from "react-intl"
-
-import { Lang } from "@/constants/languages"
-import { selectRate } from "@/constants/routes/hotelReservation"
-
-import { ErrorCircleIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import HotelPriceCard from "./HotelPriceCard"
-import NoPriceAvailableCard from "./NoPriceAvailableCard"
-
-import styles from "./hotelPriceList.module.css"
-
-import { HotelPriceListProps } from "@/types/components/hotelReservation/selectHotel/hotePriceListProps"
-
-export default function HotelPriceList({
-  price,
-  hotelId,
-}: HotelPriceListProps) {
-  const intl = useIntl()
-  const params = useParams()
-  const lang = params.lang as Lang
-
-  return (
-    <div className={styles.prices}>
-      {price ? (
-        <>
-          {price.public && <HotelPriceCard productTypePrices={price.public} />}
-          {price.member && (
-            <HotelPriceCard productTypePrices={price.member} isMemberPrice />
-          )}
-          <Button
-            asChild
-            theme="base"
-            intent="primary"
-            size="small"
-            className={styles.button}
-          >
-            <Link
-              href={`${selectRate(lang)}?hotel=${hotelId}`}
-              color="none"
-              keepSearchParams
-            >
-              {intl.formatMessage({ id: "See rooms" })}
-            </Link>
-          </Button>
-        </>
-      ) : (
-        <NoPriceAvailableCard />
-      )}
-    </div>
-  )
-}

components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 import { ErrorCircleIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
-import styles from "../hotelPriceList.module.css"
+import styles from "./noPriceAvailable.module.css"
 
 export default function NoPriceAvailableCard() {
   const intl = useIntl()

components/HotelReservation/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css

@@ -0,0 +1,12 @@
+.priceCard {
+  padding: var(--Spacing-x-one-and-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  margin: 0;
+  width: 100%;
+}
+
+.noRooms {
+  display: flex;
+  gap: var(--Spacing-x1);
+}

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -70,10 +70,6 @@
   gap: var(--Spacing-x-half);
 }
 
-.detailsButton {
-  border-bottom: none;
-}
-
 .button {
   min-width: 160px;
 }
@@ -84,6 +80,12 @@
   gap: var(--Spacing-x1);
 }
 
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
 @media screen and (min-width: 1367px) {
   .card.pageListing {
     flex-direction: row;
@@ -133,4 +135,8 @@
   .pageListing .address {
     display: inline;
   }
+
+  .pageListing .prices {
+    width: 260px;
+  }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -4,10 +4,11 @@ import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
+import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -18,7 +19,8 @@ import getSingleDecimal from "@/utils/numberFormatting"
 import ReadMore from "../ReadMore"
 import TripAdvisorChip from "../TripAdvisorChip"
 import HotelLogo from "./HotelLogo"
-import HotelPriceList from "./HotelPriceList"
+import HotelPriceCard from "./HotelPriceCard"
+import NoPriceAvailableCard from "./NoPriceAvailableCard"
 import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
@@ -139,7 +141,38 @@ function HotelCard({
             showCTA={true}
           />
         </section>
-        <HotelPriceList price={price} hotelId={hotel.hotelData.operaId} />
+        <div className={styles.prices}>
+          {!price ? (
+            <NoPriceAvailableCard />
+          ) : (
+            <>
+              {price.public && (
+                <HotelPriceCard productTypePrices={price.public} />
+              )}
+              {price.member && (
+                <HotelPriceCard
+                  productTypePrices={price.member}
+                  isMemberPrice
+                />
+              )}
+              <Button
+                asChild
+                theme="base"
+                intent="primary"
+                size="small"
+                className={styles.button}
+              >
+                <Link
+                  href={`${selectRate(lang)}?hotel=${hotel.hotelData.operaId}`}
+                  color="none"
+                  keepSearchParams
+                >
+                  {intl.formatMessage({ id: "See rooms" })}
+                </Link>
+              </Button>
+            </>
+          )}
+        </div>
       </div>
     </article>
   )

components/HotelReservation/HotelCardDialog/index.tsx

@@ -17,7 +17,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard"
+import NoPriceAvailableCard from "../HotelCard/NoPriceAvailableCard"
 
 import styles from "./hotelCardDialog.module.css"
 

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -6,7 +6,6 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { z } from "zod"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -78,10 +77,14 @@ export default function RoomFilter({
       </div>
       <div className={styles.infoMobile}>
         <div className={styles.filterInfo}>
-          <Caption type="label" color="burgundy" textTransform="uppercase">
+          <Caption
+            type="label"
+            color="baseTextMediumContrast"
+            textTransform="uppercase"
+          >
             {intl.formatMessage({ id: "Filter" })}
           </Caption>
-          <Caption type="label" color="burgundy">
+          <Caption type="label" color="baseTextMediumContrast">
             {Object.entries(selectedFilters)
               .filter(([_, value]) => value)
               .map(([key]) => intl.formatMessage({ id: key }))

components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css

@@ -16,7 +16,8 @@
   display: flex;
   flex-direction: row;
   gap: var(--Spacing-x-half);
-  align-items: flex-end;
+  flex-wrap: wrap;
+  margin-right: var(--Spacing-x1);
 }
 
 .infoDesktop {

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -46,6 +46,13 @@ input[type="radio"]:checked + .card .checkIcon {
 .header {
   display: flex;
   gap: var(--Spacing-x-half);
+  align-items: flex-start;
+}
+
+.priceType {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-wrap: wrap;
 }
 
 .button {

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

@@ -89,8 +89,10 @@ export default function FlexibilityOption({
               </Caption>
             ))}
           </Popover>
-          <Caption color="uiTextHighContrast">{name}</Caption>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <div className={styles.priceType}>
+            <Caption color="uiTextHighContrast">{name}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
         </div>
         <PriceTable
           publicPrice={publicPrice}

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

@@ -77,11 +77,13 @@ export default function RoomCard({
       packages?.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
     undefined
 
-  const selectedRoom = roomCategories.find(
-    (room) => room.name === roomConfiguration.roomType
+  const selectedRoom = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.some(
+      (roomType) => roomType.code === roomConfiguration.roomTypeCode
+    )
   )
 
-  const { roomSize, occupancy, images } = selectedRoom || {}
+  const { name, roomSize, occupancy, images } = selectedRoom || {}
 
   const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
   const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -174,7 +176,7 @@ export default function RoomCard({
         </div>
         <div className={styles.roomDetails}>
           <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
+            {name}
           </Subtitle>
           {/* Out of scope for now
             <Body>{descriptions?.short}</Body>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -20,9 +20,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   gap: var(--Spacing-x1);
   padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
-  height: 40px;
 }
 
 .specification .guests {
@@ -34,6 +34,10 @@
   margin-left: auto;
 }
 
+.toggleSidePeek button {
+  text-align: start;
+}
+
 .container {
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
   display: flex;

components/SidePeeks/RoomSidePeek/roomSidePeek.module.css

@@ -50,6 +50,10 @@
   margin-bottom: var(--Spacing-x-half);
 }
 
+.facilityList li svg {
+  flex-shrink: 0;
+}
+
 .noIcon {
   margin-left: var(--Spacing-x4);
 }