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
--- a/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
@@ -9,6 +9,7 @@ import { formId } from "@/components/HotelReservation/EnterDetails/Payment/Payme
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatPrice } from "@/utils/numberFormatting"

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

@@ -56,12 +57,10 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
        >
          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
          <Subtitle>
-            {intl.formatMessage(
-              { id: "{amount} {currency}" },
-              {
-                amount: intl.formatNumber(totalPrice.local.price),
-                currency: totalPrice.local.currency,
-              }
+            {formatPrice(
+              intl,
+              totalPrice.local.price,
+              totalPrice.local.currency
            )}
          </Subtitle>
          <Caption color="baseTextHighContrast" type="underline">
--- a/components/HotelReservation/EnterDetails/Summary/PriceDetailsTable/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/PriceDetailsTable/index.tsx
@@ -9,6 +9,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 import { getNights } from "@/utils/dateFormatting"
+import { formatPrice } from "@/utils/numberFormatting"

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

@@ -47,13 +48,9 @@ export function storeSelector(state: DetailsState) {
    bedType: state.bedType,
    booking: state.booking,
    breakfast: state.breakfast,
-    join: state.guest.join,
-    membershipNo: state.guest.membershipNo,
    packages: state.packages,
    roomRate: state.roomRate,
    roomPrice: state.roomPrice,
-    toggleSummaryOpen: state.actions.toggleSummaryOpen,
-    togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen,
    totalPrice: state.totalPrice,
    vat: state.vat,
  }
@@ -65,20 +62,8 @@ export default function PriceDetailsTable({
  const intl = useIntl()
  const lang = useLang()

-  const {
-    bedType,
-    booking,
-    breakfast,
-    join,
-    membershipNo,
-    packages,
-    roomPrice,
-    roomRate,
-    toggleSummaryOpen,
-    togglePriceDetailsModalOpen,
-    totalPrice,
-    vat,
-  } = useEnterDetailsStore(storeSelector)
+  const { bedType, booking, breakfast, roomPrice, totalPrice, vat } =
+    useEnterDetailsStore(storeSelector)

  // TODO: Update for Multiroom later
  const { adults, children } = booking.rooms[0]
@@ -98,10 +83,11 @@ export default function PriceDetailsTable({
            <Row
              key={night.format("YYMMDD")}
              label={dt(night).locale(lang).format("ddd, D MMM YYYY")}
-              value={intl.formatNumber(roomPrice.perNight.local.price, {
-                currency: roomPrice.perNight.local.currency,
-                style: "currency",
-              })}
+              value={formatPrice(
+                intl,
+                roomPrice.perNight.local.price,
+                roomPrice.perNight.local.currency
+              )}
            />
          )
        })}
@@ -110,10 +96,7 @@ export default function PriceDetailsTable({
        <TableSection>
          <Row
            label={bedType.description}
-            value={intl.formatNumber(0, {
-              currency: roomPrice.perStay.local.currency,
-              style: "currency",
-            })}
+            value={formatPrice(intl, 0, roomPrice.perStay.local.currency)}
          />
        </TableSection>
      ) : null}
@@ -125,12 +108,10 @@ export default function PriceDetailsTable({
              { id: "booking.adults.breakfasts" },
              { totalAdults: adults, totalBreakfasts: nights.length }
            )}
-            value={intl.formatNumber(
+            value={formatPrice(
+              intl,
              parseInt(breakfast.localPrice.totalPrice),
-              {
-                currency: breakfast.localPrice.currency,
-                style: "currency",
-              }
+              breakfast.localPrice.currency
            )}
          />
          {children?.length ? (
@@ -142,10 +123,7 @@ export default function PriceDetailsTable({
                  totalBreakfasts: nights.length,
                }
              )}
-              value={intl.formatNumber(0, {
-                currency: breakfast.localPrice.currency,
-                style: "currency",
-              })}
+              value={formatPrice(intl, 0, breakfast.localPrice.currency)}
            />
          ) : null}
        </TableSection>
@@ -154,17 +132,11 @@ export default function PriceDetailsTable({
        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
        <Row
          label={intl.formatMessage({ id: "booking.vat.excl" })}
-          value={intl.formatNumber(priceExclVat, {
-            currency: totalPrice.local.currency,
-            style: "currency",
-          })}
+          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
        />
        <Row
          label={intl.formatMessage({ id: "booking.vat" }, { vat })}
-          value={intl.formatNumber(vatAmount, {
-            currency: totalPrice.local.currency,
-            style: "currency",
-          })}
+          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
        />
        <tr className={styles.row}>
          <td>
@@ -174,10 +146,11 @@ export default function PriceDetailsTable({
          </td>
          <td className={styles.price}>
            <Body textTransform="bold">
-              {intl.formatNumber(totalPrice.local.price, {
-                currency: totalPrice.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(
+                intl,
+                totalPrice.local.price,
+                totalPrice.local.currency
+              )}
            </Body>
          </td>
        </tr>
--- a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -18,7 +18,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
-import { getNights } from "@/utils/dateFormatting"
+import { formatPrice } from "@/utils/numberFormatting"

 import Modal from "../../Modal"
 import PriceDetailsTable from "../PriceDetailsTable"
@@ -148,10 +148,11 @@ export default function SummaryUI({
          <div className={styles.entry}>
            <Body color="uiTextHighContrast">{roomType}</Body>
            <Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
-              {intl.formatNumber(roomPrice.perStay.local.price, {
-                currency: roomPrice.perStay.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(
+                intl,
+                roomPrice.perStay.local.price,
+                roomPrice.perStay.local.currency
+              )}
            </Body>
          </div>
          <Caption color="uiTextMediumContrast">
@@ -196,10 +197,11 @@ export default function SummaryUI({
                </div>

                <Body color="uiTextHighContrast">
-                  {intl.formatNumber(parseInt(roomPackage.localPrice.price), {
-                    currency: roomPackage.localPrice.currency,
-                    style: "currency",
-                  })}
+                  {formatPrice(
+                    intl,
+                    parseInt(roomPackage.localPrice.price),
+                    roomPackage.localPrice.currency
+                  )}
                </Body>
              </div>
            ))
@@ -209,10 +211,7 @@ export default function SummaryUI({
            <Body color="uiTextHighContrast">{bedType.description}</Body>

            <Body color="uiTextHighContrast">
-              {intl.formatNumber(0, {
-                currency: roomPrice.perStay.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(intl, 0, roomPrice.perStay.local.currency)}
            </Body>
          </div>
        ) : null}
@@ -227,10 +226,7 @@ export default function SummaryUI({
              </Caption>
            </div>
            <Body color="uiTextHighContrast">
-              {intl.formatNumber(0, {
-                currency: roomPrice.perStay.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(intl, 0, roomPrice.perStay.local.currency)}
            </Body>
          </div>
        ) : null}
@@ -242,10 +238,7 @@ export default function SummaryUI({
              </Body>
            </div>
            <Body color="uiTextHighContrast">
-              {intl.formatNumber(0, {
-                currency: roomPrice.perStay.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(intl, 0, roomPrice.perStay.local.currency)}
            </Body>
          </div>
        ) : null}
@@ -255,10 +248,7 @@ export default function SummaryUI({
              {intl.formatMessage({ id: "No breakfast" })}
            </Body>
            <Body color="uiTextHighContrast">
-              {intl.formatNumber(0, {
-                currency: roomPrice.perStay.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(intl, 0, roomPrice.perStay.local.currency)}
            </Body>
          </div>
        ) : null}
@@ -275,10 +265,11 @@ export default function SummaryUI({
                )}
              </Caption>
              <Body color="uiTextHighContrast">
-                {intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
-                  currency: breakfast.localPrice.currency,
-                  style: "currency",
-                })}
+                {formatPrice(
+                  intl,
+                  parseInt(breakfast.localPrice.totalPrice),
+                  breakfast.localPrice.currency
+                )}
              </Body>
            </div>
            {children?.length ? (
@@ -290,10 +281,7 @@ export default function SummaryUI({
                  )}
                </Caption>
                <Body color="uiTextHighContrast">
-                  {intl.formatNumber(0, {
-                    currency: breakfast.localPrice.currency,
-                    style: "currency",
-                  })}
+                  {formatPrice(intl, 0, breakfast.localPrice.currency)}
                </Body>
              </div>
            ) : null}
@@ -331,18 +319,20 @@ export default function SummaryUI({
          </div>
          <div>
            <Body textTransform="bold">
-              {intl.formatNumber(totalPrice.local.price, {
-                currency: totalPrice.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(
+                intl,
+                totalPrice.local.price,
+                totalPrice.local.currency
+              )}
            </Body>
            {totalPrice.requested && (
              <Caption color="uiTextMediumContrast">
                {intl.formatMessage({ id: "Approx." })}{" "}
-                {intl.formatNumber(totalPrice.requested.price, {
-                  currency: totalPrice.requested.currency,
-                  style: "currency",
-                })}
+                {formatPrice(
+                  intl,
+                  totalPrice.requested.price,
+                  totalPrice.requested.currency
+                )}
              </Caption>
            )}
          </div>