feat(sw-453): fixed mobile view and some improvements

2024-10-28 13:11:24 +01:00
parent 8da94fc259
commit 917f44f323
20 changed files with 299 additions and 103 deletions
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -9,6 +9,7 @@ import { z } from "zod"
 import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

 import { getIconForFeatureCode } from "../utils"
@@ -49,6 +50,12 @@ export default function RoomFilter({
  const petFriendly = watch(RoomPackageCodeEnum.PETR)
  const allergyFriendly = watch(RoomPackageCodeEnum.ALLG)

+  const selectedFilters = useMemo(() => getValues(), [getValues])
+
+  const tooltipText = intl.formatMessage({
+    id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
+  })
+
  const submitFilter = useCallback(() => {
    const data = getValues()
    onFilter(data)
@@ -61,9 +68,33 @@ export default function RoomFilter({

  return (
    <div className={styles.container}>
-      <Body color="uiTextHighContrast">
-        {intl.formatMessage({ id: "Room types available" }, { numberOfRooms })}
-      </Body>
+      <div className={styles.infoDesktop}>
+        <Body color="uiTextHighContrast">
+          {intl.formatMessage(
+            { id: "Room types available" },
+            { numberOfRooms }
+          )}
+        </Body>
+      </div>
+      <div className={styles.infoMobile}>
+        <div className={styles.filterInfo}>
+          <Caption type="label" color="burgundy" textTransform="uppercase">
+            {intl.formatMessage({ id: "Filter" })}
+          </Caption>
+          <Caption type="label" color="burgundy">
+            {Object.entries(selectedFilters)
+              .filter(([_, value]) => value)
+              .map(([key]) => intl.formatMessage({ id: key }))
+              .join(", ")}
+          </Caption>
+        </div>
+        <Caption color="uiTextHighContrast">
+          {intl.formatMessage(
+            { id: "Room types available" },
+            { numberOfRooms }
+          )}
+        </Caption>
+      </div>
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(submitFilter)}>
          <div className={styles.roomsFilter}>
@@ -80,13 +111,7 @@ export default function RoomFilter({
                Icon={getIconForFeatureCode(option.code)}
              />
            ))}
-            <Tooltip
-              text={intl.formatMessage({
-                id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
-              })}
-              position="bottom"
-              arrow="right"
-            >
+            <Tooltip text={tooltipText} position="bottom" arrow="right">
              <InfoCircleIcon className={styles.infoIcon} />
            </Tooltip>
          </div>
--- a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -17,3 +17,27 @@
  stroke: var(--UI-Text-Medium-contrast);
  fill: transparent;
 }
+.filterInfo {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x-half);
+  align-items: flex-end;
+}
+
+.infoDesktop {
+  display: none;
+}
+
+.infoMobile {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .infoDesktop {
+    display: block;
+  }
+
+  .infoMobile {
+    display: none;
+  }
+}
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -40,6 +40,9 @@ export default function PriceList({
              </Subtitle>
              <Body color="uiTextHighContrast" textTransform="bold">
                {publicLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
              </Body>
            </div>
          ) : (
@@ -64,6 +67,9 @@ export default function PriceList({
              </Subtitle>
              <Body color="red" textTransform="bold">
                {memberLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
              </Body>
            </div>
          ) : (
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
@@ -12,3 +12,8 @@
  display: flex;
  gap: var(--Spacing-x-half);
 }
+
+.perNight {
+  font-weight: 400;
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -2,6 +2,8 @@ import { useIntl } from "react-intl"

 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import styles from "./rateSummary.module.css"
@@ -13,12 +15,19 @@ export default function RateSummary({
  rateSummary,
  isUserLoggedIn,
  packages,
+  roomsAvailability,
 }: RateSummaryProps) {
  const intl = useIntl()
+  const {
+    member,
+    public: publicRate,
+    features,
+    roomType,
+    priceName,
+  } = rateSummary
+  const priceToShow = isUserLoggedIn ? member : publicRate

-  const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
-
-  const isPetRoomSelect = rateSummary.features.some(
+  const isPetRoomSelect = features.some(
    (feature) => feature.code === RoomPackageCodeEnum.PETR
  )

@@ -26,17 +35,23 @@ export default function RateSummary({
    (pkg) => pkg.code === RoomPackageCodeEnum.PETR
  )

-  const petRoomPrice = petRoomPackage ? petRoomPackage.calculatedPrice : null
-  const petRoomCurrency = petRoomPackage ? petRoomPackage.currency : null
+  const petRoomPrice = petRoomPackage?.calculatedPrice ?? null
+  const petRoomCurrency = petRoomPackage?.currency ?? null
+
+  const checkInDate = new Date(roomsAvailability.checkInDate)
+  const checkOutDate = new Date(roomsAvailability.checkOutDate)
+  const nights = Math.ceil(
+    (checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24)
+  )

  return (
    <div className={styles.summary}>
      <div className={styles.summaryText}>
-        <Subtitle color="uiTextHighContrast">{rateSummary.roomType}</Subtitle>
-        <Body color="uiTextMediumContrast">{rateSummary.priceName}</Body>
+        <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
+        <Body color="uiTextMediumContrast">{priceName}</Body>
      </div>
      <div className={styles.summaryPrice}>
-        <div className={styles.summaryPriceText}>
+        <div className={styles.summaryPriceTextDesktop}>
          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
            {priceToShow?.localPrice.pricePerStay}{" "}
            {priceToShow?.localPrice.currency}
@@ -47,6 +62,38 @@ export default function RateSummary({
            {priceToShow?.requestedPrice?.currency}
          </Body>
        </div>
+        <div className={styles.summaryPriceTextMobile}>
+          <Caption color="uiTextHighContrast">
+            {intl.formatMessage({ id: "Total price" })}
+          </Caption>
+          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+            {priceToShow?.localPrice.pricePerStay}{" "}
+            {priceToShow?.localPrice.currency}
+          </Subtitle>
+          <Footnote
+            color="uiTextMediumContrast"
+            className={styles.summaryPriceTextMobile}
+          >
+            {intl.formatMessage(
+              { id: "booking.nights" },
+              { totalNights: nights }
+            )}
+            ,{" "}
+            {intl.formatMessage(
+              { id: "booking.adults" },
+              { totalAdults: roomsAvailability.occupancy?.adults }
+            )}
+            {roomsAvailability.occupancy?.children && (
+              <>
+                ,{" "}
+                {intl.formatMessage(
+                  { id: "booking.children" },
+                  { totalChildren: roomsAvailability.occupancy.children }
+                )}
+              </>
+            )}
+          </Footnote>
+        </div>
        {isPetRoomSelect && (
          <div className={styles.petInfo}>
            <Body color="uiTextHighContrast" textTransform="bold">
@@ -57,7 +104,7 @@ export default function RateSummary({
            </Body>
          </div>
        )}
-        <Button type="submit" theme="base">
+        <Button type="submit" theme="base" className={styles.continueButton}>
          {intl.formatMessage({ id: "Continue" })}
        </Button>
      </div>
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
@@ -5,7 +5,7 @@
  left: 0;
  right: 0;
  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -13,10 +13,50 @@

 .summaryPrice {
  display: flex;
+  width: 100%;
  gap: var(--Spacing-x4);
 }

 .petInfo {
  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  padding-left: var(--Spacing-x2);
+  display: none;
+}
+
+.summaryText {
+  display: none;
+}
+
+.summaryPriceTextDesktop {
+  display: none;
+}
+
+.continueButton {
+  margin-left: auto;
+  height: fit-content;
+  width: 100%;
+}
+
+.summaryPriceTextMobile {
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+  .summary {
+    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  }
+  .petInfo,
+  .summaryText,
+  .summaryPriceTextDesktop {
+    display: block;
+  }
+  .summaryPriceTextMobile {
+    display: none;
+  }
+  .summaryPrice {
+    width: auto;
+  }
+  .continueButton {
+    width: auto;
+  }
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -12,8 +12,8 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import ImageGallery from "../../ImageGallery"
-import RoomSidePeek from "../RoomSidePeek"
 import { getIconForFeatureCode } from "../../utils"
+import RoomSidePeek from "../RoomSidePeek"

 import styles from "./roomCard.module.css"

@@ -26,17 +26,19 @@ export default function RoomCard({
  handleSelectRate,
 }: RoomCardProps) {
  const intl = useIntl()
-  const saveRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "NonCancellable"
-  )
-  const changeRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "Modifiable"
-  )
-  const flexRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "CancellableBefore6PM"
+
+  // TODO: Update string when API has decided
+  const rateTypes = {
+    saveRate: "NonCancellable",
+    changeRate: "Modifiable",
+    flexRate: "CancellableBefore6PM",
+  }
+
+  const rates = Object.fromEntries(
+    Object.entries(rateTypes).map(([key, rule]) => [
+      key,
+      rateDefinitions.find((rate) => rate.cancellationRule === rule),
+    ])
  )

  function findProductForRate(rate: RateDefinition | undefined) {
@@ -49,9 +51,7 @@ export default function RoomCard({
      : undefined
  }

-  function getPriceInformationForRate(
-    rate: typeof saveRate | typeof changeRate | typeof flexRate
-  ) {
+  function getPriceInformationForRate(rate: RateDefinition | undefined) {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
      ?.generalTerms
  }
@@ -59,10 +59,7 @@ export default function RoomCard({
  const selectedRoom = roomCategories.find(
    (room) => room.name === roomConfiguration.roomType
  )
-  const roomSize = selectedRoom?.roomSize
-  const occupancy = selectedRoom?.occupancy.total
-  const roomDescription = selectedRoom?.descriptions.short
-  const images = selectedRoom?.images
+  const { roomSize, occupancy, descriptions, images } = selectedRoom || {}
  const mainImage = images?.[0]

  return (
@@ -74,7 +71,7 @@ export default function RoomCard({
              {
                id: "booking.guests",
              },
-              { nrOfGuests: occupancy }
+              { nrOfGuests: occupancy?.total }
            )}
          </Caption>
          <Caption color="uiTextMediumContrast">
@@ -93,7 +90,7 @@ export default function RoomCard({
            <Subtitle className={styles.name} type="two">
              {roomConfiguration.roomType}
            </Subtitle>
-            <Body>{roomDescription}</Body>
+            <Body>{descriptions?.short}</Body>
          </div>
          <Caption color="uiTextHighContrast">
            {intl.formatMessage({
@@ -101,39 +98,29 @@ export default function RoomCard({
            })}
          </Caption>
          <div className={styles.flexibilityOptions}>
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Non-refundable" })}
-              value="non-refundable"
-              paymentTerm={intl.formatMessage({ id: "Pay now" })}
-              product={findProductForRate(saveRate)}
-              priceInformation={getPriceInformationForRate(saveRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Free rebooking" })}
-              value="free-rebooking"
-              paymentTerm={intl.formatMessage({ id: "Pay now" })}
-              product={findProductForRate(changeRate)}
-              priceInformation={getPriceInformationForRate(changeRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Free cancellation" })}
-              value="free-cancellation"
-              paymentTerm={intl.formatMessage({ id: "Pay later" })}
-              product={findProductForRate(flexRate)}
-              priceInformation={getPriceInformationForRate(flexRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
+            {Object.entries(rates).map(([key, rate]) => (
+              <FlexibilityOption
+                key={key}
+                name={intl.formatMessage({
+                  id:
+                    key === "flexRate"
+                      ? "Free cancellation"
+                      : key === "saveRate"
+                        ? "Non-refundable"
+                        : "Free rebooking",
+                })}
+                value={key.toLowerCase()}
+                paymentTerm={intl.formatMessage({
+                  id: key === "flexRate" ? "Pay later" : "Pay now",
+                })}
+                product={findProductForRate(rate)}
+                priceInformation={getPriceInformationForRate(rate)}
+                handleSelectRate={handleSelectRate}
+                roomType={roomConfiguration.roomType}
+                roomTypeCode={roomConfiguration.roomTypeCode}
+                features={roomConfiguration.features}
+              />
+            ))}
          </div>
        </div>
      </div>
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useMemo,useState } from "react"

 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
@@ -23,27 +23,32 @@ export default function RoomSelection({
  const searchParams = useSearchParams()
  const isUserLoggedIn = !!user

-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+  const { roomConfigurations, rateDefinitions } = roomsAvailability

-    const queryParams = new URLSearchParams(searchParams)
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams(searchParams)
+    const searchParamsObject = getHotelReservationQueryParams(searchParams)

    searchParamsObject.room.forEach((item, index) => {
      if (rateSummary?.roomTypeCode) {
-        queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
+        params.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
      }
      if (rateSummary?.public?.rateCode) {
-        queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
+        params.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
      }
      if (rateSummary?.member?.rateCode) {
-        queryParams.set(
+        params.set(
          `room[${index}].counterratecode`,
          rateSummary.member.rateCode
        )
      }
    })

+    return params
+  }, [searchParams, rateSummary])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
    router.push(`select-bed?${queryParams}`)
  }

@@ -55,10 +60,10 @@ export default function RoomSelection({
        onSubmit={handleSubmit}
      >
        <ul className={styles.roomList}>
-          {roomsAvailability.roomConfigurations.map((roomConfiguration) => (
+          {roomConfigurations.map((roomConfiguration) => (
            <li key={roomConfiguration.roomType}>
              <RoomCard
-                rateDefinitions={roomsAvailability.rateDefinitions}
+                rateDefinitions={rateDefinitions}
                roomConfiguration={roomConfiguration}
                roomCategories={roomCategories}
                handleSelectRate={setRateSummary}
@@ -71,6 +76,7 @@ export default function RoomSelection({
            rateSummary={rateSummary}
            isUserLoggedIn={isUserLoggedIn}
            packages={packages}
+            roomsAvailability={roomsAvailability}
          />
        )}
      </form>
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { useState } from "react"
+import { useCallback,useState } from "react"

 import { RoomsAvailability } from "@/server/routers/hotels/output"

@@ -20,21 +20,25 @@ export default function Rooms({
 }: RoomSelectionProps) {
  const [rooms, setRooms] = useState<RoomsAvailability>(roomsAvailability)

-  function handleFilter(filter: Record<string, boolean | undefined>) {
-    const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+  const handleFilter = useCallback(
+    (filter: Record<string, boolean | undefined>) => {
+      const selectedCodes = Object.keys(filter).filter((key) => filter[key])

-    if (selectedCodes.length === 0) {
-      setRooms(roomsAvailability)
-      return
-    }
+      if (selectedCodes.length === 0) {
+        setRooms(roomsAvailability)
+        return
+      }

-    const filteredRooms = roomsAvailability.roomConfigurations.filter((room) =>
-      room.features.some((feature) =>
-        selectedCodes.includes(feature.code as RoomPackageCodes)
+      const filteredRooms = roomsAvailability.roomConfigurations.filter(
+        (room) =>
+          room.features.some((feature) =>
+            selectedCodes.includes(feature.code as RoomPackageCodes)
+          )
      )
-    )
-    setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
-  }
+      setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
+    },
+    [roomsAvailability]
+  )

  return (
    <div className={styles.content}>