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

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -53,22 +53,31 @@ export default function MobileToggleButton({
   }, 0)
 
   const totalNightsMsg = intl.formatMessage(
-    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    {
+      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
+    },
     { totalNights }
   )
 
   const totalAdultsMsg = intl.formatMessage(
-    { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+    {
+      defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
+    },
     { totalAdults }
   )
 
   const totalChildrenMsg = intl.formatMessage(
-    { id: "{totalChildren, plural, one {# child} other {# children}}" },
+    {
+      defaultMessage:
+        "{totalChildren, plural, one {# child} other {# children}}",
+    },
     { totalChildren }
   )
 
   const totalRoomsMsg = intl.formatMessage(
-    { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
+    {
+      defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
+    },
     { totalRooms }
   )
 
@@ -88,14 +97,18 @@ export default function MobileToggleButton({
           <span className={styles.block}>
             <Typography variant={"Body/Supporting text (caption)/smBold"}>
               <span className={styles.blockLabel}>
-                {intl.formatMessage({ id: "Where to?" })}
+                {intl.formatMessage({
+                  defaultMessage: "Where to?",
+                })}
               </span>
             </Typography>
             <Typography variant={"Body/Paragraph/mdRegular"}>
               <span className={styles.placeholder}>
                 {searchTerm
                   ? searchTerm
-                  : intl.formatMessage({ id: "Destination" })}
+                  : intl.formatMessage({
+                      defaultMessage: "Destination",
+                    })}
               </span>
             </Typography>
           </span>
@@ -108,7 +121,9 @@ export default function MobileToggleButton({
             <Typography variant={"Body/Paragraph/mdRegular"}>
               <span>
                 {intl.formatMessage(
-                  { id: "{selectedFromDate} - {selectedToDate}" },
+                  {
+                    defaultMessage: "{selectedFromDate} - {selectedToDate}",
+                  },
                   {
                     selectedFromDate,
                     selectedToDate,
@@ -133,7 +148,8 @@ export default function MobileToggleButton({
               <span className={styles.locationAndDate}>
                 {intl.formatMessage(
                   {
-                    id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
+                    defaultMessage:
+                      "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
                   },
                   {
                     selectedFromDate,
@@ -162,7 +178,9 @@ export function MobileToggleButtonSkeleton() {
       <span className={styles.block}>
         <Typography variant={"Body/Supporting text (caption)/smBold"}>
           <span className={styles.blockLabel}>
-            {intl.formatMessage({ id: "Where to?" })}
+            {intl.formatMessage({
+              defaultMessage: "Where to?",
+            })}
           </span>
         </Typography>
         <SkeletonShimmer display={"block"} height="24px" />
@@ -172,7 +190,10 @@ export function MobileToggleButtonSkeleton() {
         <Typography variant="Body/Supporting text (caption)/smBold">
           <span className={styles.blockLabel}>
             {intl.formatMessage(
-              { id: "{totalNights, plural, one {# night} other {# nights}}" },
+              {
+                defaultMessage:
+                  "{totalNights, plural, one {# night} other {# nights}}",
+              },
               { totalNights: 0 }
             )}
           </span>