Merged in feat/BOOK-529-update-GLA-design-mystay (pull request #3230)

Feat/BOOK-529 update GLA design mystay

* feat(BOOK-529): update gla design on my stay

* feat(BOOK-529): open gla modal if error

* feat(BOOK-529): add inline accordion to storybook

* feat(529): move errormessage below message

* feat(529): update infomodal

* feat(BOOK-529): update infomodal

* feat(BOOK-529): hide guarantee info for adding ancillaries if prepaid

* feat(BOOK-529): update width on info dialog

* feat(BOOK-529): fix alignment

* feat(BOOK-529): check if member price

* feat(BOOK-529): refactor msg

* feat(BOOK-529): refactor terms and conditions to own component

* feat(BOOK-529): clean up confirmation step


Approved-by: Christel Westerberg

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx

@@ -1,39 +1,15 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { sumPackages } from "@scandic-hotels/booking-flow/utils/SelectRate"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { useMyStayStore } from "@/stores/my-stay"
-
-import PriceType from "@/components/HotelReservation/MyStay/PriceType"
+import TotalPrice from "../../../TotalPrice"
 
 import styles from "./details.module.css"
 
 export default function PriceDetails() {
   const intl = useIntl()
 
-  const pricing = useMyStayStore((state) => ({
-    cheques: state.bookedRoom.cheques,
-    formattedTotalPrice: state.totalPrice,
-    isCancelled: state.bookedRoom.isCancelled,
-    currencyCode: state.bookedRoom.currencyCode,
-    packages: state.bookedRoom.packages,
-    priceType: state.bookedRoom.priceType,
-    rateDefinition: state.bookedRoom.rateDefinition,
-    totalPoints: state.bookedRoom.totalPoints,
-    totalPrice: state.bookedRoom.totalPrice,
-    vouchers: state.bookedRoom.vouchers,
-  }))
-
-  let totalPrice = pricing.totalPrice
-  // API returns negative values for totalPrice
-  // on voucher bookings (╯°□°）╯︵ ┻━┻
-  if (pricing.vouchers && totalPrice < 0) {
-    const pkgsSum = sumPackages(pricing.packages)
-    totalPrice = pkgsSum.price
-  }
-
   return (
     <div className={styles.priceDetails}>
       <div className={styles.price}>
@@ -45,7 +21,7 @@ export default function PriceDetails() {
             })}
           </p>
         </Typography>
-        <PriceType {...pricing} totalPrice={totalPrice} />
+        <TotalPrice />
       </div>
     </div>
   )

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

@@ -23,7 +23,11 @@ export default function RoomDetailsSidePeek({
   user,
 }: RoomDetailsSidePeekProps) {
   const intl = useIntl()
-  const bookedRoom = useMyStayStore((state) => state.bookedRoom)
+  const { bookedRoom, totalPrice } = useMyStayStore((state) => ({
+    bookedRoom: state.bookedRoom,
+    totalPrice: state.totalPrice,
+  }))
+
   const [isOpen, setIsOpen] = useState(false)
 
   return (
@@ -53,7 +57,11 @@ export default function RoomDetailsSidePeek({
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
       >
-        <BookedRoomSidePeekContent room={bookedRoom} user={user} />
+        <BookedRoomSidePeekContent
+          room={bookedRoom}
+          user={user}
+          totalPriceBooking={totalPrice}
+        />
       </SidePeekSelfControlled>
     </>
   )

apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice.tsx

@@ -1,41 +1,22 @@
 "use client"
-import { sumPackages } from "@scandic-hotels/booking-flow/utils/SelectRate"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
-import PriceType from "../PriceType"
+import Price from "../PriceType/Price"
 
 import type { PriceType as _PriceType } from "@/types/components/hotelReservation/myStay/myStay"
 
 export default function TotalPrice() {
-  const { bookedRoom, formattedTotalPrice, rooms } = useMyStayStore(
-    (state) => ({
-      bookedRoom: state.bookedRoom,
-      formattedTotalPrice: state.totalPrice,
-      rooms: state.rooms,
-    })
-  )
-
-  const totalCheques = rooms.reduce((total, room) => total + room.cheques, 0)
-  const totalPoints = rooms.reduce((total, room) => total + room.totalPoints, 0)
-
-  let totalPrice = rooms.reduce((total, room) => total + room.totalPrice, 0)
-  if (rooms.some((room) => room.vouchers)) {
-    const pkgsSum = sumPackages(rooms.flatMap((r) => r.packages || []))
-    totalPrice = pkgsSum.price
-  }
-
+  const { bookedRoom, totalPrice } = useMyStayStore((state) => ({
+    bookedRoom: state.bookedRoom,
+    totalPrice: state.totalPrice,
+    rooms: state.rooms,
+  }))
   return (
-    <PriceType
-      cheques={totalCheques}
-      formattedTotalPrice={formattedTotalPrice}
+    <Price
       isCancelled={bookedRoom.isCancelled}
-      currencyCode={bookedRoom.currencyCode}
-      priceType={bookedRoom.priceType}
-      rateDefinition={bookedRoom.rateDefinition}
-      totalPoints={totalPoints}
-      totalPrice={totalPrice}
-      vouchers={bookedRoom.vouchers}
+      isMember={bookedRoom.rateDefinition.isMemberRate}
+      price={totalPrice}
     />
   )
 }