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/index.tsx

@@ -6,20 +6,20 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
+import { GuaranteeInfoModal } from "./GuaranteeInfoModal"
+
 import styles from "./guaranteeInfo.module.css"
 
 export default function GuaranteeInfo() {
   const intl = useIntl()
-  const { allRoomsAreCancelled, guaranteeInfo, priceType } = useMyStayStore(
-    (state) => ({
-      allRoomsAreCancelled: state.allRoomsAreCancelled,
+  const { isGuaranteeable, guaranteeInfo, allRoomsAreCancelled } =
+    useMyStayStore((state) => ({
+      isGuaranteeable: state.bookedRoom.isGuaranteeable,
       guaranteeInfo: state.bookedRoom.guaranteeInfo,
-      priceType: state.bookedRoom.priceType,
-    })
-  )
+      allRoomsAreCancelled: state.allRoomsAreCancelled,
+    }))
 
-  const isRewardNight = priceType === "points"
-  if (allRoomsAreCancelled || (!guaranteeInfo && !isRewardNight)) {
+  if ((isGuaranteeable && !guaranteeInfo) || allRoomsAreCancelled) {
     return null
   }
 
@@ -30,20 +30,23 @@ export default function GuaranteeInfo() {
         <Typography variant="Body/Paragraph/mdRegular">
           <p className={styles.textDefault}>
             {intl.formatMessage({
-              id: "myStay.lateArrival",
-              defaultMessage: "Late arrival",
+              id: "myStay.bookingGuaranteed",
+              defaultMessage: "Booking guaranteed",
+            })}
+          </p>
+        </Typography>
+      </div>
+      <div className={styles.guaranteeInfo}>
+        <GuaranteeInfoModal />
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              id: "myStay.roomHeldAfter18",
+              defaultMessage: "Room held after 18:00",
             })}
           </p>
         </Typography>
       </div>
-      <Typography variant="Body/Paragraph/mdRegular">
-        <p>
-          {intl.formatMessage({
-            id: "myStay.checkInAfter18",
-            defaultMessage: "Check-in after 18:00",
-          })}
-        </p>
-      </Typography>
     </div>
   )
 }