feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -31,7 +31,11 @@ export default function ToggleSidePeek({
       intent={intent}
       wrapping
     >
-      {title ? title : intl.formatMessage({ id: "See room details" })}
+      {title
+        ? title
+        : intl.formatMessage({
+            defaultMessage: "See room details",
+          })}
       <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
     </Button>
   )

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -51,7 +51,11 @@ export default function SelectedRoom() {
             type="label"
             color="uiTextHighContrast"
           >
-            <h2>{intl.formatMessage({ id: "Your room" })}</h2>
+            <h2>
+              {intl.formatMessage({
+                defaultMessage: "Your room",
+              })}
+            </h2>
           </Footnote>
           <Subtitle
             type="two"
@@ -59,7 +63,9 @@ export default function SelectedRoom() {
             color="uiTextHighContrast"
           >
             {intl.formatMessage(
-              { id: "{roomType} <rate>{rateDescription}</rate>" },
+              {
+                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
+              },
               {
                 roomType: room.roomType,
                 rateDescription: room.cancellationText,
@@ -78,7 +84,9 @@ export default function SelectedRoom() {
           >
             <MaterialIcon icon="edit_square" color="CurrentColor" />
             <Caption color="burgundy" type="bold">
-              {intl.formatMessage({ id: "Change room" })}
+              {intl.formatMessage({
+                defaultMessage: "Change room",
+              })}
             </Caption>
           </Button>
         </div>