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

@@ -0,0 +1,52 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useBookingConfirmationStore } from "../../../stores/booking-confirmation"
+
+import styles from "./paymentDetails.module.css"
+
+export function PaymentDetails() {
+  const intl = useIntl()
+
+  const { rooms, formattedTotalCost } = useBookingConfirmationStore(
+    (state) => ({
+      rooms: state.rooms,
+      formattedTotalCost: state.formattedTotalCost,
+    })
+  )
+
+  const hasAllRoomsLoaded = rooms.every((room) => room)
+  return (
+    <div className={styles.details}>
+      <Typography variant={"Title/Subtitle/md"}>
+        <h2>
+          {intl.formatMessage({
+            defaultMessage: "Payment details",
+          })}
+        </h2>
+      </Typography>
+      <div className={styles.payment}>
+        {hasAllRoomsLoaded ? (
+          <Typography variant={"Body/Paragraph/mdRegular"}>
+            <p>
+              {intl.formatMessage(
+                {
+                  defaultMessage: "Total cost: {amount}",
+                },
+                {
+                  amount: formattedTotalCost,
+                }
+              )}
+            </p>
+          </Typography>
+        ) : (
+          <SkeletonShimmer width={"100%"} />
+        )}
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css

@@ -0,0 +1,19 @@
+.details,
+.payment {
+  display: flex;
+  flex-direction: column;
+}
+
+.details {
+  gap: var(--Spacing-x-one-and-half);
+  max-width: fit-content;
+}
+
+.payment {
+  gap: var(--Spacing-x-half);
+}
+
+.details button.btn {
+  align-self: flex-start;
+  margin-top: var(--Spacing-x-half);
+}