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/Receipt/Room/Breakfast/breakfast.module.css

@@ -0,0 +1,12 @@
+.entry {
+  display: flex;
+  justify-content: space-between;
+}
+
+.textDefault {
+  color: var(--Text-Default);
+}
+
+.textSecondary {
+  color: var(--Text-Secondary);
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/Breakfast/index.tsx

@@ -0,0 +1,64 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./breakfast.module.css"
+
+import type { PackageSchema } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+interface BreakfastProps {
+  breakfast: PackageSchema | false | undefined
+  breakfastIncluded: boolean
+  guests: string
+}
+
+export default function Breakfast({
+  breakfast,
+  breakfastIncluded,
+  guests,
+}: BreakfastProps) {
+  const intl = useIntl()
+
+  const breakfastBuffet = intl.formatMessage({
+    defaultMessage: "Breakfast buffet",
+  })
+
+  if (breakfastIncluded || breakfast) {
+    const price = breakfast
+      ? formatPrice(intl, breakfast.totalPrice, breakfast.currency)
+      : intl.formatMessage({ defaultMessage: "Included" })
+    return (
+      <div className={styles.entry}>
+        <div>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.textDefault}>{breakfastBuffet}</p>
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p className={styles.textSecondary}>{guests}</p>
+          </Typography>
+        </div>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.textDefault}>{price}</p>
+        </Typography>
+      </div>
+    )
+  }
+
+  if (breakfast === false) {
+    const noBreakfast = intl.formatMessage({ defaultMessage: "No breakfast" })
+    return (
+      <div className={styles.entry}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.textDefault}>{breakfastBuffet}</p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.textDefault}>{noBreakfast}</p>
+        </Typography>
+      </div>
+    )
+  }
+
+  return null
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx

@@ -0,0 +1,17 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
+import styles from "./roomSkeletonLoader.module.css"
+
+export default function RoomSkeletonLoader() {
+  return (
+    <div className={styles.room}>
+      <SkeletonShimmer />
+      <SkeletonShimmer width={"15%"} />
+      <SkeletonShimmer width={"30%"} />
+      <SkeletonShimmer width={"40%"} />
+      <SkeletonShimmer />
+      <SkeletonShimmer />
+      <SkeletonShimmer />
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx

@@ -0,0 +1,274 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Modal from "@scandic-hotels/design-system/Modal"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { ChildBedTypeEnum } from "@scandic-hotels/trpc/enums/childBedTypeEnum"
+
+import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
+import { getFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
+import Breakfast from "./Breakfast"
+import RoomSkeletonLoader from "./RoomSkeletonLoader"
+
+import styles from "./room.module.css"
+
+import type { Room } from "../../../../types/stores/booking-confirmation"
+
+type BookingConfirmationReceiptRoomProps = {
+  room: Room
+  roomNumber: number
+  roomCount: number
+}
+
+export function ReceiptRoom({
+  room,
+  roomNumber,
+  roomCount,
+}: BookingConfirmationReceiptRoomProps) {
+  const intl = useIntl()
+  const { currencyCode, isVatCurrency } = useBookingConfirmationStore(
+    (state) => ({
+      currencyCode: state.currencyCode,
+      isVatCurrency: state.isVatCurrency,
+    })
+  )
+
+  if (!room) {
+    return <RoomSkeletonLoader />
+  }
+
+  const childBedCrib = room.childBedPreferences.find(
+    (c) => c.bedType === ChildBedTypeEnum.Crib
+  )
+
+  const childBedExtraBed = room.childBedPreferences.find(
+    (c) => c.bedType === ChildBedTypeEnum.ExtraBed
+  )
+
+  const adultsMsg = intl.formatMessage(
+    {
+      defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
+    },
+    { totalAdults: room.adults }
+  )
+
+  const guestsParts = [adultsMsg]
+  if (room.childrenAges?.length) {
+    const childrenMsg = intl.formatMessage(
+      {
+        defaultMessage:
+          "{totalChildren, plural, one {# child} other {# children}}",
+      },
+      { totalChildren: room.childrenAges.length }
+    )
+    guestsParts.push(childrenMsg)
+  }
+
+  const guests = guestsParts.join(", ")
+  const showDiscounted = room.rateDefinition.isMemberRate
+
+  return (
+    <>
+      <div className={styles.room}>
+        <div>
+          {roomCount > 1 ? (
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.roomTitle}>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "Room {roomIndex}",
+                  },
+                  {
+                    roomIndex: roomNumber,
+                  }
+                )}
+              </p>
+            </Typography>
+          ) : null}
+          <div className={styles.entry}>
+            <div>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>{room.name}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={styles.additionalInformation}>
+                  <p>{guestsParts.join(", ")}</p>
+                  <p>{room.rateDefinition.cancellationText}</p>
+                </div>
+              </Typography>
+            </div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={styles.prices}>
+                <p
+                  className={cx(styles.price, {
+                    [styles.discounted]: showDiscounted,
+                  })}
+                >
+                  {room.formattedRoomCost}
+                </p>
+                {/* TODO: add original price, we're currently not receiving this value from API */}
+              </div>
+            </Typography>
+          </div>
+          {room.rateDefinition.generalTerms ? (
+            <div className={styles.ctaWrapper}>
+              <Modal
+                trigger={
+                  <Button
+                    className={styles.termsButton}
+                    variant="Text"
+                    typography="Body/Supporting text (caption)/smBold"
+                    wrapping={false}
+                  >
+                    {intl.formatMessage({
+                      defaultMessage: "Reservation policy",
+                    })}
+                    <MaterialIcon
+                      icon="chevron_right"
+                      size={20}
+                      color="CurrentColor"
+                    />
+                  </Button>
+                }
+                title={
+                  (isVatCurrency
+                    ? room.rateDefinition.cancellationText
+                    : room.rateDefinition.title) || ""
+                }
+                subtitle={
+                  room.rateDefinition.cancellationRule ===
+                  CancellationRuleEnum.CancellableBefore6PM
+                    ? intl.formatMessage({
+                        defaultMessage: "Pay later",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "Pay now",
+                      })
+                }
+              >
+                <div className={styles.terms}>
+                  {room.rateDefinition.generalTerms?.map((info) => (
+                    <Typography
+                      key={info}
+                      className={styles.termsText}
+                      variant="Body/Paragraph/mdRegular"
+                    >
+                      <span>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {info}
+                      </span>
+                    </Typography>
+                  ))}
+                </div>
+              </Modal>
+            </div>
+          ) : null}
+        </div>
+
+        {room.roomFeatures
+          ? room.roomFeatures.map((feature) => (
+              <div className={styles.entry} key={feature.code}>
+                <div>
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <p className={styles.uiTextHighContrast}>
+                      {getFeatureDescription(
+                        feature.code,
+                        feature.description,
+                        intl
+                      )}
+                    </p>
+                  </Typography>
+                </div>
+
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.uiTextHighContrast}>
+                    {formatPrice(intl, feature.totalPrice, feature.currency)}
+                  </p>
+                </Typography>
+              </div>
+            ))
+          : null}
+        <div className={styles.entry}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.uiTextHighContrast}>{room.bedDescription}</p>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.uiTextHighContrast}>
+              {formatPrice(intl, 0, currencyCode)}
+            </p>
+          </Typography>
+        </div>
+
+        {childBedCrib ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <div>
+                <p>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Crib (child) × {count}",
+                    },
+                    { count: childBedCrib.quantity }
+                  )}
+                </p>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p className={styles.uiTextHighContrast}>
+                    {intl.formatMessage({
+                      defaultMessage: "Subject to availability",
+                    })}
+                  </p>
+                </Typography>
+              </div>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, currencyCode)}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+        {childBedExtraBed ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <div>
+                <p>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Extra bed (child) × {count}",
+                    },
+                    {
+                      count: childBedExtraBed.quantity,
+                    }
+                  )}
+                </p>
+              </div>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, currencyCode)}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+        <Breakfast
+          breakfast={room.breakfast}
+          breakfastIncluded={room.breakfastIncluded}
+          guests={guests}
+        />
+      </div>
+      <Divider color="Border/Divider/Subtle" />
+    </>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css

@@ -0,0 +1,55 @@
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  overflow-y: auto;
+  color: var(--Text-Default);
+}
+
+.roomTitle,
+.additionalInformation {
+  color: var(--Text-Secondary);
+}
+
+.terms {
+  margin-top: var(--Space-x3);
+  margin-bottom: var(--Space-x3);
+}
+.termsText:nth-child(n) {
+  display: flex;
+  margin-bottom: var(--Space-x1);
+}
+
+.terms .termsIcon {
+  margin-right: var(--Space-x1);
+}
+
+.entry {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: space-between;
+}
+
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+  align-content: start;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css

@@ -0,0 +1,5 @@
+.room {
+  display: flex;
+  gap: var(--Spacing-x1);
+  flex-direction: column;
+}