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

apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx

@@ -19,7 +19,7 @@ export function SASLevelUpgradeCheck() {
           toast.success(
             intl.formatMessage(
               {
-                id: "Your SAS level has upgraded you to {level}!",
+                defaultMessage: "Your SAS level has upgraded you to {level}!",
               },
               {
                 level: TIER_TO_FRIEND_MAP[result.toLevel],

apps/scandic-web/components/MyPages/Sidebar/index.tsx

@@ -23,7 +23,9 @@ export default async function SidebarMyPages() {
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <Subtitle type="two" color="baseTextHighContrast">
-          {intl.formatMessage({ id: "My pages" })}
+          {intl.formatMessage({
+            defaultMessage: "My pages",
+          })}
         </Subtitle>
 
         <PrimaryLinks />
@@ -93,7 +95,9 @@ async function SecondaryLinks() {
             size={"small"}
             variant="sidebar"
           >
-            {intl.formatMessage({ id: "Log out" })}
+            {intl.formatMessage({
+              defaultMessage: "Log out",
+            })}
           </Link>
         </li>
       </ul>

apps/scandic-web/components/MyPages/Surprises/Card.tsx

@@ -16,7 +16,9 @@ export default function Card({ title, children }: CardProps) {
         src="/_static/img/rewards/loyalty-award.png"
         width={113}
         height={125}
-        alt={intl.formatMessage({ id: "Surprise!" })}
+        alt={intl.formatMessage({
+          defaultMessage: "Surprise!",
+        })}
       />
       <header>
         <Title textAlign="center" level="h4">

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -76,13 +76,16 @@ export default function SurprisesNotification({
         <>
           {intl.formatMessage(
             {
-              id: "{amount, plural, one {Gift} other {Gifts}} added to your benefits",
+              defaultMessage:
+                "{amount, plural, one {Gift} other {Gifts}} added to your benefits",
             },
             { amount: surprises.length }
           )}
           <br />
           <Link href={benefitPageUrl} variant="underscored" color="burgundy">
-            {intl.formatMessage({ id: "Go to My Benefits" })}
+            {intl.formatMessage({
+              defaultMessage: "Go to My Benefits",
+            })}
           </Link>
         </>
       )
@@ -93,7 +96,8 @@ export default function SurprisesNotification({
         <>
           {intl.formatMessage(
             {
-              id: "Oops! Something went wrong while showing your surprise. Please refresh the page or try again later. If the issue persists, <link>contact the support.</link>",
+              defaultMessage:
+                "Oops! Something went wrong while showing your surprise. Please refresh the page or try again later. If the issue persists, <link>contact the support.</link>",
             },
             {
               link: (str) => (
@@ -168,7 +172,9 @@ export default function SurprisesNotification({
             onAnimationComplete={confetti}
           >
             <Dialog
-              aria-label={intl.formatMessage({ id: "Surprises" })}
+              aria-label={intl.formatMessage({
+                defaultMessage: "Surprises",
+              })}
               className={styles.dialog}
             >
               {({ close }) => {
@@ -183,7 +189,9 @@ export default function SurprisesNotification({
                       {showSurprises && totalSurprises > 1 && (
                         <Caption type="label" uppercase>
                           {intl.formatMessage(
-                            { id: "{amount} out of {total}" },
+                            {
+                              defaultMessage: "{amount} out of {total}",
+                            },
                             {
                               amount: selectedSurprise + 1,
                               total: totalSurprises,

apps/scandic-web/components/MyPages/Surprises/Initial.tsx

@@ -12,13 +12,18 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
   const intl = useIntl()
 
   return (
-    <Card title={intl.formatMessage({ id: "Surprise!" })}>
+    <Card
+      title={intl.formatMessage({
+        defaultMessage: "Surprise!",
+      })}
+    >
       <Body textAlign="center">
         {totalSurprises > 1 ? (
           <>
             {intl.formatMessage(
               {
-                id: "You have <b>{amount}</b> gifts waiting for you!",
+                defaultMessage:
+                  "You have <b>{amount}</b> gifts waiting for you!",
               },
               {
                 amount: totalSurprises,
@@ -27,18 +32,18 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
             )}
             <br />
             {intl.formatMessage({
-              id: "Hurry up and use them before they expire!",
+              defaultMessage: "Hurry up and use them before they expire!",
             })}
           </>
         ) : (
           intl.formatMessage({
-            id: "We have a special gift waiting for you!",
+            defaultMessage: "We have a special gift waiting for you!",
           })
         )}
       </Body>
       <Caption>
         {intl.formatMessage({
-          id: "You'll find all your gifts in 'My benefits'",
+          defaultMessage: "You'll find all your gifts in 'My benefits'",
         })}
       </Caption>
 
@@ -52,7 +57,7 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
       >
         {intl.formatMessage(
           {
-            id: "Open {amount, plural, one {gift} other {gifts}}",
+            defaultMessage: "Open {amount, plural, one {gift} other {gifts}}",
           },
           { amount: totalSurprises }
         )}

apps/scandic-web/components/MyPages/Surprises/Navigation.tsx

@@ -30,7 +30,9 @@ export default function Navigation({
           size={20}
           className={styles.chevron}
         />
-        {intl.formatMessage({ id: "Previous" })}
+        {intl.formatMessage({
+          defaultMessage: "Previous",
+        })}
       </Button>
       <Button
         variant="icon"
@@ -39,7 +41,9 @@ export default function Navigation({
         onPress={() => showSurprise(1)}
         size="small"
       >
-        {intl.formatMessage({ id: "Next" })}
+        {intl.formatMessage({
+          defaultMessage: "Next",
+        })}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
     </nav>

apps/scandic-web/components/MyPages/myprofile/communication/communication.tsx

@@ -11,11 +11,14 @@ export default async function CommunicationSlot() {
     <section className={styles.container}>
       <article className={styles.content}>
         <Subtitle type="two" color="black">
-          {intl.formatMessage({ id: "My communication preferences" })}
+          {intl.formatMessage({
+            defaultMessage: "My communication preferences",
+          })}
         </Subtitle>
         <Body color="black">
           {intl.formatMessage({
-            id: "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
+            defaultMessage:
+              "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
           })}
         </Body>
       </article>

apps/scandic-web/components/MyPages/myprofile/creditCards/creditCards.tsx

@@ -16,11 +16,14 @@ export default async function CreditCardSlot() {
     <section className={styles.container}>
       <article className={styles.content}>
         <Subtitle type="two" color="black">
-          {intl.formatMessage({ id: "My payment cards" })}
+          {intl.formatMessage({
+            defaultMessage: "My payment cards",
+          })}
         </Subtitle>
         <Body color="black">
           {intl.formatMessage({
-            id: "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
+            defaultMessage:
+              "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
           })}
         </Body>
       </article>

apps/scandic-web/components/MyPages/myprofile/membershipCards/membershipcards.tsx

@@ -17,7 +17,9 @@ export default async function MembershipCardSlot() {
     <section className={styles.container}>
       <article className={styles.content}>
         <Subtitle color="black">
-          {intl.formatMessage({ id: "My membership cards" })}
+          {intl.formatMessage({
+            defaultMessage: "My membership cards",
+          })}
         </Subtitle>
       </article>
       {membershipCards &&
@@ -26,7 +28,9 @@ export default async function MembershipCardSlot() {
           <div className={styles.card} key={idx}>
             <Subtitle className={styles.subTitle}>
               {intl.formatMessage(
-                { id: "Name: {cardMembershipType}" },
+                {
+                  defaultMessage: "Name: {cardMembershipType}",
+                },
                 {
                   cardMembershipType: card.membershipType,
                 }
@@ -34,13 +38,17 @@ export default async function MembershipCardSlot() {
             </Subtitle>
             <span>
               {intl.formatMessage(
-                { id: "Current Points: {points, number}" },
+                {
+                  defaultMessage: "Current Points: {points, number}",
+                },
                 { points: card.currentPoints }
               )}
             </span>
             <span>
               {intl.formatMessage(
-                { id: "Member Since: {value}" },
+                {
+                  defaultMessage: "Member Since: {value}",
+                },
                 {
                   value: card.memberSince,
                 }
@@ -48,7 +56,9 @@ export default async function MembershipCardSlot() {
             </span>
             <span>
               {intl.formatMessage(
-                { id: "Number: {membershipNumber}" },
+                {
+                  defaultMessage: "Number: {membershipNumber}",
+                },
                 {
                   membershipNumber: card.membershipNumber,
                 }
@@ -56,7 +66,9 @@ export default async function MembershipCardSlot() {
             </span>
             <span>
               {intl.formatMessage(
-                { id: "Expiration Date: {expirationDate}" },
+                {
+                  defaultMessage: "Expiration Date: {expirationDate}",
+                },
                 {
                   expirationDate: card.expirationDate.split("T")[0],
                 }
@@ -67,7 +79,9 @@ export default async function MembershipCardSlot() {
       <Link href="#" variant="icon">
         <MaterialIcon icon="add_circle" color="CurrentColor" />
         <Body color="burgundy" textTransform="underlined">
-          {intl.formatMessage({ id: "Add new card" })}
+          {intl.formatMessage({
+            defaultMessage: "Add new card",
+          })}
         </Body>
       </Link>
     </section>

apps/scandic-web/components/MyPages/myprofile/profile/profile.tsx

@@ -55,7 +55,9 @@ export default async function Profile() {
   const addressOutput =
     addressParts.length > 0
       ? addressParts.join(", ")
-      : intl.formatMessage({ id: "N/A" })
+      : intl.formatMessage({
+          defaultMessage: "N/A",
+        })
 
   const userLang = isValidLang(user.language) ? user.language : Lang.en
   const localizedLanguage = displayNames.language.of(userLang)
@@ -69,7 +71,9 @@ export default async function Profile() {
         <Header>
           <div>
             <Title as="h4" color="red" level="h1" textTransform="capitalize">
-              {intl.formatMessage({ id: "Welcome" })}
+              {intl.formatMessage({
+                defaultMessage: "Welcome",
+              })}
             </Title>
             <Title
               data-hj-suppress
@@ -83,7 +87,9 @@ export default async function Profile() {
           </div>
           <Button asChild intent="primary" size="small" theme="base">
             <Link prefetch={false} color="none" href={profileEdit[lang]}>
-              {intl.formatMessage({ id: "Edit profile" })}
+              {intl.formatMessage({
+                defaultMessage: "Edit profile",
+              })}
             </Link>
           </Button>
         </Header>
@@ -95,28 +101,36 @@ export default async function Profile() {
                 color="Icon/Interactive/Default"
               />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Date of Birth" })}
+                {intl.formatMessage({
+                  defaultMessage: "Date of Birth",
+                })}
               </Body>
               <Body color="burgundy">{user.dateOfBirth}</Body>
             </div>
             <div className={styles.item}>
               <MaterialIcon icon="phone" color="Icon/Interactive/Default" />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Phone number" })}
+                {intl.formatMessage({
+                  defaultMessage: "Phone number",
+                })}
               </Body>
               <Body color="burgundy">{user.phoneNumber}</Body>
             </div>
             <div className={styles.item}>
               <MaterialIcon icon="globe" color="Icon/Interactive/Default" />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Language" })}
+                {intl.formatMessage({
+                  defaultMessage: "Language",
+                })}
               </Body>
               <Body color="burgundy">{normalizedLanguage}</Body>
             </div>
             <div className={styles.item}>
               <MaterialIcon icon="mail" color="Icon/Interactive/Default" />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Email" })}
+                {intl.formatMessage({
+                  defaultMessage: "Email",
+                })}
               </Body>
               <Body color="burgundy">{user.email}</Body>
             </div>
@@ -126,15 +140,20 @@ export default async function Profile() {
                 color="Icon/Interactive/Default"
               />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Address" })}
+                {intl.formatMessage({
+                  defaultMessage: "Address",
+                })}
               </Body>
               <Body color="burgundy">{addressOutput}</Body>
             </div>
             <div className={styles.item}>
               <MaterialIcon icon="lock" color="Icon/Interactive/Default" />
               <Body color="burgundy" textTransform="bold">
-                {intl.formatMessage({ id: "Password" })}
+                {intl.formatMessage({
+                  defaultMessage: "Password",
+                })}
               </Body>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <Body color="burgundy">**********</Body>
             </div>
           </div>