Merged in feat/BOOK-747-alert-extra-cost (pull request #3455)

feat(BOOK-747): show extra cost alert if reward night or voucher

* feat(BOOK-747): show extra cost alert if reward night or voucher

* feat(BOOK-747): use enum

* feat(BOOK-747): refactor

* feat(BOOK-747): add underline to trigger text


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/SelectRate/RoomsContainer/ExtraCostAlert/extraCostAlert.module.css

@@ -0,0 +1,5 @@
+.alert {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  padding: var(--Space-x5) 0 0;
+}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/ExtraCostAlert/index.tsx

@@ -0,0 +1,92 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
+import { Alert } from "@scandic-hotels/design-system/Alert"
+import TermModal from "@scandic-hotels/design-system/TermModal"
+
+import { useSelectRateContext } from "../../../../contexts/SelectRate/SelectRateContext"
+import { useRateTitles } from "../Rooms/RoomsList/RoomListItem/Rates/useRateTitles"
+
+import styles from "./extraCostAlert.module.css"
+
+import type { RouterOutput } from "@scandic-hotels/trpc/client"
+
+type RoomAvailability = Extract<
+  RouterOutput["hotel"]["availability"]["selectRate"]["rooms"][0],
+  { roomConfigurations: unknown }
+>
+
+export default function ExtraCostAlert() {
+  const intl = useIntl()
+
+  const { availability, input: rooms } = useSelectRateContext()
+  const rateTitles = useRateTitles()
+
+  if (!availability.data) {
+    return null
+  }
+
+  const availableRooms = availability.data.filter(
+    (room): room is RoomAvailability => !("error" in room)
+  )
+
+  if (availableRooms.length === 0) {
+    return null
+  }
+
+  const hasMoreThanTwoAdults = rooms.data?.booking.rooms.some(
+    (room) => room.adults > 2
+  )
+
+  const isRewardNightOrVoucher = availableRooms.some((room) => {
+    return room.roomConfigurations.some((config) =>
+      config.products?.some((product) =>
+        Array.isArray(product)
+          ? product.some((p) => "redemption" in p)
+          : "voucher" in product
+      )
+    )
+  })
+
+  const rateDefinition = availableRooms.find(
+    (room) => room.rateDefinitions.length
+  )?.rateDefinitions[0]
+
+  const rateTermDetails = [
+    {
+      title: rateDefinition?.title ?? "",
+      terms: rateDefinition?.generalTerms ?? [],
+    },
+  ]
+
+  if (!(isRewardNightOrVoucher && hasMoreThanTwoAdults && rateDefinition)) {
+    return null
+  }
+
+  return (
+    <div className={styles.alert}>
+      <Alert
+        type={AlertTypeEnum.Info}
+        heading={intl.formatMessage({
+          id: "booking.alert.extraguests",
+          defaultMessage: "Extra guest(s)",
+        })}
+        text={intl.formatMessage({
+          id: "booking.alert.extraBeds.text",
+          defaultMessage:
+            "When booking for more than 2 guests, an additional fee will apply per person, see link for details.",
+        })}
+        slot={
+          <TermModal
+            rateTitle={rateTitles[RateEnum.flex].title}
+            paymentTerm={rateTitles[RateEnum.flex].paymentTerm}
+            rateTermDetails={rateTermDetails}
+            variant="text"
+          />
+        }
+      />
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/index.tsx

@@ -14,6 +14,7 @@ import { useSelectRateContext } from "../../../contexts/SelectRate/SelectRateCon
 import useLang from "../../../hooks/useLang"
 import { mapPackageToLabel } from "../../../utils/getRoomFeatureDescription"
 import { trackLowestRoomPrice, trackRoomsLoaded } from "../Tracking/tracking"
+import ExtraCostAlert from "./ExtraCostAlert"
 import { RateSummary } from "./RateSummary"
 import Rooms from "./Rooms"
 import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
@@ -23,7 +24,8 @@ import styles from "./index.module.css"
 import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
 
 interface RoomsContainerProps
-  extends Pick<HotelData, "roomCategories">,
+  extends
+    Pick<HotelData, "roomCategories">,
     Pick<HotelData["hotel"], "hotelType" | "vat"> {}
 
 export function RoomsContainer({}: RoomsContainerProps) {
@@ -139,6 +141,7 @@ export function RoomsContainer({}: RoomsContainerProps) {
 
   return (
     <>
+      <ExtraCostAlert />
       <Rooms />
       <RateSummary />
     </>

packages/design-system/lib/components/Alert/alert.ts

@@ -3,7 +3,7 @@ import type {
   SidepeekContent,
 } from "@scandic-hotels/common/constants/alert"
 import type { VariantProps } from "class-variance-authority"
-import type { AriaRole } from "react"
+import type { AriaRole, ReactNode } from "react"
 
 import type { alertVariants } from "./variants"
 
@@ -27,4 +27,5 @@ export interface AlertProps extends VariantProps<typeof alertVariants> {
   close?: () => void
   ariaRole?: AriaRole
   ariaLive?: "off" | "assertive" | "polite"
+  slot?: ReactNode
 }

packages/design-system/lib/components/Alert/index.tsx

@@ -26,6 +26,7 @@ export function Alert({
   sidepeekContent,
   ariaLive,
   ariaRole,
+  slot,
 }: AlertProps) {
   const classNames = alertVariants({
     className,
@@ -93,6 +94,7 @@ export function Alert({
               sidePeekContent={sidepeekContent}
             />
           ) : null}
+          {slot}
         </div>
         {close ? (
           <Button onPress={close} variant="Text" className={styles.closeButton}>

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -4,12 +4,10 @@ import { Typography } from "../../Typography"
 import { Rate, RateTermDetails } from "../types"
 
 import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
-import { IconButton } from "../../IconButton"
 import { MaterialIcon } from "../../Icons/MaterialIcon"
-import Modal from "../Modal"
 import styles from "../rate-card.module.css"
 import { variants } from "../variants"
+import TermModal from "../TermModal"
 
 interface CampaignRateCardProps {
   id: string
@@ -51,7 +49,6 @@ export default function CampaignRateCard({
     variant: "Campaign",
   })
 
-  const intl = useIntl()
   return (
     <div
       className={cx(classNames, {
@@ -74,44 +71,11 @@ export default function CampaignRateCard({
       <div className={styles.container}>
         <Typography variant="Tag/sm">
           <h3 className={styles.title}>
-            <Modal
+            <TermModal
-              title={rateTitle}
+              rateTitle={rateTitle}
-              subtitle={paymentTerm}
+              paymentTerm={paymentTerm}
-              trigger={
+              rateTermDetails={rateTermDetails}
-                <IconButton
+            />
-                  variant="Muted"
-                  emphasis
-                  size="sm"
-                  className={styles.triggerButton}
-                  aria-label={intl.formatMessage({
-                    id: "selectRate.rateCard.openReservationPolicy",
-                    defaultMessage: "Open reservation policy",
-                  })}
-                  iconName="info"
-                />
-              }
-            >
-              {rateTermDetails.map((termGroup) => (
-                <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant="Body/Paragraph/mdBold">
-                    <p>{termGroup.title}</p>
-                  </Typography>
-                  {termGroup.terms.map((term) => (
-                    <Typography key={term}>
-                      <p className={styles.term}>
-                        <MaterialIcon
-                          icon="check"
-                          color="Icon/Feedback/Success"
-                          size={20}
-                          className={styles.termsIcon}
-                        />
-                        {term}
-                      </p>
-                    </Typography>
-                  ))}
-                </div>
-              ))}
-            </Modal>
             <span id={`${id}-title`}>
               {rateTitle}
               <span className={styles.textSecondary}>

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -2,13 +2,11 @@ import { Rate, RateTermDetails } from "../types"
 
 import { cx } from "class-variance-authority"
 import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
-import { IconButton } from "../../IconButton"
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { Typography } from "../../Typography"
-import Modal from "../Modal"
 import styles from "../rate-card.module.css"
 import { variants } from "../variants"
+import TermModal from "../TermModal"
 
 interface CodeRateCardProps {
   id: string
@@ -43,7 +41,6 @@ export default function CodeRateCard({
   const classNames = variants({
     variant: "Code",
   })
-  const intl = useIntl()
 
   return (
     <div
@@ -64,44 +61,11 @@ export default function CodeRateCard({
       <div className={styles.container}>
         <Typography variant="Tag/sm">
           <h3 className={styles.title}>
-            <Modal
+            <TermModal
-              title={rateTitle}
+              rateTitle={rateTitle}
-              subtitle={paymentTerm}
+              paymentTerm={paymentTerm}
-              trigger={
+              rateTermDetails={rateTermDetails}
-                <IconButton
+            />
-                  variant="Muted"
-                  emphasis
-                  size="sm"
-                  className={styles.triggerButton}
-                  aria-label={intl.formatMessage({
-                    id: "selectRate.rateCard.openReservationPolicy",
-                    defaultMessage: "Open reservation policy",
-                  })}
-                  iconName="info"
-                />
-              }
-            >
-              {rateTermDetails.map((termGroup) => (
-                <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant="Body/Paragraph/mdBold">
-                    <p>{termGroup.title}</p>
-                  </Typography>
-                  {termGroup.terms.map((term) => (
-                    <Typography key={term}>
-                      <p className={styles.term}>
-                        <MaterialIcon
-                          icon="check"
-                          color="Icon/Feedback/Success"
-                          size={20}
-                          className={styles.termsIcon}
-                        />
-                        {term}
-                      </p>
-                    </Typography>
-                  ))}
-                </div>
-              ))}
-            </Modal>
             <span id={`${id}-title`}>
               {rateTitle}
               <span className={styles.textSecondary}>

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -2,15 +2,14 @@ import { Typography } from "../../Typography"
 import { RatePointsOption, RateTermDetails } from "../types"
 
 import { RadioGroup } from "react-aria-components"
-import { useIntl } from "react-intl"
-import { IconButton } from "../../IconButton"
 
 import { Radio } from "../../Radio"
-import Modal from "../Modal"
 import styles from "../rate-card.module.css"
 import { variants } from "../variants"
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { getCurrencyText } from "../../currency-utils"
+import TermModal from "../TermModal"
+import { useIntl } from "react-intl"
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -42,6 +41,7 @@ export default function PointsRateCard({
   const classNames = variants({
     variant: "Points",
   })
+
   const intl = useIntl()
 
   return (
@@ -53,43 +53,11 @@ export default function PointsRateCard({
         <header>
           <Typography variant="Tag/sm">
             <h3 className={styles.title}>
-              <Modal
+              <TermModal
-                title={rateTitle}
+                rateTitle={rateTitle}
-                subtitle={paymentTerm}
+                paymentTerm={paymentTerm}
-                trigger={
+                rateTermDetails={rateTermDetails}
-                  <IconButton
+              />
-                    variant="Muted"
-                    emphasis
-                    size="sm"
-                    aria-label={intl.formatMessage({
-                      id: "selectRate.rateCard.openReservationPolicy",
-                      defaultMessage: "Open reservation policy",
-                    })}
-                    iconName="info"
-                  />
-                }
-              >
-                {rateTermDetails.map((termGroup) => (
-                  <div key={termGroup.title} className={styles.terms}>
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <p>{termGroup.title}</p>
-                    </Typography>
-                    {termGroup.terms.map((term) => (
-                      <Typography key={term}>
-                        <p className={styles.term}>
-                          <MaterialIcon
-                            icon="check"
-                            color="Icon/Feedback/Success"
-                            size={20}
-                            className={styles.termsIcon}
-                          />
-                          {term}
-                        </p>
-                      </Typography>
-                    ))}
-                  </div>
-                ))}
-              </Modal>
               {rateTitle}
               <span className={styles.textSecondary}>
                 {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -2,13 +2,11 @@ import { Rate, RateTermDetails } from "../types"
 
 import { cx } from "class-variance-authority"
 import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
-import { IconButton } from "../../IconButton"
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { Typography } from "../../Typography"
-import Modal from "../Modal"
 import styles from "../rate-card.module.css"
 import { variants } from "../variants"
+import TermModal from "../TermModal"
 
 interface RegularRateCardProps {
   id: string
@@ -41,8 +39,6 @@ export default function RegularRateCard({
 }: RegularRateCardProps) {
   const classNames = variants({ variant: "Regular" })
 
-  const intl = useIntl()
-
   return (
     <div
       className={cx(classNames, {
@@ -59,44 +55,11 @@ export default function RegularRateCard({
       <div className={styles.container}>
         <Typography variant="Tag/sm">
           <h3 className={styles.title}>
-            <Modal
+            <TermModal
-              title={rateTitle}
+              rateTitle={rateTitle}
-              subtitle={paymentTerm}
+              paymentTerm={paymentTerm}
-              trigger={
+              rateTermDetails={rateTermDetails}
-                <IconButton
+            />
-                  variant="Muted"
-                  emphasis
-                  size="sm"
-                  className={styles.triggerButton}
-                  aria-label={intl.formatMessage({
-                    id: "selectRate.rateCard.openReservationPolicy",
-                    defaultMessage: "Open reservation policy",
-                  })}
-                  iconName="info"
-                />
-              }
-            >
-              {rateTermDetails.map((termGroup) => (
-                <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant="Body/Paragraph/mdBold">
-                    <p>{termGroup.title}</p>
-                  </Typography>
-                  {termGroup.terms.map((term) => (
-                    <Typography key={term}>
-                      <p className={styles.term}>
-                        <MaterialIcon
-                          icon="check"
-                          color="Icon/Feedback/Success"
-                          size={20}
-                          className={styles.termsIcon}
-                        />
-                        {term}
-                      </p>
-                    </Typography>
-                  ))}
-                </div>
-              ))}
-            </Modal>
             <span id={`${id}-title`}>
               {rateTitle}
               <span className={styles.textSecondary}>

packages/design-system/lib/components/RateCard/TermModal/index.tsx

@@ -0,0 +1,73 @@
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import Modal from "../Modal"
+
+import styles from "./termModal.module.css"
+import { Typography } from "../../Typography"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { RateTermDetails } from "../types"
+import { Button } from "../../Button"
+
+interface TermModalProps {
+  rateTitle: string
+  paymentTerm: string
+  rateTermDetails: RateTermDetails[]
+  variant?: "icon" | "text"
+}
+
+export default function TermModal({
+  rateTitle,
+  paymentTerm,
+  rateTermDetails,
+  variant = "icon",
+}: TermModalProps) {
+  const intl = useIntl()
+  return (
+    <Modal
+      title={rateTitle}
+      subtitle={paymentTerm}
+      trigger={
+        variant === "text" ? (
+          <Button variant="Text" size="sm" className={styles.triggerText}>
+            {intl.formatMessage({
+              id: "selectRate.alert.reservationPolicies",
+              defaultMessage: "See reservation policies",
+            })}
+          </Button>
+        ) : (
+          <IconButton
+            variant="Muted"
+            emphasis
+            size="sm"
+            aria-label={intl.formatMessage({
+              id: "selectRate.rateCard.openReservationPolicy",
+              defaultMessage: "Open reservation policy",
+            })}
+            className={styles.triggerButton}
+            iconName="info"
+          />
+        )
+      }
+    >
+      {rateTermDetails.map((termGroup) => (
+        <div key={termGroup.title} className={styles.terms}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>{termGroup.title}</p>
+          </Typography>
+          {termGroup.terms.map((term) => (
+            <Typography key={term}>
+              <p className={styles.term}>
+                <MaterialIcon
+                  icon="check"
+                  color="Icon/Feedback/Success"
+                  size={20}
+                />
+                {term}
+              </p>
+            </Typography>
+          ))}
+        </div>
+      ))}
+    </Modal>
+  )
+}

packages/design-system/lib/components/RateCard/TermModal/termModal.module.css

@@ -0,0 +1,19 @@
+.terms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.term {
+  display: flex;
+  gap: var(--Space-x1);
+}
+
+.triggerButton {
+  cursor: pointer;
+  z-index: 2;
+}
+
+.triggerText {
+  text-decoration: underline;
+}

packages/design-system/lib/components/RateCard/rate-card.module.css

@@ -65,10 +65,6 @@
   position: relative;
 }
 
-.triggerButton {
-  cursor: pointer;
-  z-index: 2;
-}
 .container > * {
   padding-bottom: var(--Space-x1);
   border-bottom: 2px solid var(--Neutral-Opacity-Black-5);
@@ -147,17 +143,6 @@
   gap: var(--Space-x05);
 }
 
-.terms {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x1);
-}
-
-.term {
-  display: flex;
-  gap: var(--Space-x1);
-}
-
 .variant-campaign .banner {
   background-color: var(--Surface-Feedback-Succes);
   display: flex;

packages/design-system/package.json

@@ -176,6 +176,7 @@
     "./Stepper": "./lib/components/Stepper/index.tsx",
     "./Switch": "./lib/components/Switch/index.tsx",
     "./Table": "./lib/components/Table/index.tsx",
+    "./TermModal": "./lib/components/RateCard/TermModal/index.tsx",
     "./TextArea": "./lib/components/TextArea/index.tsx",
     "./TextLink": "./lib/components/TextLink/index.tsx",
     "./TextLinkButton": "./lib/components/TextLinkButton/index.tsx",