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>
   )