Merged in feat/SW-1652-confirmation-page (pull request #1483)

Feat/SW-1652 confirmation page * feat(SW-1652): handle linkedReservations fetching * fix: add missing translations * feat: add linkedReservation retry functionality * chore: align naming Approved-by: Simon.Emanuelsson
2025-03-07 12:47:04 +00:00
parent 7fa86a2077
commit ec60e9abdd
34 changed files with 474 additions and 303 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./totalPrice.module.css"
+
+export default function TotalPrice() {
+  const intl = useIntl()
+  const rooms = useBookingConfirmationStore((state) => state.rooms)
+  const currencyCode = useBookingConfirmationStore(
+    (state) => state.currencyCode
+  )
+  const hasAllRoomsLoaded = rooms.every((room) => room)
+  const grandTotal = rooms.reduce((acc, room) => {
+    const reservationTotalPrice = room?.totalPrice || 0
+    return acc + reservationTotalPrice
+  }, 0)
+
+  return (
+    <>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.price}>
+        <div className={styles.entry}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Total price" })}
+          </Body>
+          {hasAllRoomsLoaded ? (
+            <Body textTransform="bold">
+              {formatPrice(intl, grandTotal, currencyCode)}
+            </Body>
+          ) : (
+            <SkeletonShimmer width={"25%"} />
+          )}
+        </div>
+        {hasAllRoomsLoaded ? (
+          <div className={styles.entry}>
+            <Button
+              className={styles.btn}
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              {intl.formatMessage({ id: "Price details" })}
+              <ChevronRightSmallIcon />
+            </Button>
+          </div>
+        ) : (
+          <div className={styles.priceDetailsLoader}>
+            <SkeletonShimmer width={"100%"} />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css
@@ -0,0 +1,12 @@
+.entry {
+  display: flex;
+  justify-content: space-between;
+}
+
+.price button.btn {
+  padding: 0;
+}
+
+.priceDetailsLoader {
+  padding-top: var(--Spacing-x1);
+}