From 9d106713a0d3df75490fcc9d80e01bb82afbd4c9 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 10 Oct 2024 13:38:05 +0200
Subject: [PATCH] feat(SW-415): Update typings

---
 .../FlexibilityOption/Popover/index.tsx       | 12 ++-------
 .../{PriceTable => PriceList}/index.tsx       | 18 ++++++-------
 .../priceList.module.css}                     |  0
 .../RoomSelection/FlexibilityOption/index.tsx | 12 +++------
 .../RoomSelection/RoomCard/index.tsx          |  6 ++---
 .../RoomSelection/roomSelection.module.css    |  7 ++---
 server/routers/hotels/output.ts               | 26 +++++++------------
 .../selectRate/flexibilityOption.ts           | 12 ++++++---
 .../selectRate/pricePopover.ts                |  5 ++++
 9 files changed, 42 insertions(+), 56 deletions(-)
 rename components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/{PriceTable => PriceList}/index.tsx (89%)
 rename components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/{PriceTable/priceTable.module.css => PriceList/priceList.module.css} (100%)
 create mode 100644 types/components/hotelReservation/selectRate/pricePopover.ts

diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
index 60efe49b2..62979d2c7 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
@@ -1,18 +1,10 @@
-import {
-  Button,
-  Dialog,
-  OverlayArrow,
-  Popover,
-  type PopoverProps,
-} from "react-aria-components"
+import { Button, Dialog, OverlayArrow, Popover } from "react-aria-components"
 
 import { CloseIcon } from "@/components/Icons"
 
 import styles from "./popover.module.css"
 
-interface PricePopoverProps extends Omit<PopoverProps, "children"> {
-  children: React.ReactNode
-}
+import { PricePopoverProps } from "@/types/components/hotelReservation/selectRate/pricePopover"
 
 export default function PricePopover({
   children,
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
similarity index 89%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx
rename to components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
index 07e618b7c..952d8add3 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -4,25 +4,25 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import styles from "./priceTable.module.css"
+import styles from "./priceList.module.css"
 
-import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+import { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
 
-export default function PriceTable({
-  publicPrice,
-  memberPrice,
-}: PriceTableProps) {
+export default function PriceList({
+  publicPrice = {},
+  memberPrice = {},
+}: PriceListProps) {
   const intl = useIntl()
 
   const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
-    publicPrice || {}
+    publicPrice
   const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
-    memberPrice || {}
+    memberPrice
 
   const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
 
   return (
-    <dl className={styles.priceTable}>
+    <dl className={styles.priceList}>
       <div className={styles.priceRow}>
         <dt>
           <Caption
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/priceTable.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/priceTable.module.css
rename to components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 17475727c..481b79e98 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -6,7 +6,7 @@ import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import PricePopover from "./Popover"
-import PriceTable from "./PriceTable"
+import PriceTable from "./PriceList"
 
 import styles from "./flexibilityOption.module.css"
 
@@ -40,17 +40,13 @@ export default function FlexibilityOption({
     )
   }
 
-  const { productType } = product
-  const { public: publicPrice, member: memberPrice } = productType
+  const { public: publicPrice, member: memberPrice } = product.productType
 
   return (
     <label>
       <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
       <div className={styles.card}>
-        <div
-          className={styles.header}
-          ref={(node: Element | null) => setRef(node)}
-        >
+        <div className={styles.header} ref={setRef}>
           <DialogTrigger>
             <Button
               aria-label="Help"
@@ -82,7 +78,7 @@ export default function FlexibilityOption({
               >
                 {name}
               </Caption>
-              {priceInformation?.map((info: string) => (
+              {priceInformation?.map((info) => (
                 <Caption
                   key={info}
                   color="uiTextHighContrast"
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index b3b4446a5..d39f90bd5 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -35,7 +35,7 @@ export default function RoomCard({
     (rate) => rate.cancellationRule === "CancellableBefore6PM"
   )
 
-  const findProductForRate = (rate: RateDefinition | undefined) => {
+  function findProductForRate(rate: RateDefinition | undefined) {
     return rate
       ? roomConfiguration.products.find(
           (product) =>
@@ -45,9 +45,9 @@ export default function RoomCard({
       : undefined
   }
 
-  const getPriceForRate = (
+  function getPriceForRate(
     rate: typeof saveRate | typeof changeRate | typeof flexRate
-  ) => {
+  ) {
     return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
       ?.generalTerms
   }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index dbd50de4b..a5176f517 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -31,15 +31,12 @@
 
 @media (min-width: 767px) {
   .roomList {
-    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(
-        240px,
-        1fr
-      );
+    grid-template-columns: repeat(3, minmax(240px, 1fr));
   }
 }
 
 @media (min-width: 1367px) {
   .roomList {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
   }
 }
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 17b4cce25..8d8be4274 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -577,26 +577,18 @@ const priceSchema = z.object({
   pricePerStay: z.string(),
   currency: z.string(),
 })
-export type Price = z.infer<typeof priceSchema>
+
+export const productTypePriceSchema = z.object({
+  rateCode: z.string(),
+  rateType: z.string().optional(),
+  localPrice: priceSchema,
+  requestedPrice: priceSchema.optional(),
+})
 
 const productSchema = z.object({
   productType: z.object({
-    public: z
-      .object({
-        rateCode: z.string(),
-        rateType: z.string().optional(),
-        localPrice: priceSchema,
-        requestedPrice: priceSchema.optional(),
-      })
-      .optional(),
-    member: z
-      .object({
-        rateCode: z.string(),
-        rateType: z.string().optional(),
-        localPrice: priceSchema,
-        requestedPrice: priceSchema.optional(),
-      })
-      .optional(),
+    public: productTypePriceSchema.optional(),
+    member: productTypePriceSchema.optional(),
   }),
 })
 
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index f2107cc6a..58112ac16 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,4 +1,8 @@
-import { Price, Product } from "@/server/routers/hotels/output"
+import { z } from "zod"
+
+import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
+
+type ProductPrice = z.output<typeof productTypePriceSchema>
 
 export type FlexibilityOptionProps = {
   product: Product | undefined
@@ -8,7 +12,7 @@ export type FlexibilityOptionProps = {
   priceInformation?: Array<string>
 }
 
-export interface PriceTableProps {
-  publicPrice?: Product["productType"]["public"]
-  memberPrice?: Product["productType"]["member"]
+export interface PriceListProps {
+  publicPrice?: ProductPrice | Record<string, never>
+  memberPrice?: ProductPrice | Record<string, never>
 }
diff --git a/types/components/hotelReservation/selectRate/pricePopover.ts b/types/components/hotelReservation/selectRate/pricePopover.ts
new file mode 100644
index 000000000..2a7c84d56
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/pricePopover.ts
@@ -0,0 +1,5 @@
+import type { PopoverProps } from "react-aria-components"
+
+export interface PricePopoverProps extends Omit<PopoverProps, "children"> {
+  children: React.ReactNode
+}