Merged in fix/SW-2481-booking-number (pull request #1845)

fix(SW-2481): add booking number for multiroom

* fix(SW-2481): add booking number for multiroom


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -41,6 +41,16 @@ export default function Room({
   return (
     <article className={styles.room}>
       <header className={styles.header}>
+        <Typography variant="Title/Subtitle/md">
+          <h2>
+            {intl.formatMessage(
+              {
+                defaultMessage: "Booking number {value}",
+              },
+              { value: booking.confirmationNumber }
+            )}
+          </h2>
+        </Typography>
         {booking.rateDefinition.isMemberRate ? (
           <div className={styles.benefits}>
             <>
@@ -60,19 +70,24 @@ export default function Room({
         {booking.guaranteeInfo && (
           <div className={styles.benefits}>
             <MaterialIcon
-              icon="check"
+              icon="check_circle"
               color="Icon/Feedback/Success"
               size={20}
             />
+            <Typography
+              variant="Body/Supporting text (caption)/smBold"
+              className={styles.guaranteeText}
+            >
+              <p>
+                {intl.formatMessage({
+                  defaultMessage: "Booking guaranteed.",
+                })}
+              </p>
+            </Typography>
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p>
-                <strong>
-                  {intl.formatMessage({
-                    defaultMessage: "Booking guaranteed.",
-                  })}
-                </strong>
-                {/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
-                {/* eslint-enable formatjs/no-literal-string-in-jsx */}
                 {intl.formatMessage({
                   defaultMessage:
                     "Your room will remain available for check-in even after 18:00.",

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css

@@ -20,6 +20,10 @@
   width: max-content;
 }
 
+.guaranteeText {
+  color: var(--Text-Feedback-Succes-Accent);
+}
+
 .booking {
   background-color: var(--Base-Background-Primary-Normal);
   border-radius: var(--Corner-radius-Large);