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

apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx

@@ -17,14 +17,16 @@ export default function HotelChequeCard({
   return (
     <div className={styles.chequeCard}>
       <div className={styles.chequeRow}>
-        <Caption>{intl.formatMessage({ id: "From" })}</Caption>
+        <Caption>
+          {intl.formatMessage({
+            defaultMessage: "From",
+          })}
+        </Caption>
         <div className={styles.cheque}>
           <Subtitle type="two" color="uiTextHighContrast">
             {productTypeCheque.localPrice.numberOfCheques}
           </Subtitle>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
-            {CurrencyEnum.CC}
-          </Caption>
+          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
           {productTypeCheque.localPrice.additionalPricePerStay && (
             <>
               {"+"}
@@ -41,15 +43,18 @@ export default function HotelChequeCard({
       {productTypeCheque.requestedPrice ? (
         <div className={styles.chequeRow}>
           <Caption color="uiTextMediumContrast">
-            {intl.formatMessage({ id: "Approx." })}
+            {intl.formatMessage({
+              defaultMessage: "Approx.",
+            })}
           </Caption>
           <Caption color={"uiTextMediumContrast"}>
             {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
             {productTypeCheque.requestedPrice.additionalPricePerStay
-              ? " + "
+              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                " + "
               : ""}
-            {productTypeCheque.requestedPrice.additionalPricePerStay}{" "}
-            {productTypeCheque.requestedPrice.currency}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
           </Caption>
         </div>
       ) : null}

apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx

@@ -20,11 +20,13 @@ export default function HotelPointsRow({
         {pointsPerStay}
       </Subtitle>
       <Caption color="uiTextHighContrast">
-        {intl.formatMessage({ id: "Points" })}
+        {intl.formatMessage({
+          defaultMessage: "Points",
+        })}
       </Caption>
       {additionalPricePerStay ? (
         <>
-          +
+          {"+"}
           <Subtitle type="two" color="uiTextHighContrast">
             {additionalPricePerStay}
           </Subtitle>

apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx

@@ -26,7 +26,9 @@ export default function HotelPriceCard({
           <div className={styles.priceRow}>
             <dt>
               <Caption color="red">
-                {intl.formatMessage({ id: "Member price" })}
+                {intl.formatMessage({
+                  defaultMessage: "Member price",
+                })}
               </Caption>
             </dt>
           </div>
@@ -34,7 +36,9 @@ export default function HotelPriceCard({
           <div className={styles.priceRow}>
             <dt>
               <Caption color="uiTextHighContrast">
-                {intl.formatMessage({ id: "Standard price" })}
+                {intl.formatMessage({
+                  defaultMessage: "Standard price",
+                })}
               </Caption>
             </dt>
           </div>
@@ -45,7 +49,9 @@ export default function HotelPriceCard({
             type="bold"
             color={isMemberPrice ? "red" : "uiTextHighContrast"}
           >
-            {intl.formatMessage({ id: "From" })}
+            {intl.formatMessage({
+              defaultMessage: "From",
+            })}
           </Caption>
         </dt>
         <dd>
@@ -61,8 +67,12 @@ export default function HotelPriceCard({
               textTransform="bold"
             >
               {productTypePrices.localPrice.currency}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <span className={styles.perNight}>
-                /{intl.formatMessage({ id: "night" })}
+                /
+                {intl.formatMessage({
+                  defaultMessage: "night",
+                })}
               </span>
             </Body>
           </div>
@@ -72,12 +82,15 @@ export default function HotelPriceCard({
         <div className={styles.priceRow}>
           <dt>
             <Caption color="uiTextMediumContrast">
-              {intl.formatMessage({ id: "Approx." })}
+              {intl.formatMessage({
+                defaultMessage: "Approx.",
+              })}
             </Caption>
           </dt>
           <dd>
             <Caption color={"uiTextMediumContrast"}>
-              {productTypePrices.requestedPrice.pricePerNight}{" "}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypePrices.requestedPrice.pricePerNight} `}
               {productTypePrices.requestedPrice.currency}
             </Caption>
           </dd>
@@ -92,12 +105,15 @@ export default function HotelPriceCard({
             <div className={styles.priceRow}>
               <dt>
                 <Caption color="uiTextMediumContrast">
-                  {intl.formatMessage({ id: "Total" })}
+                  {intl.formatMessage({
+                    defaultMessage: "Total",
+                  })}
                 </Caption>
               </dt>
               <dd>
                 <Caption color={"uiTextMediumContrast"}>
-                  {productTypePrices.localPrice.pricePerStay}{" "}
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${productTypePrices.localPrice.pricePerStay} `}
                   {productTypePrices.localPrice.currency}
                 </Caption>
               </dd>

apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx

@@ -17,7 +17,11 @@ export default function HotelVoucherCard({
   return (
     <div className={styles.voucherCard}>
       <div className={styles.voucherRow}>
-        <Caption>{intl.formatMessage({ id: "From" })}</Caption>
+        <Caption>
+          {intl.formatMessage({
+            defaultMessage: "From",
+          })}
+        </Caption>
         <div className={styles.voucher}>
           <Subtitle type="two" color="uiTextHighContrast">
             {productTypeVoucher.numberOfVouchers}

apps/scandic-web/components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx

@@ -16,7 +16,8 @@ export default function NoPriceAvailableCard() {
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage({
-            id: "There are no rooms available that match your request.",
+            defaultMessage:
+              "There are no rooms available that match your request.",
           })}
         </Caption>
       </div>

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -88,7 +88,9 @@ function HotelCard({
   const hasInsufficientPoints = !price?.redemptions?.some(
     (r) => r.hasEnoughPoints
   )
-  const notEnoughPointsLabel = intl.formatMessage({ id: "Not enough points" })
+  const notEnoughPointsLabel = intl.formatMessage({
+    defaultMessage: "Not enough points",
+  })
 
   return (
     <article
@@ -129,7 +131,7 @@ function HotelCard({
                     href={selectHotelMap(lang)}
                     keepSearchParams
                     aria-label={intl.formatMessage({
-                      id: "See on map",
+                      defaultMessage: "See on map",
                     })}
                   >
                     <Typography variant="Body/Supporting text (caption)/smRegular">
@@ -144,7 +146,9 @@ function HotelCard({
               </div>
               <Caption color="uiTextPlaceholder">
                 {intl.formatMessage(
-                  { id: "{number} km to city center" },
+                  {
+                    defaultMessage: "{number} km to city center",
+                  },
                   {
                     number: getSingleDecimal(
                       hotel.location.distanceToCentre / 1000
@@ -173,7 +177,9 @@ function HotelCard({
             })}
           </div>
           <ReadMore
-            label={intl.formatMessage({ id: "See hotel details" })}
+            label={intl.formatMessage({
+              defaultMessage: "See hotel details",
+            })}
             hotelId={hotel.operaId}
             hotel={hotel}
             showCTA={true}
@@ -192,7 +198,10 @@ function HotelCard({
                       icon={<DiscountIcon color="Icon/Feedback/Information" />}
                     >
                       {intl.formatMessage(
-                        { id: "<strong>Booking code</strong>: {value}" },
+                        {
+                          defaultMessage:
+                            "<strong>Booking code</strong>: {value}",
+                        },
                         {
                           value: bookingCode,
                           strong: (text) => (
@@ -227,7 +236,9 @@ function HotelCard({
               {price?.redemptions?.length ? (
                 <div className={styles.pointsCard}>
                   <Caption>
-                    {intl.formatMessage({ id: "Available rates" })}
+                    {intl.formatMessage({
+                      defaultMessage: "Available rates",
+                    })}
                   </Caption>
                   {price.redemptions.map((redemption) => (
                     <HotelPointsRow
@@ -272,7 +283,9 @@ function HotelCard({
                     color="none"
                     keepSearchParams
                   >
-                    {intl.formatMessage({ id: "See rooms" })}
+                    {intl.formatMessage({
+                      defaultMessage: "See rooms",
+                    })}
                   </Link>
                 </Button>
               )}