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

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -17,17 +17,24 @@ export function UnlinkSAS() {
   return (
     <Dialog
       titleText={intl.formatMessage({
-        id: "Are you sure you want to unlink your account?",
+        defaultMessage: "Are you sure you want to unlink your account?",
       })}
       bodyText={intl.formatMessage({
-        id: "This will remove any membership level upgrades gained from the linking.",
+        defaultMessage:
+          "This will remove any membership level upgrades gained from the linking.",
+      })}
+      cancelButtonText={intl.formatMessage({
+        defaultMessage: "Go back",
+      })}
+      proceedText={intl.formatMessage({
+        defaultMessage: "Yes, unlink my accounts",
       })}
-      cancelButtonText={intl.formatMessage({ id: "Go back" })}
-      proceedText={intl.formatMessage({ id: "Yes, unlink my accounts" })}
       proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
       trigger={
         <Button intent="text" theme="base">
-          {intl.formatMessage({ id: "Unlink accounts" })}
+          {intl.formatMessage({
+            defaultMessage: "Unlink accounts",
+          })}
           <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Button>
       }

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -58,7 +58,8 @@ export default async function SASLinkedAccount({
           <p className={styles.caption}>
             <MaterialIcon icon="info" size={20} />
             {intl.formatMessage({
-              id: "Changes in your level match can take up to 24 hours to be displayed.",
+              defaultMessage:
+                "Changes in your level match can take up to 24 hours to be displayed.",
             })}
           </p>
         </Typography>
@@ -96,20 +97,37 @@ async function MatchedAccountInfo() {
     <section className={styles.matchedAccountSection}>
       <div className={styles.accountDetails}>
         <div className={styles.stack}>
-          <Label>{intl.formatMessage({ id: "Linked account" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Linked account",
+            })}
+          </Label>
           <Typography variant="Body/Paragraph/mdBold">
-            <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "SAS EuroBonus",
+              })}
+            </p>
           </Typography>
         </div>
         <div className={styles.stack}>
-          <Label>{intl.formatMessage({ id: "Level" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Level",
+            })}
+          </Label>
           <Typography variant="Body/Paragraph/mdBold">
             <p>{sasLevelName}</p>
           </Typography>
         </div>
         <div className={cx(styles.stack, styles.accountMemberNumber)}>
-          <Label>{intl.formatMessage({ id: "Membership number" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Membership number",
+            })}
+          </Label>
           <Typography variant="Body/Paragraph/mdBold">
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <p className={styles.textRight}>EB{sasMembershipNumber}</p>
           </Typography>
         </div>
@@ -137,17 +155,33 @@ async function MatchedAccountInfoSkeleton() {
     <section className={styles.matchedAccountSection}>
       <div className={styles.accountDetails}>
         <div className={styles.stack}>
-          <Label>{intl.formatMessage({ id: "Linked account" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Linked account",
+            })}
+          </Label>
           <Typography variant="Body/Paragraph/mdBold">
-            <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "SAS EuroBonus",
+              })}
+            </p>
           </Typography>
         </div>
         <div className={styles.stack}>
-          <Label>{intl.formatMessage({ id: "Level" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Level",
+            })}
+          </Label>
           <SkeletonShimmer width="6ch" height="24px" />
         </div>
         <div className={cx(styles.stack, styles.accountMemberNumber)}>
-          <Label>{intl.formatMessage({ id: "Membership number" })}</Label>
+          <Label>
+            {intl.formatMessage({
+              defaultMessage: "Membership number",
+            })}
+          </Label>
           <SkeletonShimmer width="10ch" height="24px" />
         </div>
       </div>
@@ -188,19 +222,22 @@ async function TierMatchMessage({
   const messageMap: Record<MatchState, ReactNode> = {
     boostedBySAS: intl.formatMessage(
       {
-        id: "<sasMark>EuroBonus {sasLevelName}</sasMark> has upgraded your Scandic Friends level to <scandicMark>{scandicLevelName}</scandicMark>.",
+        defaultMessage:
+          "<sasMark>EuroBonus {sasLevelName}</sasMark> has upgraded your Scandic Friends level to <scandicMark>{scandicLevelName}</scandicMark>.",
       },
       messageValues
     ),
     boostedByScandic: intl.formatMessage(
       {
-        id: "Your Scandic Friends level <scandicMark>{scandicLevelName}</scandicMark> has upgraded you to <sasMark>EuroBonus {sasLevelName}</sasMark>.",
+        defaultMessage:
+          "Your Scandic Friends level <scandicMark>{scandicLevelName}</scandicMark> has upgraded you to <sasMark>EuroBonus {sasLevelName}</sasMark>.",
       },
       messageValues
     ),
     noBoost: intl.formatMessage(
       {
-        id: "<sasMark>EuroBonus {sasLevelName}</sasMark> and <scandicMark>{scandicLevelName}</scandicMark> are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!",
+        defaultMessage:
+          "<sasMark>EuroBonus {sasLevelName}</sasMark> and <scandicMark>{scandicLevelName}</scandicMark> are equally matched tiers. Level up in one of your memberships to qualify for an upgrade!",
       },
       messageValues
     ),
@@ -214,7 +251,11 @@ async function TierMatchMessage({
 
   return (
     <div className={styles.stack}>
-      <Label>{intl.formatMessage({ id: "Level match status" })}</Label>
+      <Label>
+        {intl.formatMessage({
+          defaultMessage: "Level match status",
+        })}
+      </Label>
       <div className={styles.tierMatchText}>
         <div className={styles.iconWrapper}>{iconMap[matchState]}</div>
         <Typography variant="Body/Paragraph/mdRegular">
@@ -230,7 +271,11 @@ async function TierMatchMessageSkeleton() {
 
   return (
     <div className={styles.stack}>
-      <Label>{intl.formatMessage({ id: "Level match status" })}</Label>
+      <Label>
+        {intl.formatMessage({
+          defaultMessage: "Level match status",
+        })}
+      </Label>
       <div className={styles.tierMatchText}>
         <SkeletonShimmer width="250px" height="24px" />
       </div>
@@ -256,7 +301,11 @@ async function TierMatchExpiration({
 
   return (
     <div className={styles.stack}>
-      <Label>{intl.formatMessage({ id: "Upgrade valid until" })}</Label>
+      <Label>
+        {intl.formatMessage({
+          defaultMessage: "Upgrade valid until",
+        })}
+      </Label>
       <Typography variant="Body/Paragraph/mdBold">
         <p>
           {matchState === "boostedBySAS"