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

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -47,11 +47,15 @@ export default function BookingCode() {
   const [showRemember, setShowRemember] = useState(false)
   const [showRememberMobile, setShowRememberMobile] = useState(false)
   const codeError = errors["bookingCode"]?.value
-  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
-  const addCode = intl.formatMessage({ id: "Add code" })
+  const codeVoucher = intl.formatMessage({
+    defaultMessage: "Code / Voucher",
+  })
+  const addCode = intl.formatMessage({
+    defaultMessage: "Add code",
+  })
   const ref = useRef<HTMLDivElement | null>(null)
   const removeExtraRoomsText = intl.formatMessage({
-    id: "Remove extra rooms",
+    defaultMessage: "Remove extra rooms",
   })
 
   function updateBookingCodeFormValue(value: string) {
@@ -186,7 +190,11 @@ export default function BookingCode() {
             >
               <Switch name="bookingCode.remember" className="mobile-switch">
                 <Caption asChild>
-                  <span>{intl.formatMessage({ id: "Remember code" })}</span>
+                  <span>
+                    {intl.formatMessage({
+                      defaultMessage: "Remember code",
+                    })}
+                  </span>
                 </Caption>
               </Switch>
             </div>
@@ -204,9 +212,12 @@ type CodeRememberProps = {
 
 function CodeRulesModal() {
   const intl = useIntl()
-  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
+  const codeVoucher = intl.formatMessage({
+    defaultMessage: "Code / Voucher",
+  })
   const bookingCodeTooltipText = intl.formatMessage({
-    id: "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
+    defaultMessage:
+      "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
   })
 
   return (
@@ -236,7 +247,11 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
     <>
       <Checkbox name="bookingCode.remember">
         <Caption asChild>
-          <span>{intl.formatMessage({ id: "Remember code" })}</span>
+          <span>
+            {intl.formatMessage({
+              defaultMessage: "Remember code",
+            })}
+          </span>
         </Caption>
       </Checkbox>
       {bookingCodeValue ? (
@@ -247,7 +262,9 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
           type="button"
           onClick={onApplyClick}
         >
-          {intl.formatMessage({ id: "Apply" })}
+          {intl.formatMessage({
+            defaultMessage: "Apply",
+          })}
         </Button>
       ) : null}
     </>
@@ -269,7 +286,9 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
           }
           className={styles.errorIcon}
         />
-        {intl.formatMessage({ id: codeError.message })}
+        {intl.formatMessage({
+          defaultMessage: codeError.message,
+        })}
       </Caption>
       {isMultiroomErr ? (
         <RemoveExtraRooms className={styles.hideOnMobile} />
@@ -299,7 +318,9 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
       intent="primary"
       {...props}
     >
-      {intl.formatMessage({ id: "Remove extra rooms" })}
+      {intl.formatMessage({
+        defaultMessage: "Remove extra rooms",
+      })}
     </Button>
   )
 }
@@ -319,7 +340,9 @@ function TabletBookingCode({
     formState: { errors },
   } = useFormContext<BookingWidgetSchema>()
   const codeError = errors["bookingCode"]?.value
-  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
+  const codeVoucher = intl.formatMessage({
+    defaultMessage: "Code / Voucher",
+  })
 
   function toggleModal(isOpen: boolean) {
     if (document.body) {
@@ -372,7 +395,9 @@ function TabletBookingCode({
             {({ close }) => (
               <div className={styles.popover}>
                 <Input
-                  label={intl.formatMessage({ id: "Add code" })}
+                  label={intl.formatMessage({
+                    defaultMessage: "Add code",
+                  })}
                   {...register("bookingCode.value", {
                     onChange: (e) => updateValue(e.target.value),
                   })}

apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx

@@ -29,9 +29,12 @@ export default function RewardNight() {
     trigger,
   } = useFormContext<BookingWidgetSchema>()
   const ref = useRef<HTMLDivElement | null>(null)
-  const reward = intl.formatMessage({ id: "Book Reward Night" })
+  const reward = intl.formatMessage({
+    defaultMessage: "Book Reward Night",
+  })
   const rewardNightTooltip = intl.formatMessage({
-    id: "As a Scandic Friends member you need to be logged in to book a reward night (membership number and password). The points can be used to book reward nights at all Scandic hotels.",
+    defaultMessage:
+      "As a Scandic Friends member you need to be logged in to book a reward night (membership number and password). The points can be used to book reward nights at all Scandic hotels.",
   })
   const redemptionErr = errors[REDEMPTION]
   const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
@@ -122,7 +125,9 @@ export default function RewardNight() {
               color="Icon/Feedback/Information"
               className={styles.errorIcon}
             />
-            {intl.formatMessage({ id: redemptionErr.message })}
+            {intl.formatMessage({
+              defaultMessage: redemptionErr.message,
+            })}
           </Caption>
           {isMultiRoomError ? <RemoveExtraRooms /> : null}
         </div>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -35,7 +35,11 @@ export default function ClearSearchButton({
     >
       <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
       <Caption color="burgundy" type="bold" asChild>
-        <span>{intl.formatMessage({ id: "Clear searches" })}</span>
+        <span>
+          {intl.formatMessage({
+            defaultMessage: "Clear searches",
+          })}
+        </span>
       </Caption>
     </button>
   )

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx

@@ -90,9 +90,12 @@ export default function SearchList({
       return (
         <SearchListError
           getMenuProps={getMenuProps}
-          caption={intl.formatMessage({ id: "Enter destination or hotel" })}
+          caption={intl.formatMessage({
+            defaultMessage: "Enter destination or hotel",
+          })}
           body={intl.formatMessage({
-            id: "A destination or hotel name is needed to be able to search for a hotel room.",
+            defaultMessage:
+              "A destination or hotel name is needed to be able to search for a hotel room.",
           })}
         />
       )
@@ -102,9 +105,12 @@ export default function SearchList({
       return (
         <SearchListError
           getMenuProps={getMenuProps}
-          caption={intl.formatMessage({ id: "No results" })}
+          caption={intl.formatMessage({
+            defaultMessage: "No results",
+          })}
           body={intl.formatMessage({
-            id: "We couldn't find a matching location for your search.",
+            defaultMessage:
+              "We couldn't find a matching location for your search.",
           })}
         />
       )
@@ -115,9 +121,12 @@ export default function SearchList({
     return (
       <SearchListError
         getMenuProps={getMenuProps}
-        caption={intl.formatMessage({ id: "Unable to search" })}
+        caption={intl.formatMessage({
+          defaultMessage: "Unable to search",
+        })}
         body={intl.formatMessage({
-          id: "An error occurred while searching, please try again.",
+          defaultMessage:
+            "An error occurred while searching, please try again.",
         })}
       />
     )
@@ -147,11 +156,14 @@ export default function SearchList({
     return (
       <Dialog getMenuProps={getMenuProps} variant="error">
         <Body className={styles.text} textTransform="bold">
-          {intl.formatMessage({ id: "No results" })}
+          {intl.formatMessage({
+            defaultMessage: "No results",
+          })}
         </Body>
         <Body className={styles.text} color="uiTextPlaceholder">
           {intl.formatMessage({
-            id: "We couldn't find a matching location for your search.",
+            defaultMessage:
+              "We couldn't find a matching location for your search.",
           })}
         </Body>
         {searchHistory && (
@@ -162,7 +174,9 @@ export default function SearchList({
               color="uiTextPlaceholder"
               textTransform="uppercase"
             >
-              {intl.formatMessage({ id: "Latest searches" })}
+              {intl.formatMessage({
+                defaultMessage: "Latest searches",
+              })}
             </Footnote>
             <List
               getItemProps={getItemProps}
@@ -188,7 +202,9 @@ export default function SearchList({
     return (
       <Dialog getMenuProps={getMenuProps}>
         <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-          {intl.formatMessage({ id: "Latest searches" })}
+          {intl.formatMessage({
+            defaultMessage: "Latest searches",
+          })}
         </Footnote>
         <List
           getItemProps={getItemProps}
@@ -215,14 +231,18 @@ export default function SearchList({
       <List
         getItemProps={getItemProps}
         highlightedIndex={highlightedIndex}
-        label={intl.formatMessage({ id: "Cities" })}
+        label={intl.formatMessage({
+          defaultMessage: "Cities",
+        })}
         locations={autocompleteData?.hits.cities ?? []}
       />
       <List
         getItemProps={getItemProps}
         highlightedIndex={highlightedIndex}
         initialIndex={autocompleteData?.hits.cities.length}
-        label={intl.formatMessage({ id: "Hotels" })}
+        label={intl.formatMessage({
+          defaultMessage: "Hotels",
+        })}
         locations={autocompleteData?.hits.hotels ?? []}
       />
     </Dialog>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -89,7 +89,11 @@ export default function Search({ handlePressEnter }: SearchProps) {
               color={isOpen ? "uiTextActive" : "red"}
               asChild
             >
-              <span>{intl.formatMessage({ id: "Where to?" })}</span>
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "Where to?",
+                })}
+              </span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
@@ -101,7 +105,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
                     openMenu()
                   },
                   placeholder: intl.formatMessage({
-                    id: "Hotels & Destinations",
+                    defaultMessage: "Hotels & Destinations",
                   }),
                   value: searchTerm,
                   ...register(SEARCH_TERM_NAME, {
@@ -138,7 +142,11 @@ export function SearchSkeleton() {
     <div className={styles.container}>
       <div className={styles.label}>
         <Caption type="bold" color="red" asChild>
-          <span>{intl.formatMessage({ id: "Where to?" })}</span>
+          <span>
+            {intl.formatMessage({
+              defaultMessage: "Where to?",
+            })}
+          </span>
         </Caption>
       </div>
       <div>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -26,8 +26,12 @@ export default function Voucher() {
 export function VoucherSkeleton() {
   const intl = useIntl()
 
-  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
-  const reward = intl.formatMessage({ id: "Book Reward Night" })
+  const vouchers = intl.formatMessage({
+    defaultMessage: "Code / Voucher",
+  })
+  const reward = intl.formatMessage({
+    defaultMessage: "Book Reward Night",
+  })
 
   const form = useForm()
 

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -48,12 +48,13 @@ export default function FormContent({
               {nights > 0
                 ? intl.formatMessage(
                     {
-                      id: "{totalNights, plural, one {# night} other {# nights}}",
+                      defaultMessage:
+                        "{totalNights, plural, one {# night} other {# nights}}",
                     },
                     { totalNights: nights }
                   )
                 : intl.formatMessage({
-                    id: "Check in",
+                    defaultMessage: "Check in",
                   })}
             </Caption>
             <DatePicker />
@@ -61,7 +62,11 @@ export default function FormContent({
           <div className={styles.rooms}>
             <label>
               <Caption color="red" type="bold" asChild>
-                <span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
+                <span>
+                  {intl.formatMessage({
+                    defaultMessage: "Rooms & Guests",
+                  })}
+                </span>
               </Caption>
             </label>
             <GuestsRoomsPickerForm />
@@ -105,7 +110,11 @@ export default function FormContent({
               className={styles.buttonText}
               asChild
             >
-              <span>{intl.formatMessage({ id: "Search" })}</span>
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "Search",
+                })}
+              </span>
             </Caption>
             <span className={styles.icon}>
               <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
@@ -129,7 +138,10 @@ export function BookingWidgetFormContentSkeleton() {
         <div className={styles.when}>
           <Caption color="red" type="bold">
             {intl.formatMessage(
-              { id: "{totalNights, plural, one {# night} other {# nights}}" },
+              {
+                defaultMessage:
+                  "{totalNights, plural, one {# night} other {# nights}}",
+              },
               { totalNights: 0 }
             )}
           </Caption>
@@ -137,7 +149,11 @@ export function BookingWidgetFormContentSkeleton() {
         </div>
         <div className={styles.rooms}>
           <Caption color="red" type="bold" asChild>
-            <span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
+            <span>
+              {intl.formatMessage({
+                defaultMessage: "Rooms & Guests",
+              })}
+            </span>
           </Caption>
           <SkeletonShimmer width={"100%"} display={"block"} />
         </div>
@@ -159,7 +175,11 @@ export function BookingWidgetFormContentSkeleton() {
             className={styles.buttonText}
             asChild
           >
-            <span>{intl.formatMessage({ id: "Search" })}</span>
+            <span>
+              {intl.formatMessage({
+                defaultMessage: "Search",
+              })}
+            </span>
           </Caption>
           <span className={styles.icon}>
             <MaterialIcon icon="search" color="Icon/Inverted" size={28} />