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),
                   })}