fix: align price formatting

2025-01-02 10:54:19 +01:00
parent 4f58784a22
commit 139accb8ed
26 changed files with 198 additions and 193 deletions
@@ -10,7 +10,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import getSingleDecimal from "@/utils/numberFormatting"
+import { getSingleDecimal } from "@/utils/numberFormatting"

 import ReadMore from "../../ReadMore"
 import TripAdvisorChip from "../../TripAdvisorChip"
@@ -10,6 +10,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatPrice } from "@/utils/numberFormatting"

 import styles from "./rateSummary.module.css"

@@ -48,9 +49,6 @@ export default function RateSummary({
    (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
  )

-  const petRoomPrice = petRoomPackage?.localPrice.totalPrice ?? null
-  const petRoomCurrency = petRoomPackage?.localPrice.currency ?? null
-
  const checkInDate = new Date(roomsAvailability.checkInDate)
  const checkOutDate = new Date(roomsAvailability.checkOutDate)
  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
@@ -106,22 +104,33 @@ export default function RateSummary({
                color={isUserLoggedIn ? "red" : "uiTextHighContrast"}
                textAlign="right"
              >
-                {priceToShow?.localPrice.pricePerStay}{" "}
-                {priceToShow?.localPrice.currency}
+                {formatPrice(
+                  intl,
+                  priceToShow.localPrice.pricePerStay,
+                  priceToShow.localPrice.currency
+                )}
              </Subtitle>
-              <Body color="uiTextMediumContrast">
-                {intl.formatMessage({ id: "Approx." })}{" "}
-                {priceToShow?.requestedPrice?.pricePerStay}{" "}
-                {priceToShow?.requestedPrice?.currency}
-              </Body>
+              {priceToShow?.requestedPrice ? (
+                <Body color="uiTextMediumContrast">
+                  {intl.formatMessage({ id: "Approx." })}{" "}
+                  {formatPrice(
+                    intl,
+                    priceToShow.requestedPrice.pricePerStay,
+                    priceToShow.requestedPrice.currency
+                  )}
+                </Body>
+              ) : null}
            </div>
            <div className={styles.summaryPriceTextMobile}>
              <Caption color="uiTextHighContrast">
                {intl.formatMessage({ id: "Total price" })}
              </Caption>
              <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
-                {priceToShow?.localPrice.pricePerStay}{" "}
-                {priceToShow?.localPrice.currency}
+                {formatPrice(
+                  intl,
+                  priceToShow.localPrice.pricePerStay,
+                  priceToShow.localPrice.currency
+                )}
              </Subtitle>
              <Footnote
                color="uiTextMediumContrast"
@@ -130,14 +139,19 @@ export default function RateSummary({
                {summaryPriceTex}
              </Footnote>
            </div>
-            {isPetRoomSelected && (
+            {isPetRoomSelected && petRoomPackage?.localPrice && (
              <div className={styles.petInfo}>
                <Body
                  color="uiTextHighContrast"
                  textTransform="bold"
                  textAlign="right"
                >
-                  + {petRoomPrice} {petRoomCurrency}
+                  +{" "}
+                  {formatPrice(
+                    intl,
+                    parseInt(petRoomPackage.localPrice.totalPrice),
+                    petRoomPackage.localPrice.currency
+                  )}
                </Body>
                <Body color="uiTextMediumContrast" textAlign="right">
                  {intl.formatMessage({ id: "Pet charge" })}
@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"

 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { formatPrice } from "@/utils/numberFormatting"

 import styles from "./selectionCard.module.css"

@@ -29,15 +30,17 @@ export default function SelectionCard({

      <div>
        <Caption color="burgundy" className={styles.price}>
-          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
-          {price} {currency}/{intl.formatMessage({ id: "night" })}
-        </Caption>
-
-        <Caption color="burgundy" className={styles.membersPrice}>
-          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
-          {intl.formatMessage({ id: "Members" })} {membersPrice} {currency}/
+          {formatPrice(intl, price, currency)}/
          {intl.formatMessage({ id: "night" })}
        </Caption>
+
+        {membersPrice && (
+          <Caption color="burgundy" className={styles.membersPrice}>
+            {intl.formatMessage({ id: "Members" })}{" "}
+            {formatPrice(intl, membersPrice, currency)}/
+            {intl.formatMessage({ id: "night" })}
+          </Caption>
+        )}
      </div>
    </div>
  )