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

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

@@ -66,7 +66,10 @@ export default function ReceiptRoom({
         <Typography variant="Body/Paragraph/mdRegular">
           <p className={styles.uiTextMediumContrast}>
             {intl.formatMessage(
-              { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+              {
+                defaultMessage:
+                  "{totalAdults, plural, one {# adult} other {# adults}}",
+              },
               {
                 totalAdults: room.adults,
               }
@@ -88,7 +91,9 @@ export default function ReceiptRoom({
                 textDecoration="underline"
                 variant="icon"
               >
-                {intl.formatMessage({ id: "Reservation policy" })}
+                {intl.formatMessage({
+                  defaultMessage: "Reservation policy",
+                })}
                 <MaterialIcon icon="info" color="CurrentColor" />
               </Link>
             </Button>
@@ -101,8 +106,12 @@ export default function ReceiptRoom({
           subtitle={
             room.rateDefinition.cancellationRule ===
             CancellationRuleEnum.CancellableBefore6PM
-              ? intl.formatMessage({ id: "Pay later" })
-              : intl.formatMessage({ id: "Pay now" })
+              ? intl.formatMessage({
+                  defaultMessage: "Pay later",
+                })
+              : intl.formatMessage({
+                  defaultMessage: "Pay now",
+                })
           }
         >
           <div className={styles.terms}>
@@ -161,14 +170,18 @@ export default function ReceiptRoom({
             <Typography variant="Body/Paragraph/mdRegular">
               <p className={styles.uiTextHighContrast}>
                 {intl.formatMessage(
-                  { id: "Crib (child) × {count}" },
+                  {
+                    defaultMessage: "Crib (child) × {count}",
+                  },
                   { count: childBedCrib.quantity }
                 )}
               </p>
             </Typography>
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p className={styles.uiTextHighContrast}>
-                {intl.formatMessage({ id: "Based on availability" })}
+                {intl.formatMessage({
+                  defaultMessage: "Based on availability",
+                })}
               </p>
             </Typography>
           </div>
@@ -185,7 +198,9 @@ export default function ReceiptRoom({
             <Typography variant="Body/Paragraph/mdRegular">
               <p className={styles.uiTextHighContrast}>
                 {intl.formatMessage(
-                  { id: "Extra bed (child) × {count}" },
+                  {
+                    defaultMessage: "Extra bed (child) × {count}",
+                  },
                   {
                     count: childBedExtraBed.quantity,
                   }
@@ -203,12 +218,18 @@ export default function ReceiptRoom({
       {room.breakfast || breakfastIncluded ? (
         <div className={styles.entry}>
           <Typography variant="Body/Paragraph/mdRegular">
-            <p>{intl.formatMessage({ id: "Breakfast buffet" })}</p>
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Breakfast buffet",
+              })}
+            </p>
           </Typography>
           {breakfastIncluded ? (
             <Typography variant="Body/Paragraph/mdRegular">
               <p className={styles.red}>
-                {intl.formatMessage({ id: "Included" })}
+                {intl.formatMessage({
+                  defaultMessage: "Included",
+                })}
               </p>
             </Typography>
           ) : null}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -30,7 +30,11 @@ export default function TotalPrice() {
       <div className={styles.price}>
         <div className={styles.entry}>
           <Typography variant="Body/Paragraph/mdBold">
-            <p>{intl.formatMessage({ id: "Total price" })}</p>
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Total price",
+              })}
+            </p>
           </Typography>
           {hasAllRoomsLoaded ? (
             <Typography variant="Body/Paragraph/mdBold">

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/index.tsx

@@ -19,7 +19,9 @@ export default function Receipt() {
   return (
     <section className={styles.receipt}>
       <Subtitle type="two">
-        {intl.formatMessage({ id: "Booking summary" })}
+        {intl.formatMessage({
+          defaultMessage: "Booking summary",
+        })}
       </Subtitle>
 
       {rooms.map((room, idx) => (
@@ -27,7 +29,9 @@ export default function Receipt() {
           {rooms.length > 1 ? (
             <Body color="uiTextHighContrast" textTransform={"bold"}>
               {intl.formatMessage(
-                { id: "Room {roomIndex}" },
+                {
+                  defaultMessage: "Room {roomIndex}",
+                },
                 { roomIndex: idx + 1 }
               )}
             </Body>