Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+import { useIntl } from "react-intl"
+
+import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { Button } from "@scandic-hotels/design-system/Button"
+import Footnote from "@scandic-hotels/design-system/Footnote"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
+
+import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
+import useLang from "../../../hooks/useLang"
+import { useEnterDetailsStore } from "../../../stores/enter-details"
+import { RoomDetailsSidePeek } from "../../RoomDetailsSidePeek"
+
+import styles from "./selectedRoom.module.css"
+
+export default function SelectedRoom() {
+  const intl = useIntl()
+  const lang = useLang()
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const { room, idx } = useRoomContext()
+  const { hotelId, roomCategories, searchParamsStr } = useEnterDetailsStore(
+    (state) => ({
+      hotelId: state.booking.hotelId,
+      roomCategories: state.roomCategories,
+      searchParamsStr: state.searchParamString,
+    })
+  )
+
+  function changeRoom() {
+    const searchParams = new URLSearchParams(searchParamsStr)
+
+    searchParams.set("activeRoomIndex", `${idx}`)
+    startTransition(() => {
+      router.push(`${selectRate(lang)}?${searchParams.toString()}`)
+    })
+  }
+
+  const selectedRoom = getHotelRoom(roomCategories, room.roomTypeCode)
+
+  return (
+    <div className={styles.wrapper} data-available={room.isAvailable}>
+      <div className={styles.main}>
+        <div className={styles.headerContainer}>
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color="uiTextHighContrast"
+          >
+            <h2>
+              {intl.formatMessage({
+                defaultMessage: "Room",
+              })}
+            </h2>
+          </Footnote>
+          <Subtitle
+            type="two"
+            className={styles.description}
+            color="uiTextHighContrast"
+          >
+            {intl.formatMessage(
+              {
+                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
+              },
+              {
+                roomType: room.roomType,
+                rateDescription: room.cancellationText,
+                rate: ([str]) => {
+                  return str ? <span className={styles.rate}>{str}</span> : null
+                },
+              }
+            )}
+          </Subtitle>
+          <Button
+            variant="Text"
+            size="Small"
+            onPress={changeRoom}
+            isDisabled={isPending}
+            wrapping={false}
+            typography="Body/Supporting text (caption)/smBold"
+          >
+            <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
+            {intl.formatMessage({
+              defaultMessage: "Change",
+            })}
+          </Button>
+        </div>
+        {room.roomTypeCode && selectedRoom && (
+          <div className={styles.details}>
+            <RoomDetailsSidePeek
+              hotelId={hotelId}
+              roomTypeCode={room.roomTypeCode}
+              room={selectedRoom}
+              buttonVariant="primary"
+              triggerLabel={intl.formatMessage({
+                defaultMessage: "See room details",
+              })}
+              wrapping={false}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -0,0 +1,65 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+.wrapper[data-available="false"] .title,
+.wrapper[data-available="false"] .description,
+.wrapper[data-available="false"] .details {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.main {
+  width: 100%;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  padding-bottom: var(--Spacing-x3);
+}
+
+.headerContainer {
+  display: grid;
+  justify-content: space-between;
+  align-items: center;
+  grid-template-areas:
+    "title title"
+    "description button";
+}
+
+.title {
+  grid-area: title;
+}
+
+.description {
+  grid-area: description;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
+  align-self: flex-start;
+}
+
+.rate {
+  color: var(--UI-Text-Placeholder);
+  display: block;
+}
+
+.details {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: var(--Space-x05);
+}
+
+@media screen and (min-width: 768px) {
+  .rate {
+    display: inline;
+  }
+
+  .rate::before {
+    content: "(";
+  }
+  .rate::after {
+    content: ")";
+  }
+}