Merged in feat/SW-1813 (pull request #1516)

Feat/SW-1813

* feat(SW-1652): handle linkedReservations fetching

* feat: add linkedReservation retry functionality

* chore: align naming

* feat(SW-1813): Add booking confirmation PriceDetailsModal


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -4,21 +4,22 @@ 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 PriceDetailsModal from "../../PriceDetailsModal"
+
 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 { rooms, currencyCode } = useBookingConfirmationStore((state) => ({
+    rooms: state.rooms,
+    currencyCode: state.currencyCode,
+  }))
+
   const hasAllRoomsLoaded = rooms.every((room) => room)
   const grandTotal = rooms.reduce((acc, room) => {
     const reservationTotalPrice = room?.totalPrice || 0
@@ -42,19 +43,7 @@ export default function TotalPrice() {
           )}
         </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>
+          <PriceDetailsModal />
         ) : (
           <div className={styles.priceDetailsLoader}>
             <SkeletonShimmer width={"100%"} />