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

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css

@@ -0,0 +1,34 @@
+.content {
+  display: grid;
+  gap: var(--Space-x3);
+  align-content: start;
+  margin-top: var(--Space-x2);
+}
+
+.infoButton {
+  background-color: transparent;
+  border-width: 0;
+  padding: var(--Space-x025);
+  color: var(--Icon-Interactive-Default);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.closeButton {
+  justify-self: stretch;
+}
+
+@media screen and (min-width: 768px) {
+  .content {
+    max-width: 512px;
+  }
+
+  .closeButton {
+    justify-self: end;
+    min-width: 150px;
+  }
+}
+
+.textSecondary {
+  color: var(--Text-Secondary);
+}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
+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 "./guaranteeInfoModal.module.css"
+
+export function GuaranteeInfoModal() {
+  const [isOpen, setIsOpen] = useState(false)
+  const intl = useIntl()
+
+  return (
+    <>
+      <ButtonRAC
+        type="button"
+        className={styles.infoButton}
+        onPress={() => setIsOpen(true)}
+      >
+        <MaterialIcon icon="info" size={20} color="CurrentColor" />
+      </ButtonRAC>
+      <Modal
+        title={intl.formatMessage({
+          id: "myStay.guaranteeInfoModal.heading",
+          defaultMessage: "Your booking is guaranteed",
+        })}
+        isOpen={isOpen}
+        onToggle={setIsOpen}
+      >
+        <div className={styles.content}>
+          <Typography variant="Body/Lead text">
+            <p>
+              {intl.formatMessage({
+                id: "myStay.guaranteeInfo.description",
+                defaultMessage:
+                  "The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, you will be charged for the first night.",
+              })}
+            </p>
+          </Typography>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.textSecondary}
+          >
+            <p>
+              {intl.formatMessage({
+                id: "myStay.guaranteeInfoModal.ancillariesInfo",
+                defaultMessage:
+                  "If you added extras, they'll be charged in case of a no-show, unless cancelled by 23:59 the night before.",
+              })}
+            </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>
+    </>
+  )
+}