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

@@ -0,0 +1,83 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
+import PriceDetails from "../../PriceDetails"
+
+import styles from "./totalPrice.module.css"
+
+export default function TotalPrice() {
+  const intl = useIntl()
+  const { rooms, formattedTotalCost } = useBookingConfirmationStore(
+    (state) => ({
+      bookingCode: state.bookingCode,
+      rooms: state.rooms,
+      formattedTotalCost: state.formattedTotalCost,
+    })
+  )
+
+  const hasAllRoomsLoaded = rooms.every((room) => room)
+  const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode
+  const isMemberRate = rooms.some((room) => room?.rateDefinition.isMemberRate)
+  const showDiscounted = bookingCode || isMemberRate
+
+  return (
+    <>
+      <Divider color="Border/Divider/Subtle" />
+      <div className={styles.price}>
+        <div className={styles.entry}>
+          <div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "<b>Total price</b> (incl VAT)",
+                  },
+                  {
+                    b: (str) => (
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <span>{str}</span>
+                      </Typography>
+                    ),
+                  }
+                )}
+              </p>
+            </Typography>
+            {/* TODO: Add approx price, we're currently not receiving this value from API  */}
+          </div>
+          <div className={styles.prices}>
+            {hasAllRoomsLoaded ? (
+              <Typography variant="Body/Paragraph/mdBold">
+                <span
+                  className={cx(styles.price, {
+                    [styles.discounted]: showDiscounted,
+                  })}
+                >
+                  {formattedTotalCost}
+                </span>
+              </Typography>
+            ) : (
+              <SkeletonShimmer width={"25%"} />
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={styles.ctaWrapper}>
+        {hasAllRoomsLoaded ? (
+          <PriceDetails />
+        ) : (
+          <SkeletonShimmer width={"100%"} />
+        )}
+      </div>
+
+      {bookingCode && <BookingCodeChip bookingCode={bookingCode} alignCenter />}
+    </>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css

@@ -0,0 +1,33 @@
+.entry {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+  margin-bottom: var(--Space-x15);
+}
+
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.approxPrice {
+  color: var(--Text-Secondary);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
+}