Merged in feat/BOOK-529-update-GLA-design-mystay (pull request #3230)

Feat/BOOK-529 update GLA design mystay * feat(BOOK-529): update gla design on my stay * feat(BOOK-529): open gla modal if error * feat(BOOK-529): add inline accordion to storybook * feat(529): move errormessage below message * feat(529): update infomodal * feat(BOOK-529): update infomodal * feat(BOOK-529): hide guarantee info for adding ancillaries if prepaid * feat(BOOK-529): update width on info dialog * feat(BOOK-529): fix alignment * feat(BOOK-529): check if member price * feat(BOOK-529): refactor msg * feat(BOOK-529): refactor terms and conditions to own component * feat(BOOK-529): clean up confirmation step Approved-by: Christel Westerberg
2025-11-28 14:27:25 +00:00
parent 22dd2f60fe
commit 46fa42750f
39 changed files with 681 additions and 485 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
@@ -1,22 +0,0 @@
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x1);
-  padding-top: var(--Space-x2);
-}
-
-.content ol {
-  margin: 0;
-}
-
-.summary {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x05);
-}
-
-.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
@@ -1,68 +0,0 @@
-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({
-            id: "common.howItWorks",
-            defaultMessage: "How it works",
-          })}
-          <MaterialIcon
-            icon="keyboard_arrow_down"
-            color="Icon/Interactive/Default"
-            size={16}
-          />
-        </summary>
-      </Caption>
-      <section className={styles.content}>
-        <Body>
-          {intl.formatMessage({
-            id: "enterDetails.payment.guaranteeInfoDescription",
-            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({
-            id: "enterDetails.payment.guaranteeInfoWhatToDo",
-            defaultMessage: "What you have to do to guarantee booking:",
-          })}
-        </Body>
-        <ol>
-          <Body asChild>
-            <li>
-              {intl.formatMessage({
-                id: "enterDetails.payment.guaranteeInfoCompleteBooking",
-                defaultMessage: "Complete the booking",
-              })}
-            </li>
-          </Body>
-          <Body asChild>
-            <li>
-              {intl.formatMessage({
-                id: "enterDetails.payment.guaranteeInfoProvideCard",
-                defaultMessage: "Provide a payment card in the next step",
-              })}
-            </li>
-          </Body>
-        </ol>
-        <Body>
-          {intl.formatMessage({
-            id: "enterDetails.payment.guaranteeInfoMandatoryNote",
-            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>
-  )
-}