Merged in fix/SW-1119-select-room-same-currency (pull request #1075)

fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): use debounce and observer for performance

* fix(SW-1119): export selector variable to utils


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

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

@@ -28,7 +28,10 @@ export default function PriceList({
   const petRoomLocalPrice = petRoomPackage?.localPrice
   const petRoomRequestedPrice = petRoomPackage?.requestedPrice
 
-  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+  const showRequestedPrice =
+    publicRequestedPrice &&
+    memberRequestedPrice &&
+    publicRequestedPrice.currency !== publicLocalPrice.currency
   const searchParams = useSearchParams()
   const fromDate = searchParams.get("fromDate")
   const toDate = searchParams.get("toDate")
@@ -114,27 +117,22 @@ export default function PriceList({
           )}
         </dd>
       </div>
-
-      <div className={styles.priceRow}>
-        <dt>
-          <Caption
-            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
-          >
-            {intl.formatMessage({ id: "Approx." })}
-          </Caption>
-        </dt>
-        <dd>
-          {showRequestedPrice ? (
+      {showRequestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+          </dt>
+          <dd>
             <Caption color="uiTextMediumContrast">
               {totalPublicRequestedPricePerNight}/
               {totalMemberRequestedPricePerNight}{" "}
               {publicRequestedPrice.currency}
             </Caption>
-          ) : (
-            <Caption color="disabled">- / - EUR</Caption>
-          )}
-        </dd>
-      </div>
+          </dd>
+        </div>
+      )}
     </dl>
   )
 }

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

@@ -7,6 +7,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import Popover from "@/components/TempDesignSystem/Popover"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import { rateCardEqualHeightSelector } from "../utils"
 import PriceTable from "./PriceList"
 
 import styles from "./flexibilityOption.module.css"
@@ -26,11 +27,13 @@ export default function FlexibilityOption({
 
   if (!product) {
     return (
-      <div className={styles.noPricesCard}>
+      <div className={`${styles.noPricesCard} ${rateCardEqualHeightSelector}`}>
         <div className={styles.header}>
           <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
-          <Caption>{name}</Caption>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <div className={styles.priceType}>
+            <Caption>{name}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
         </div>
         <Label size="regular" className={styles.noPricesLabel}>
           <Caption color="uiTextHighContrast" type="bold">
@@ -70,7 +73,7 @@ export default function FlexibilityOption({
         value={publicPrice?.rateCode}
         onClick={onClick}
       />
-      <div className={styles.card}>
+      <div className={`${styles.card} ${rateCardEqualHeightSelector}`}>
         <div className={styles.header}>
           <Popover
             placement="bottom left"