feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Guests/guests.module.css

@@ -0,0 +1,20 @@
+.row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.label {
+  align-items: center;
+  display: flex;
+  gap: var(--Space-x1);
+}
+
+.textDefault {
+  color: var(--Text-Default);
+}
+
+.row p.guests {
+  color: var(--Text-Default);
+  text-transform: capitalize;
+}

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

@@ -0,0 +1,61 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import styles from "./guests.module.css"
+
+export default function Guests() {
+  const intl = useIntl()
+  const rooms = useMyStayStore((state) => state.rooms)
+
+  const adults = rooms.reduce((acc, room) => acc + room.adults, 0)
+
+  const children = rooms.reduce(
+    (acc, room) => acc + (room.childrenAges?.length ?? 0),
+    0
+  )
+
+  const adultsMsg = intl.formatMessage(
+    {
+      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
+    },
+    { adults }
+  )
+
+  const childrenMsg = intl.formatMessage(
+    {
+      defaultMessage: "{children, plural, one {# child} other {# children}}",
+    },
+    { children }
+  )
+
+  const adultsOnlyMsg = adultsMsg
+  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(" · ")
+
+  let guests = ""
+  if (children > 0) {
+    guests = adultsAndChildrenMsg
+  } else {
+    guests = adultsOnlyMsg
+  }
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>
+        <MaterialIcon icon="person" />
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.textDefault}>
+            {intl.formatMessage({ defaultMessage: "Guests" })}
+          </p>
+        </Typography>
+      </div>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.guests}>{guests}</p>
+      </Typography>
+    </div>
+  )
+}