feat(SW-415): Update typings

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,

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

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"

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
   }

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);
   }
 }

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(),
   }),
 })
 

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>
 }

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
+}