Merged in feat(SW-1275)-cancel-booking-my-stay (pull request #1376)

Feat(SW-1275) cancel booking my stay * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276) fixed translations * feat(SW-1275) cancel modal * feat(SW-1275): Mutate cancel booking * feat(SW-1275) added translations * feat(SW-1275) match current cancellationReason * feat(SW-1275) Added modal for manage stay * feat(SW-1275) Added missing icon * feat(SW-1275) New Dont cancel button * feat(SW-1275) Added preperation for Cancellation number * feat(SW-1275): added --modal-box-shadow * feat(SW-1718) Add to calendar * feat(SW-1718) general add to calendar Approved-by: Niclas Edenvin
2025-02-21 09:06:15 +00:00
parent 8ed521de3f
commit a0286603db
45 changed files with 1358 additions and 104 deletions
--- a/components/HotelReservation/MyStay/CancelStay/FinalConfirmation/index.tsx
+++ b/components/HotelReservation/MyStay/CancelStay/FinalConfirmation/index.tsx
@@ -0,0 +1,55 @@
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "../cancelStay.module.css"
+
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+interface FinalConfirmationProps {
+  booking: BookingConfirmation["booking"]
+  stayDetails: {
+    nightsText: string
+    adultsText: string
+    childrenText: string
+  }
+}
+
+export function FinalConfirmation({
+  booking,
+  stayDetails,
+}: FinalConfirmationProps) {
+  const intl = useIntl()
+
+  return (
+    <>
+      <div className={styles.modalText}>
+        <Body color="uiTextHighContrast">
+          {intl.formatMessage({
+            id: "Are you sure you want to continue with the cancellation?",
+          })}
+        </Body>
+      </div>
+      <div className={styles.priceContainer}>
+        <div className={styles.info}>
+          <Caption color="uiTextHighContrast" type="bold">
+            {intl.formatMessage({ id: "Cancellation cost" })}
+          </Caption>
+          <Caption color="uiTextHighContrast">
+            {stayDetails.nightsText}, {stayDetails.adultsText}
+            {booking.childrenAges?.length > 0
+              ? `, ${stayDetails.childrenText}`
+              : ""}
+          </Caption>
+        </div>
+        <div className={styles.price}>
+          <Subtitle color="burgundy" type="one">
+            0 {booking.currencyCode}
+          </Subtitle>
+        </div>
+      </div>
+    </>
+  )
+}