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
2024-11-26 09:00:15 +00:00
parent d6cff63c5e
commit 9fc65b6e53
15 changed files with 95 additions and 95 deletions
@@ -0,0 +1,27 @@
+.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%;
+}
+.divider {
+  margin: var(--Spacing-x-half) 0;
+}
+
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--Spacing-x-quarter) 0;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.perNight {
+  font-weight: 400;
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
@@ -0,0 +1,94 @@
+import { useIntl } from "react-intl"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./hotelPriceCard.module.css"
+
+import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
+
+export default function HotelPriceCard({
+  productTypePrices,
+  isMemberPrice = false,
+}: PriceCardProps) {
+  const intl = useIntl()
+
+  return (
+    <dl className={styles.priceCard}>
+      {isMemberPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="red">
+              {intl.formatMessage({ id: "Member price" })}
+            </Caption>
+          </dt>
+        </div>
+      )}
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            type="bold"
+            color={isMemberPrice ? "red" : "uiTextHighContrast"}
+          >
+            {intl.formatMessage({ id: "From" })}
+          </Caption>
+        </dt>
+        <dd>
+          <div className={styles.price}>
+            <Subtitle
+              type="two"
+              color={isMemberPrice ? "red" : "uiTextHighContrast"}
+            >
+              {productTypePrices.localPrice.pricePerNight}
+            </Subtitle>
+            <Body
+              color={isMemberPrice ? "red" : "uiTextHighContrast"}
+              textTransform="bold"
+            >
+              {productTypePrices.localPrice.currency}
+              <span className={styles.perNight}>
+                /{intl.formatMessage({ id: "night" })}
+              </span>
+            </Body>
+          </div>
+        </dd>
+      </div>
+      {productTypePrices?.requestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+          </dt>
+          <dd>
+            <Caption color={"uiTextMediumContrast"}>
+              {productTypePrices.requestedPrice.pricePerNight}{" "}
+              {productTypePrices.requestedPrice.currency}
+            </Caption>
+          </dd>
+        </div>
+      )}
+      {productTypePrices.localPrice.pricePerStay !==
+        productTypePrices.localPrice.pricePerNight && (
+        <>
+          <Divider color="subtle" className={styles.divider} />
+          <div className={styles.priceRow}>
+            <dt>
+              <Caption color="uiTextMediumContrast">
+                {intl.formatMessage({ id: "Total" })}
+              </Caption>
+            </dt>
+            <dd>
+              <Caption color={"uiTextMediumContrast"}>
+                {productTypePrices.localPrice.pricePerStay}{" "}
+                {productTypePrices.localPrice.currency}
+              </Caption>
+            </dd>
+          </div>
+        </>
+      )}
+    </dl>
+  )
+}