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/Promos/Promo/index.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@scandic-hotels/design-system/Button"
+import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./promo.module.css"
+
+import type { PromoProps } from "../../../../types/components/promo/promoProps"
+
+export function Promo({ buttonText, href, text, title }: PromoProps) {
+  return (
+    <Link className={styles.link} color="none" href={href}>
+      <article className={styles.promo}>
+        <Typography variant={"Title/smLowCase"}>
+          <h4>{title}</h4>
+        </Typography>
+        <Typography variant={"Body/Paragraph/mdRegular"}>
+          <p className={styles.text}>{text}</p>
+        </Typography>
+        <Button size="Small" variant={"Secondary"} color={"Inverted"} wrapping>
+          <div>{buttonText}</div>
+        </Button>
+      </article>
+    </Link>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css

@@ -0,0 +1,42 @@
+.promo {
+  align-items: center;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: var(--Medium, 8px);
+  color: var(--Text-Brand-OnPrimary-2-Heading);
+  display: flex;
+  flex: 1 0 320px;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  height: 320px;
+  justify-content: center;
+  padding: var(--Spacing-x4) var(--Spacing-x3);
+}
+
+.link:nth-of-type(1) .promo {
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.36) 37.88%,
+      rgba(0, 0, 0, 0.75) 100%
+    ),
+    url("/_static/img/Scandic_Park_Party_Lipstick.jpg");
+}
+
+.link:nth-of-type(2) .promo {
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.36) 37.88%,
+      rgba(0, 0, 0, 0.75) 100%
+    ),
+    url("/_static/img/Scandic_Family_Breakfast.jpg");
+}
+
+.text {
+  max-width: 400px;
+  text-align: center;
+}

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

@@ -0,0 +1,65 @@
+"use client"
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
+
+import useLang from "../../../hooks/useLang"
+import { Promo } from "./Promo"
+
+import styles from "./promos.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+import type { AdditionalInfoCookieValue } from "../../../types/components/findMyBooking/additionalInfoCookieValue"
+
+export interface PromosProps extends Pick<BookingConfirmation, "booking"> {}
+
+export function Promos({ booking }: PromosProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const { refId, confirmationNumber, hotelId } = booking
+  const { email, firstName, lastName } = booking.guest
+  useEffect(() => {
+    // Setting the `bv` cookie allows direct access to My stay without prompting for more information.
+    const value: AdditionalInfoCookieValue = {
+      email,
+      firstName,
+      lastName,
+      confirmationNumber,
+    }
+    document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
+  }, [confirmationNumber, email, firstName, lastName])
+
+  const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
+  return (
+    <div className={styles.promos}>
+      <Promo
+        buttonText={intl.formatMessage({
+          defaultMessage: "View and buy add-ons",
+        })}
+        href={myStayURL}
+        text={intl.formatMessage({
+          defaultMessage:
+            "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+        })}
+        title={intl.formatMessage({
+          defaultMessage: "Spice things up",
+        })}
+      />
+      <Promo
+        buttonText={intl.formatMessage({
+          defaultMessage: "Book another stay",
+        })}
+        href={`/${lang}?hotel=${hotelId}`}
+        text={intl.formatMessage({
+          defaultMessage:
+            "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
+        })}
+        title={intl.formatMessage({
+          defaultMessage: "Book your next stay",
+        })}
+      />
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css

@@ -0,0 +1,12 @@
+.promos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x5) 0;
+}
+
+@media screen and (min-width: 1367px) {
+  .promos {
+    flex-direction: row;
+  }
+}