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

apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx

@@ -130,7 +130,9 @@ export default function PriceDetailsTable({
 
   const diff = dt(toDate).diff(fromDate, "days")
   const nights = intl.formatMessage(
-    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    {
+      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
+    },
     { totalNights: diff }
   )
   const vatPercentage = vat / 100
@@ -145,6 +147,31 @@ export default function PriceDetailsTable({
   return (
     <table className={styles.priceDetailsTable}>
       {rooms.map((room, idx) => {
+        const totalAdultsMsg = intl.formatMessage(
+          {
+            defaultMessage:
+              "{totalAdults, plural, one {# adult} other {# adults}}",
+          },
+          {
+            totalAdults: room.adults,
+          }
+        )
+
+        const totalChildrenMsg = intl.formatMessage(
+          {
+            defaultMessage:
+              "{totalChildren, plural, one {# child} other {# children}}",
+          },
+          {
+            totalChildren: room.childrenInRoom.length,
+          }
+        )
+
+        const guestsCountMsg = [totalAdultsMsg]
+        if (room.childrenInRoom.length) {
+          guestsCountMsg.push(totalChildrenMsg)
+        }
+
         return (
           <Fragment key={idx}>
             <TableSection>
@@ -154,7 +181,9 @@ export default function PriceDetailsTable({
                     <Typography variant="Body/Paragraph/mdBold">
                       <span>
                         {intl.formatMessage(
-                          { id: "Room {roomIndex}" },
+                          {
+                            defaultMessage: "Room {roomIndex}",
+                          },
                           { roomIndex: idx + 1 }
                         )}
                       </span>
@@ -164,7 +193,9 @@ export default function PriceDetailsTable({
               )}
               <TableSectionHeader title={room.roomName} subtitle={duration} />
               <Row
-                label={intl.formatMessage({ id: "Average price per night" })}
+                label={intl.formatMessage({
+                  defaultMessage: "Average price per night",
+                })}
                 value={formatPrice(
                   intl,
                   room.roomPrice.perNight.local.price,
@@ -186,7 +217,9 @@ export default function PriceDetailsTable({
                 : null}
               <Row
                 bold
-                label={intl.formatMessage({ id: "Room charge" })}
+                label={intl.formatMessage({
+                  defaultMessage: "Room charge",
+                })}
                 value={formatPrice(
                   intl,
                   room.roomPrice.perStay.local.price,
@@ -199,11 +232,11 @@ export default function PriceDetailsTable({
                 <Row
                   label={intl.formatMessage(
                     {
-                      id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}",
+                      defaultMessage:
+                        "Breakfast ({guestsCount}) x {totalBreakfasts}",
                     },
                     {
-                      totalAdults: room.adults,
-                      totalChildren: room.childrenInRoom.length,
+                      guestsCount: guestsCountMsg.join(", "),
                       totalBreakfasts: diff,
                     }
                   )}
@@ -216,7 +249,7 @@ export default function PriceDetailsTable({
                 <Row
                   bold
                   label={intl.formatMessage({
-                    id: "Breakfast charge",
+                    defaultMessage: "Breakfast charge",
                   })}
                   value={formatPrice(
                     intl,
@@ -230,19 +263,32 @@ export default function PriceDetailsTable({
         )
       })}
       <TableSection>
-        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
+        <TableSectionHeader
+          title={intl.formatMessage({
+            defaultMessage: "Total",
+          })}
+        />
         <Row
-          label={intl.formatMessage({ id: "Price excluding VAT" })}
+          label={intl.formatMessage({
+            defaultMessage: "Price excluding VAT",
+          })}
           value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
         />
         <Row
-          label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
+          label={intl.formatMessage(
+            {
+              defaultMessage: "VAT {vat}%",
+            },
+            { vat }
+          )}
           value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
         />
         <tr className={styles.row}>
           <td>
             <Body textTransform="bold">
-              {intl.formatMessage({ id: "Price including VAT" })}
+              {intl.formatMessage({
+                defaultMessage: "Price including VAT",
+              })}
             </Body>
           </td>
           <td className={styles.price}>