feat: refactor NewDates, clean up legacy code

This reverts commit 0c7836fa59.

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx

@@ -0,0 +1,42 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import IconChip from "@/components/TempDesignSystem/IconChip"
+
+export default function BookingCode() {
+  const intl = useIntl()
+
+  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+
+  if (!bookingCode) {
+    return null
+  }
+
+  return (
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <IconChip
+        color="blue"
+        icon={<DiscountIcon color="Icon/Feedback/Information" />}
+      >
+        {intl.formatMessage(
+          {
+            defaultMessage: "<strong>Booking code</strong>: {value}",
+          },
+          {
+            value: bookingCode,
+            strong: (text) => (
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <strong>{text}</strong>
+              </Typography>
+            ),
+          }
+        )}
+      </IconChip>
+    </Typography>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css

@@ -0,0 +1,30 @@
+.priceDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) 0;
+  width: calc(100% - var(--Spacing-x4));
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.price {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .priceDetails {
+    align-items: flex-end;
+    margin: 0 0 0 auto;
+    width: auto;
+  }
+
+  .price {
+    justify-content: flex-end;
+  }
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx

@@ -0,0 +1,40 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import PriceType from "@/components/HotelReservation/MyStay/PriceType"
+
+import styles from "./details.module.css"
+
+export default function PriceDetails() {
+  const intl = useIntl()
+
+  const pricing = useMyStayStore((state) => ({
+    cheques: state.bookedRoom.cheques,
+    formattedTotalPrice: state.totalPrice,
+    isCancelled: state.bookedRoom.isCancelled,
+    priceType: state.bookedRoom.priceType,
+    rateDefinition: state.bookedRoom.rateDefinition,
+    roomPoints: state.bookedRoom.roomPoints,
+    totalPrice: state.bookedRoom.totalPrice,
+    vouchers: state.bookedRoom.vouchers,
+  }))
+
+  return (
+    <div className={styles.priceDetails}>
+      <div className={styles.price}>
+        <Typography variant="Body/Lead text">
+          <p color="uiTextHighContrast">
+            {intl.formatMessage({
+              defaultMessage: "Room total",
+            })}
+          </p>
+        </Typography>
+        <PriceType {...pricing} />
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx

@@ -0,0 +1,13 @@
+import BookingCode from "./BookingCode"
+import PriceDetails from "./PriceDetails"
+
+import styles from "./information.module.css"
+
+export default function BookingInformation() {
+  return (
+    <div className={styles.bookingInformation}>
+      <BookingCode />
+      <PriceDetails />
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css

@@ -0,0 +1,22 @@
+.bookingInformation {
+  align-items: center;
+  background-color: var(--Scandic-Beige-10);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x2);
+  margin: 0 var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .bookingInformation {
+    align-items: flex-start;
+    border: none;
+    border-radius: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0;
+    padding: var(--Spacing-x-one-and-half);
+  }
+}