Merged in feat/SW-2407-mystay-tc-to-modal (pull request #2082)

Feat/SW-2407 mystay tc to modal

* feat: SW-2407 Moved terms in modal view for my stay

* feat: SW-2407 Updated modal to show terms for reward nights and corporate cheque stay

* feat: SW-2407 Optimised code

* feat: SW-2407 Optimised code


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -1,15 +1,19 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
+import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
+import useRateTitles from "@/hooks/booking/useRateTitles"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
@@ -20,6 +24,7 @@ import RoomDetailsSidePeek from "./RoomDetailsSidePeek"
 import styles from "./room.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { RateEnum } from "@/types/enums/rate"
 import type { Room } from "@/types/stores/my-stay"
 import type { SafeUser } from "@/types/user"
 
@@ -93,6 +98,19 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
     )
   }
 
+  const rateTitles = useRateTitles()
+  let rateTerm: { paymentTerm: string; title: string }
+  switch (rateDefinition.cancellationRule) {
+    case CancellationRuleEnum.CancellableBefore6PM:
+      rateTerm = rateTitles[RateEnum.flex]
+      break
+    case CancellationRuleEnum.Changeable:
+      rateTerm = rateTitles[RateEnum.change]
+      break
+    default:
+      rateTerm = rateTitles[RateEnum.save]
+  }
+
   return (
     <article className={styles.multiRoom}>
       <Typography variant="Title/smRegular">
@@ -218,7 +236,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
               </p>
             </Typography>
           </div>
-          {rateDefinition.cancellationText ? (
+          {
             <div className={styles.row}>
               <Typography variant="Body/Paragraph/mdBold">
                 <p>
@@ -227,11 +245,45 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
                   })}
                 </p>
               </Typography>
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p>{rateDefinition.cancellationText}</p>
-              </Typography>
+              <div className={styles.termsLabel}>
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span>{rateTerm.title}</span>
+                </Typography>
+                <Modal
+                  title={rateTerm.title}
+                  subtitle={rateTerm.paymentTerm}
+                  trigger={
+                    <IconButton
+                      theme="Black"
+                      style="Muted"
+                      className={styles.termsInfoIcon}
+                    >
+                      <MaterialIcon
+                        icon="info"
+                        color="Icon/Default"
+                        size={20}
+                      />
+                    </IconButton>
+                  }
+                >
+                  <div className={styles.terms}>
+                    {rateDefinition.generalTerms.map((term) => (
+                      <Typography key={term} variant="Body/Paragraph/mdRegular">
+                        <p className={styles.term}>
+                          <MaterialIcon
+                            icon="check"
+                            color="Icon/Feedback/Success"
+                            size={20}
+                          />
+                          {term}
+                        </p>
+                      </Typography>
+                    ))}
+                  </div>
+                </Modal>
+              </div>
             </div>
-          ) : null}
+          }
           {hasModifiableRate(rateDefinition.cancellationRule) && (
             <div className={styles.row}>
               <Typography variant="Body/Paragraph/mdBold">