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

apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -17,7 +17,9 @@ export default function AdultSelector({
 }: SelectorProps) {
   const name = `rooms.${roomIndex}.adults`
   const intl = useIntl()
-  const adultsLabel = intl.formatMessage({ id: "Adults" })
+  const adultsLabel = intl.formatMessage({
+    defaultMessage: "Adults",
+  })
   const { setValue } = useFormContext()
 
   function increaseAdultsCount() {

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -33,9 +33,15 @@ export default function ChildInfoSelector({
   const ageFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.age`
   const bedFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.bed`
   const intl = useIntl()
-  const ageLabel = intl.formatMessage({ id: "Age" })
-  const bedLabel = intl.formatMessage({ id: "Bed" })
-  const errorMessage = intl.formatMessage({ id: "Child age is required" })
+  const ageLabel = intl.formatMessage({
+    defaultMessage: "Age",
+  })
+  const bedLabel = intl.formatMessage({
+    defaultMessage: "Bed",
+  })
+  const errorMessage = intl.formatMessage({
+    defaultMessage: "Child age is required",
+  })
   const { setValue, formState } = useFormContext()
 
   function updateSelectedBed(bed: number) {
@@ -50,15 +56,21 @@ export default function ChildInfoSelector({
 
   const allBedTypes: ChildBed[] = [
     {
-      label: intl.formatMessage({ id: "In adults bed" }),
+      label: intl.formatMessage({
+        defaultMessage: "In adults bed",
+      }),
       value: ChildBedMapEnum.IN_ADULTS_BED,
     },
     {
-      label: intl.formatMessage({ id: "In crib" }),
+      label: intl.formatMessage({
+        defaultMessage: "In crib",
+      }),
       value: ChildBedMapEnum.IN_CRIB,
     },
     {
-      label: intl.formatMessage({ id: "In extra bed" }),
+      label: intl.formatMessage({
+        defaultMessage: "In extra bed",
+      }),
       value: ChildBedMapEnum.IN_EXTRA_BED,
     },
   ]

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -19,7 +19,9 @@ export default function ChildSelector({
   currentChildren,
 }: SelectorProps) {
   const intl = useIntl()
-  const childrenLabel = intl.formatMessage({ id: "Children" })
+  const childrenLabel = intl.formatMessage({
+    defaultMessage: "Children",
+  })
   const { setValue } = useFormContext()
 
   function increaseChildrenCount(roomIndex: number) {

apps/scandic-web/components/GuestsRoomsPicker/Form.tsx

@@ -32,16 +32,22 @@ export default function GuestsRoomsPickerDialog({
   const { getFieldState, trigger, setValue, getValues } =
     useFormContext<BookingWidgetSchema>()
   const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
-  const addRoomLabel = intl.formatMessage({ id: "Add room" })
-  const doneLabel = intl.formatMessage({ id: "Done" })
+  const addRoomLabel = intl.formatMessage({
+    defaultMessage: "Add room",
+  })
+  const doneLabel = intl.formatMessage({
+    defaultMessage: "Done",
+  })
   // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
   const addRoomDisabledTextForSpecialRate = getValues(REDEMPTION)
     ? intl.formatMessage({
-        id: "Multi-room booking is not available with reward night.",
+        defaultMessage:
+          "Multi-room booking is not available with reward night.",
       })
     : getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
       intl.formatMessage({
-        id: "Multi-room booking is not available with this booking code.",
+        defaultMessage:
+          "Multi-room booking is not available with this booking code.",
       })
 
   const handleClose = useCallback(async () => {

apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -25,7 +25,9 @@ export function GuestsRoom({
 }) {
   const intl = useIntl()
   const roomLabel = intl.formatMessage(
-    { id: "Room {roomIndex}" },
+    {
+      defaultMessage: "Room {roomIndex}",
+    },
     {
       roomIndex: index + 1,
     }
@@ -64,7 +66,9 @@ export function GuestsRoom({
             className={styles.roomActionsButton}
           >
             <MaterialIcon icon="delete" color="CurrentColor" />
-            {intl.formatMessage({ id: "Remove room" })}
+            {intl.formatMessage({
+              defaultMessage: "Remove room",
+            })}
           </Button>
         )}
       </section>

apps/scandic-web/components/GuestsRoomsPicker/index.tsx

@@ -138,11 +138,15 @@ function Trigger({
 
   const parts = [
     intl.formatMessage(
-      { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
+      {
+        defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
+      },
       { totalRooms: rooms.length }
     ),
     intl.formatMessage(
-      { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+      {
+        defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
+      },
       { totalAdults: rooms.reduce((acc, room) => acc + room.adults, 0) }
     ),
   ]
@@ -151,7 +155,8 @@ function Trigger({
     parts.push(
       intl.formatMessage(
         {
-          id: "{totalChildren, plural, one {# child} other {# children}}",
+          defaultMessage:
+            "{totalChildren, plural, one {# child} other {# children}}",
         },
         {
           totalChildren: rooms.reduce(