Merged in feat(SW-1274)-modify-date-my-stay (pull request #1528)

Feat(SW-1274) modify date my stay

* feat(SW-1676): Modify guest details step 1

* feat(SW-1676) Integration to api to update guest details

* feat(SW-1676) Reuse of old modal

* feat(SW-1676) updated modify guest

* feat(SW-1676) cleanup

* feat(SW-1274) modify stay modal and datepicker

* feat(SW-1274) DatePicker from modify dates

* feat(SW-1274) Modify dates fixes and merge conflicts

* feat(SW-1274) handle modify for multiroom

* feat(SW-1274) update manage stay

* feat(SW-1274) fixed some comments

* feat(SW-1274) use Modal instead

* feat(SW-1274) fixed formatChildBedPreferences

* feat(SW-1274) removed any as prop

* feat(SW-1274) fix rebase conflicts

* feat(SW-1274) fix flicker on modify modal

* feat(SW-1274) CalendarButton

* feat(SW-1274) fixed gap variable

* feat(SW-1274) simplified code

* feat(SW-1274) Split up DatePicker on mode

* feat(SW-1274) Updated file structure for datepicker


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx

@@ -8,6 +8,7 @@ import { dt } from "@/lib/dt"
 
 import { BookingCodeIcon } from "@/components/Icons"
 import CrossCircleIcon from "@/components/Icons/CrossCircle"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -19,17 +20,19 @@ import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import ManageStay from "../ManageStay"
+import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
 
 import styles from "./referenceCard.module.css"
 
 import type { Hotel } from "@/types/hotel"
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-import type { CreditCard } from "@/types/user"
+import { type CreditCard, type User } from "@/types/user"
 
 interface ReferenceCardProps {
   booking: BookingConfirmation["booking"]
   hotel: Hotel
+  user: User | null
   savedCreditCards: CreditCard[] | null
   refId: string
 }
@@ -37,6 +40,7 @@ interface ReferenceCardProps {
 export function ReferenceCard({
   booking,
   hotel,
+  user,
   savedCreditCards,
   refId,
 }: ReferenceCardProps) {
@@ -44,9 +48,14 @@ export function ReferenceCard({
   const intl = useIntl()
   const lang = useLang()
   const { totalPrice, currencyCode } = useMyStayTotalPriceStore()
+  const { rooms } = useMyStayRoomDetailsStore()
 
-  const fromDate = dt(booking.checkInDate).locale(lang)
-  const toDate = dt(booking.checkOutDate).locale(lang)
+  const fromDate = rooms[0]
+    ? dt(rooms[0].checkInDate).locale(lang)
+    : dt(booking.checkInDate).locale(lang)
+  const toDate = rooms[0]
+    ? dt(rooms[0].checkOutDate).locale(lang)
+    : dt(booking.checkOutDate).locale(lang)
 
   const isCancelled = bookingStatus === BookingStatusEnum.Cancelled
   useGuaranteePaymentFailedToast()
@@ -137,7 +146,7 @@ export function ReferenceCard({
           {intl.formatMessage({ id: "Check-out" })}
         </Caption>
         <Caption type="bold" color="uiTextHighContrast">
-          {`${toDate.format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
+          {`${toDate.format("dddd, D MMMM")} ${intl.formatMessage({ id: "until" })} ${toDate.format("HH:mm")}`}
         </Caption>
       </div>
       <Divider color="primaryLightSubtle" className={styles.divider} />
@@ -147,11 +156,16 @@ export function ReferenceCard({
           type="bold"
           color="uiTextHighContrast"
         >
-          {intl.formatMessage({ id: "Total paid" })}
-        </Caption>
-        <Caption type="bold" color="uiTextHighContrast">
-          {formatPrice(intl, totalPrice, currencyCode)}
+          {intl.formatMessage({ id: "Total" })}
         </Caption>
+
+        {totalPrice ? (
+          <Caption type="bold" color="uiTextHighContrast">
+            {formatPrice(intl, totalPrice, currencyCode)}
+          </Caption>
+        ) : (
+          <SkeletonShimmer width="50px" height="18px" />
+        )}
       </div>
       {booking?.bookingCode && (
         <div className={styles.referenceRow}>
@@ -181,6 +195,7 @@ export function ReferenceCard({
         <ManageStay
           booking={booking}
           hotel={hotel}
+          user={user}
           setBookingStatus={setBookingStatus}
           bookingStatus={bookingStatus}
           savedCreditCards={savedCreditCards}
@@ -194,15 +209,9 @@ export function ReferenceCard({
       </div>
       {booking.isModifiable && (
         <Caption className={styles.note} color="uiTextHighContrast">
-          {intl.formatMessage(
-            {
-              id: "Changes can be made until {time} on {date}, subject to availability. Room rates may vary.",
-            },
-            {
-              date: fromDate.format("D MMMM"),
-              time: "18:00",
-            }
-          )}
+          {booking.rateDefinition.generalTerms.map((term) => (
+            <span key={term}>{term} </span>
+          ))}
         </Caption>
       )}
     </div>