feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css

@@ -0,0 +1,21 @@
+.content {
+  display: grid;
+  gap: var(--Space-x3);
+  align-content: start;
+  margin-top: var(--Space-x2);
+}
+
+.closeButton {
+  justify-self: stretch;
+}
+
+@media screen and (min-width: 768px) {
+  .dialog {
+    width: 560px;
+  }
+
+  .closeButton {
+    justify-self: end;
+    min-width: 150px;
+  }
+}

packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Modal from "@scandic-hotels/design-system/Modal"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./guaranteeInfo.module.css"
+
+interface GuaranteeInfoProps {
+  buttonClassName?: string
+}
+
+export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const intl = useIntl()
+
+  return (
+    <>
+      <Button
+        variant="Text"
+        color="Primary"
+        size="Small"
+        type="button"
+        typography="Body/Supporting text (caption)/smBold"
+        wrapping={false}
+        className={buttonClassName}
+        onPress={() => setIsOpen(true)}
+      >
+        <MaterialIcon icon="info" size={20} color="CurrentColor" />
+        {intl.formatMessage({
+          id: "common.learnMore",
+          defaultMessage: "Learn more",
+        })}
+      </Button>
+      <Modal
+        title={intl.formatMessage({
+          id: "enterDetails.guaranteeInfo.heading",
+          defaultMessage: "Guarantee room for late arrival",
+        })}
+        isOpen={isOpen}
+        onToggle={setIsOpen}
+        className={styles.dialog}
+      >
+        <div className={styles.content}>
+          <Typography variant="Body/Lead text">
+            <p>
+              {intl.formatMessage({
+                id: "enterDetails.guaranteeInfo.description",
+                defaultMessage:
+                  "The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, your credit card will be charged for the first night.",
+              })}
+            </p>
+          </Typography>
+          <Button
+            className={styles.closeButton}
+            variant="Secondary"
+            color="Primary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+            onPress={() => setIsOpen(false)}
+          >
+            {intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}