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/SingleRoom/Details/Terms/Terms.tsx

@@ -0,0 +1,76 @@
+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 { useMyStayStore } from "@/stores/my-stay"
+
+import Modal from "@/components/Modal"
+import useRateTitles from "@/hooks/booking/useRateTitles"
+
+import Row from "../Row"
+
+import styles from "./terms.module.css"
+
+import { RateEnum } from "@/types/enums/rate"
+
+export default function Terms() {
+  const intl = useIntl()
+  const rateTitles = useRateTitles()
+
+  const { generalTerms, cancellationRule } = useMyStayStore((state) => ({
+    generalTerms: state.bookedRoom.rateDefinition.generalTerms,
+    cancellationRule: state.bookedRoom.rateDefinition.cancellationRule,
+  }))
+
+  let rateTerm: { paymentTerm: string; title: string }
+  switch (cancellationRule) {
+    case CancellationRuleEnum.CancellableBefore6PM:
+      rateTerm = rateTitles[RateEnum.flex]
+      break
+    case CancellationRuleEnum.Changeable:
+      rateTerm = rateTitles[RateEnum.change]
+      break
+    default:
+      rateTerm = rateTitles[RateEnum.save]
+  }
+
+  return (
+    <>
+      <Row
+        icon="contract"
+        text={rateTerm.title}
+        title={intl.formatMessage({
+          defaultMessage: "Terms",
+        })}
+      >
+        <Modal
+          title={rateTerm.title}
+          subtitle={rateTerm.paymentTerm}
+          trigger={
+            <IconButton theme="Black" style="Muted" className={styles.button}>
+              <MaterialIcon icon="info" color="Icon/Default" size={20} />
+            </IconButton>
+          }
+        >
+          <div className={styles.terms}>
+            {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>
+      </Row>
+    </>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css

@@ -0,0 +1,16 @@
+.terms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  margin-top: var(--Space-x3);
+}
+
+.term {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+.button {
+  margin: -10px -5px;
+}