Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Chore/SW-2878 extract booking confirmation pag

* chore(SW-2878): Moved booking confirmation page to booking-flow package

* chore(SW-2878): Fixed promo styles as per design

* chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css

@@ -0,0 +1,28 @@
+.contact,
+.container,
+.details,
+.hotel {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: var(--Spacing-x4);
+}
+
+.details {
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.contact,
+.hotel {
+  gap: var(--Spacing-x-half);
+}
+
+.list {
+  padding-left: var(--Spacing-x2);
+}
+
+.link {
+  word-break: break-all;
+}

packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./hotelDetails.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+export function HotelDetails({
+  hotel,
+}: {
+  hotel: BookingConfirmation["hotel"]
+}) {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      <div className={styles.details}>
+        <Typography variant={"Title/Subtitle/md"}>
+          <h3>
+            {intl.formatMessage({
+              defaultMessage: "Hotel details",
+            })}
+          </h3>
+        </Typography>
+        <Typography variant={"Body/Paragraph/mdRegular"}>
+          <div className={styles.hotel}>
+            <p>{hotel.name}</p>
+            <p>
+              {intl.formatMessage(
+                {
+                  defaultMessage: "{streetAddress}, {zipCode} {city}",
+                },
+                {
+                  streetAddress: hotel.address.streetAddress,
+                  zipCode: hotel.address.zipCode,
+                  city: hotel.address.city,
+                }
+              )}
+            </p>
+            <p>
+              <Link
+                className={styles.link}
+                href={`tel:${hotel.contactInformation.phoneNumber}`}
+              >
+                {hotel.contactInformation.phoneNumber}
+              </Link>
+            </p>
+          </div>
+        </Typography>
+      </div>
+      <div className={styles.contact}>
+        <Link
+          className={styles.link}
+          color="Text/Interactive/Secondary"
+          href={`mailto:${hotel.contactInformation.email}`}
+          textDecoration={"underline"}
+        >
+          {hotel.contactInformation.email}
+        </Link>
+        <Link
+          className={styles.link}
+          color="Text/Interactive/Secondary"
+          href={hotel.contactInformation.websiteUrl}
+          textDecoration={"underline"}
+        >
+          {hotel.contactInformation.websiteUrl}
+        </Link>
+      </div>
+    </div>
+  )
+}