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/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
-              title={rateTitle}
-              subtitle={paymentTerm}
-              trigger={
-                <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>
+            <TermModal
+              rateTitle={rateTitle}
+              paymentTerm={paymentTerm}
+              rateTermDetails={rateTermDetails}
+            />
             <span id={`${id}-title`}>
               {rateTitle}
               <span className={styles.textSecondary}>