Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details Approved-by: Anton Gunnarsson
2025-09-11 07:16:24 +00:00
parent 15711cb3a4
commit 7dee6d5083
238 changed files with 1656 additions and 1602 deletions
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css
@@ -0,0 +1,22 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding-top: var(--Spacing-x2);
+}
+
+.content ol {
+  margin: 0;
+}
+
+.summary {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
+
+.summary::-webkit-details-marker,
+.summary::marker {
+  display: none;
+}
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/index.tsx
@@ -0,0 +1,62 @@
+import { useIntl } from "react-intl"
+
+import Body from "@scandic-hotels/design-system/Body"
+import Caption from "@scandic-hotels/design-system/Caption"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./guaranteeDetails.module.css"
+
+export default function GuaranteeDetails() {
+  const intl = useIntl()
+  return (
+    <details>
+      <Caption color="burgundy" type="bold" asChild>
+        <summary className={styles.summary}>
+          {intl.formatMessage({
+            defaultMessage: "How it works",
+          })}
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            color="Icon/Interactive/Default"
+            size={16}
+          />
+        </summary>
+      </Caption>
+      <section className={styles.content}>
+        <Body>
+          {intl.formatMessage({
+            defaultMessage:
+              "When guaranteeing your booking, we will hold the booking until 07:00 until the day after check-in. This will provide you as a guest with added flexibility for check-in times.",
+          })}
+        </Body>
+        <Body>
+          {intl.formatMessage({
+            defaultMessage: "What you have to do to guarantee booking:",
+          })}
+        </Body>
+        <ol>
+          <Body asChild>
+            <li>
+              {intl.formatMessage({
+                defaultMessage: "Complete the booking",
+              })}
+            </li>
+          </Body>
+          <Body asChild>
+            <li>
+              {intl.formatMessage({
+                defaultMessage: "Provide a payment card in the next step",
+              })}
+            </li>
+          </Body>
+        </ol>
+        <Body>
+          {intl.formatMessage({
+            defaultMessage:
+              "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.",
+          })}
+        </Body>
+      </section>
+    </details>
+  )
+}