Merged in feat/SW-1055-Accordion-for-summary-bar-in-mobile-on-Select-Rate (pull request #1283)

Feat/SW-1055 Accordion for summary bar in mobile on Select Rate * feat(SW-1055) created mobile summary for select rate * feat(SW-1055) Added summary for mobile (accordion) Approved-by: Tobias Johansson
2025-02-10 15:11:31 +00:00
parent 5a0edc9187
commit c863294919
20 changed files with 405 additions and 89 deletions
--- a/components/HotelReservation/SelectRate/RateSummary/MobileSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RateSummary/MobileSummary/index.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
+
+import SummaryUI from "@/components/HotelReservation/EnterDetails/Summary/UI"
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./mobileSummary.module.css"
+
+import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
+
+export default function MobileSummary({
+  totalPriceToShow,
+  isAllRoomsSelected,
+  booking,
+  isUserLoggedIn,
+  vat,
+  roomsAvailability,
+}: MobileSummaryProps) {
+  const intl = useIntl()
+  const scrollY = useRef(0)
+
+  const {
+    guestsInRooms,
+    isSummaryOpen,
+    getSelectedRateSummary,
+    toggleSummaryOpen,
+    togglePriceDetailsModalOpen,
+  } = useRateSelectionStore()
+
+  const selectedRateSummary = getSelectedRateSummary()
+
+  const rooms = selectedRateSummary.map((room, index) => ({
+    adults: guestsInRooms[index].adults,
+    childrenInRoom: guestsInRooms[index].children,
+    roomType: room.roomType,
+    roomPrice: {
+      perNight: {
+        local: {
+          price: room.public.localPrice.pricePerNight,
+          currency: room.public.localPrice.currency,
+        },
+        requested: undefined,
+      },
+      perStay: {
+        local: {
+          price: room.public.localPrice.pricePerStay,
+          currency: room.public.localPrice.currency,
+        },
+        requested: undefined,
+      },
+      currency: room.public.localPrice.currency,
+    },
+    bedType: undefined,
+    breakfast: undefined,
+    guest: undefined,
+    roomRate: {
+      ...room.public,
+      memberRate: room.member,
+      publicRate: room.public,
+    },
+    rateDetails: roomsAvailability.rateDefinitions.find(
+      (rate) => rate.rateCode === room.public.rateCode
+    )?.generalTerms,
+    cancellationText:
+      roomsAvailability.rateDefinitions.find(
+        (rate) => rate.rateCode === room.public.rateCode
+      )?.cancellationText ?? "",
+  }))
+
+  useEffect(() => {
+    if (isSummaryOpen) {
+      scrollY.current = window.scrollY
+      document.body.style.position = "fixed"
+      document.body.style.top = `-${scrollY.current}px`
+      document.body.style.width = "100%"
+    } else {
+      document.body.style.position = ""
+      document.body.style.top = ""
+      document.body.style.width = ""
+      window.scrollTo({
+        top: scrollY.current,
+        left: 0,
+        behavior: "instant",
+      })
+    }
+
+    return () => {
+      document.body.style.position = ""
+      document.body.style.top = ""
+    }
+  }, [isSummaryOpen])
+
+  return (
+    <div className={styles.wrapper} data-open={isSummaryOpen}>
+      <div className={styles.content}>
+        <div className={styles.summaryAccordion}>
+          <SummaryUI
+            booking={booking}
+            rooms={rooms}
+            isMember={isUserLoggedIn}
+            packages={undefined}
+            totalPrice={totalPriceToShow}
+            vat={vat}
+            breakfastIncluded={false}
+            toggleSummaryOpen={toggleSummaryOpen}
+            togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
+          />
+        </div>
+      </div>
+      <div className={styles.bottomSheet}>
+        <button
+          data-open={isSummaryOpen}
+          onClick={(e) => {
+            e.preventDefault()
+            toggleSummaryOpen()
+          }}
+          className={styles.priceDetailsButton}
+        >
+          <Caption>{intl.formatMessage({ id: "Total price" })}</Caption>
+          <Subtitle>
+            {formatPrice(
+              intl,
+              totalPriceToShow.local.price,
+              totalPriceToShow.local.currency
+            )}
+          </Subtitle>
+          <Caption color="baseTextHighContrast" type="underline">
+            {intl.formatMessage({ id: "See details" })}
+          </Caption>
+        </button>
+        <Button
+          intent="primary"
+          theme="base"
+          size="large"
+          type="submit"
+          fullWidth
+          disabled={!isAllRoomsSelected}
+        >
+          {intl.formatMessage({ id: "Continue" })}
+        </Button>
+      </div>
+    </div>
+  )
+}