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