fix(SW-1042)(SW-1114)(SW-1123): fix select room bugs

2024-12-03 11:16:28 +01:00
parent 3c8a83ac59
commit 61f9290487
8 changed files with 173 additions and 106 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -18,9 +18,7 @@ export default function FlexibilityOption({
  name,
  paymentTerm,
  priceInformation,
-  roomType,
  roomTypeCode,
-  features,
  petRoomPackage,
  handleSelectRate,
 }: FlexibilityOptionProps) {
@@ -45,10 +43,22 @@ export default function FlexibilityOption({

  const { public: publicPrice, member: memberPrice } = product.productType

-  function onChange() {
-    handleSelectRate({
+  const onClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
+    handleSelectRate((prev) => {
+      if (
+        prev &&
+        prev.publicRateCode === publicPrice.rateCode &&
+        prev.roomTypeCode === roomTypeCode
+      ) {
+        if (e.currentTarget?.checked) e.currentTarget.checked = false
+        return undefined
+      } else
+        return {
          publicRateCode: publicPrice.rateCode,
          roomTypeCode: roomTypeCode,
+          name: name,
+          paymentTerm: paymentTerm,
+        }
    })
  }

@@ -58,7 +68,7 @@ export default function FlexibilityOption({
        type="radio"
        name="rateCode"
        value={publicPrice?.rateCode}
-        onChange={onChange}
+        onClick={onClick}
      />
      <div className={styles.card}>
        <div className={styles.header}>
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -34,6 +34,7 @@ export default function RateSummary({
    features,
    roomType,
    priceName,
+    priceTerm,
  } = rateSummary
  const priceToShow = isUserLoggedIn && member ? member : publicRate

@@ -80,9 +81,10 @@ export default function RateSummary({
          </Footnote>
        </div>
      )}
+      <div className={styles.content}>
        <div className={styles.summaryText}>
          <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
-        <Body color="uiTextMediumContrast">{priceName}</Body>
+          <Body color="uiTextMediumContrast">{`${priceName}, ${priceTerm}`}</Body>
        </div>
        <div className={styles.summaryPriceContainer}>
          {showMemberDiscountBanner && (
@@ -158,11 +160,16 @@ export default function RateSummary({
                </Body>
              </div>
            )}
-          <Button type="submit" theme="base" className={styles.continueButton}>
+            <Button
+              type="submit"
+              theme="base"
+              className={styles.continueButton}
+            >
              {intl.formatMessage({ id: "Continue" })}
            </Button>
          </div>
        </div>
      </div>
+    </div>
  )
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
@@ -6,12 +6,19 @@
  right: 0;
  background-color: var(--Base-Surface-Primary-light-Normal);
  padding: 0 0 var(--Spacing-x5);
+  align-items: center;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  transition: bottom 300ms ease-in-out;
+}
+
+.content {
+  width: 100%;
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
-  border-top: 1px solid var(--Base-Border-Subtle);
-  transition: bottom 300ms ease-in-out;
 }

 .summary[data-visible="true"] {
@@ -80,7 +87,9 @@

@media (min-width: 768px) {
  .summary {
-    padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x5);
+    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  }
+  .content {
    flex-direction: row;
  }
  .petInfo,
@@ -102,5 +111,6 @@
  .summaryPriceContainer {
    width: auto;
    padding: 0;
+    align-items: center;
  }
 }
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -26,7 +26,13 @@ export default function Rooms({
  const visibleRooms: RoomConfiguration[] =
    filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
  const [selectedRate, setSelectedRate] = useState<
-    { publicRateCode: string; roomTypeCode: string } | undefined
+    | {
+        publicRateCode: string
+        roomTypeCode: string
+        name: string
+        paymentTerm: string
+      }
+    | undefined
  >(undefined)
  const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
    []
@@ -115,17 +121,30 @@ export default function Rooms({
      )
    )?.features

+    const roomType = roomCategories.find((roomCategory) =>
+      roomCategory.roomTypes.some(
+        (roomType) => roomType.code === room.roomTypeCode
+      )
+    )
+
    const rateSummary: Rate = {
      features: petRoomPackage && features ? features : [],
-      priceName: room.roomType,
+      priceName: selectedRate?.name,
+      priceTerm: selectedRate?.paymentTerm,
      public: product.productType.public,
      member: product.productType.member,
-      roomType: room.roomType,
+      roomType: roomType?.name || room.roomType,
      roomTypeCode: room.roomTypeCode,
    }

    return rateSummary
-  }, [filteredRooms, availablePackages, selectedPackages, selectedRate])
+  }, [
+    filteredRooms,
+    availablePackages,
+    selectedPackages,
+    selectedRate,
+    roomCategories,
+  ])

  useEffect(() => {
    if (rateSummary) return
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -8,7 +8,6 @@ import {
 } from "@/server/routers/hotels/output"

 import { RoomPackage } from "./roomFilter"
-import { Rate } from "./selectRate"

 type ProductPrice = z.output<typeof productTypePriceSchema>
 export type RoomPriceSchema = z.output<typeof priceSchema>
@@ -23,10 +22,17 @@ export type FlexibilityOptionProps = {
  roomTypeCode: RoomConfiguration["roomTypeCode"]
  features: RoomConfiguration["features"]
  petRoomPackage: RoomPackage | undefined
-  handleSelectRate: (rateCode: {
+  handleSelectRate: React.Dispatch<
+    React.SetStateAction<
+      | {
          publicRateCode: string
          roomTypeCode: string
-  }) => void
+          name: string
+          paymentTerm: string
+        }
+      | undefined
+    >
+  >
 }

 export interface PriceListProps {
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/types/components/hotelReservation/selectRate/roomCard.ts
@@ -19,10 +19,17 @@ export type RoomCardProps = {
  roomCategories: RoomData[]
  selectedPackages: RoomPackageCodes[]
  packages: RoomPackageData | undefined
-  handleSelectRate: (rateCode: {
+  handleSelectRate: React.Dispatch<
+    React.SetStateAction<
+      | {
          publicRateCode: string
          roomTypeCode: string
-  }) => void
+          name: string
+          paymentTerm: string
+        }
+      | undefined
+    >
+  >
 }

 type RoomPackagePriceSchema = z.output<typeof packagePriceSchema>
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -10,10 +10,17 @@ export interface RoomSelectionProps {
  user: SafeUser
  availablePackages: RoomPackageData | undefined
  selectedPackages: RoomPackageCodes[]
-  setRateCode: (rateCode: {
+  setRateCode: React.Dispatch<
+    React.SetStateAction<
+      | {
          publicRateCode: string
          roomTypeCode: string
-  }) => void
+          name: string
+          paymentTerm: string
+        }
+      | undefined
+    >
+  >
  rateSummary: Rate | null
 }

--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/types/components/hotelReservation/selectRate/selectRate.ts
@@ -27,7 +27,8 @@ export interface SelectRateSearchParams {
 export interface Rate {
  roomType: RoomConfiguration["roomType"]
  roomTypeCode: RoomConfiguration["roomTypeCode"]
-  priceName: string
+  priceName?: string
+  priceTerm?: string
  public: Product["productType"]["public"]
  member?: Product["productType"]["member"]
  features: RoomConfiguration["features"]