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

2025-02-07 06:51:36 +01:00
parent e22fc1f3c8
commit 440e1f92df
393 changed files with 4839 additions and 1554 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
@@ -24,7 +24,11 @@ export default async function Footer({ booking, room }: FooterProps) {
      <div>
        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Reference number" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Reference number",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{booking.confirmationNumber}</dd>
@@ -33,7 +37,11 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Room" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Room",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{room?.name}</dd>
@@ -42,7 +50,11 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Rate" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Rate",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{booking.rateDefinition.title}</dd>
@@ -51,7 +63,11 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Check-in" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Check-in",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
@@ -62,7 +78,11 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Check-out" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Check-out",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
@@ -75,7 +95,11 @@ export default async function Footer({ booking, room }: FooterProps) {
      <div className={styles.rightColumn}>
        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Number of nights" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Number of nights",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
@@ -86,12 +110,19 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Number of guests" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Number of guests",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {intl.formatMessage(
-                { id: "{adults, plural, one {# adult} other {# adults}}" },
+                {
+                  defaultMessage:
+                    "{adults, plural, one {# adult} other {# adults}}",
+                },
                { adults: booking.adults }
              )}
              {booking.childrenAges.length > 0 && (
@@ -99,7 +130,8 @@ export default async function Footer({ booking, room }: FooterProps) {
                  {", "}
                  {intl.formatMessage(
                    {
-                      id: "{children, plural, one {# child} other {# children}}",
+                      defaultMessage:
+                        "{children, plural, one {# child} other {# children}}",
                    },
                    { children: booking.childrenAges.length }
                  )}
@@ -111,7 +143,11 @@ export default async function Footer({ booking, room }: FooterProps) {

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Bed type" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Bed type",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>{room?.bedType.mainBed.description}</dd>
@@ -121,23 +157,39 @@ export default async function Footer({ booking, room }: FooterProps) {
        {petRoomPackage && (
          <div>
            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <dt>{intl.formatMessage({ id: "Room classification" })}</dt>
+              <dt>
+                {intl.formatMessage({
+                  defaultMessage: "Room classification",
+                })}
+              </dt>
            </Typography>
            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <dd>{intl.formatMessage({ id: "Pet-friendly" })}</dd>
+              <dd>
+                {intl.formatMessage({
+                  defaultMessage: "Pet-friendly",
+                })}
+              </dd>
            </Typography>
          </div>
        )}

        <div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Breakfast" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Breakfast",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
              {booking.rateDefinition.breakfastIncluded
-                ? intl.formatMessage({ id: "Included" })
-                : intl.formatMessage({ id: "Not included" })}
+                ? intl.formatMessage({
+                    defaultMessage: "Included",
+                  })
+                : intl.formatMessage({
+                    defaultMessage: "Not included",
+                  })}
            </dd>
          </Typography>
        </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx
@@ -40,7 +40,9 @@ export default async function Specification({
      : ""
  const breakfastPointsString =
    breakfastTotalPriceInPoints > 0
-      ? `${breakfastTotalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
+      ? `${breakfastTotalPriceInPoints} ${intl.formatMessage({
+          defaultMessage: "Points",
+        })}`
      : ""
  const breakfastPlusString =
    breakfastMoneyString && breakfastPointsString ? " + " : ""
@@ -59,23 +61,36 @@ export default async function Specification({
        {/****** The room ********/}
        <Typography variant="Body/Supporting text (caption)/smBold">
          <span>
-            {intl.formatMessage({ id: "Accommodation" })}
+            {intl.formatMessage({
+              defaultMessage: "Accommodation",
+            })}
            {!booking.rateDefinition.mustBeGuaranteed && (
              <>
                {" - "}
-                {intl.formatMessage({ id: "Room is prepaid" })}
+                {intl.formatMessage({
+                  defaultMessage: "Room is prepaid",
+                })}
              </>
            )}
          </span>
        </Typography>
        <dl className={styles.dl}>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dt>{intl.formatMessage({ id: "Price including VAT" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Price including VAT",
+              })}
+            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dd>
-              {!booking.rateDefinition.mustBeGuaranteed &&
-                `(${intl.formatMessage({ id: "PREPAID" })}) `}
+              {!booking.rateDefinition.mustBeGuaranteed
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  `(${intl.formatMessage({
+                    defaultMessage: "PREPAID",
+                  })}) `
+                : null}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {`${booking.roomPrice} ${currency}`}
            </dd>
          </Typography>
@@ -84,10 +99,13 @@ export default async function Specification({
            <>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <dt>
-                  {intl.formatMessage({ id: "Pet room charge including VAT" })}
+                  {intl.formatMessage({
+                    defaultMessage: "Pet room charge including VAT",
+                  })}
                </dt>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <dd>{`${petRoomPackage.totalPrice} ${petRoomPackage.currency}`}</dd>
              </Typography>
            </>
@@ -95,24 +113,32 @@ export default async function Specification({

          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt className={styles.tertiary}>
-              {intl.formatMessage({ id: "Price excluding VAT" })}
+              {intl.formatMessage({
+                defaultMessage: "Price excluding VAT",
+              })}
            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dd
-              className={styles.tertiary}
-            >{`${roomPriceExclVat.toFixed(2)} ${currency}`}</dd>
+            <dd className={styles.tertiary}>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${roomPriceExclVat.toFixed(2)} ${currency}`}
+            </dd>
          </Typography>

          <Typography variant="Body/Supporting text (caption)/smRegular">
            <dt className={styles.tertiary}>
-              {intl.formatMessage({ id: "VAT" })} {booking.vatPercentage} %
+              {intl.formatMessage({
+                defaultMessage: "VAT",
+              })}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {` ${booking.vatPercentage} %`}
            </dt>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <dd
-              className={styles.tertiary}
-            >{`${roomPriceVat.toFixed(2)} ${currency}`}</dd>
+            <dd className={styles.tertiary}>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${roomPriceVat.toFixed(2)} ${currency}`}
+            </dd>
          </Typography>
        </dl>
      </div>
@@ -131,11 +157,17 @@ export default async function Specification({
                        aa.id === ancillary.code ||
                        aa.loyaltyCode === ancillary.code
                    )
-                  )[0]?.title ?? intl.formatMessage({ id: "Unknown item" })}
+                  )[0]?.title ??
+                    intl.formatMessage({
+                      defaultMessage: "Unknown item",
+                    })}
                </span>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smBold">
-                <span>{`x ${ancillary.unit}`}</span>
+                <span>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`× ${ancillary.unit}`}
+                </span>
              </Typography>
            </div>

@@ -143,12 +175,19 @@ export default async function Specification({
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <dt>
                  {ancillary.currency !== CurrencyEnum.POINTS
-                    ? intl.formatMessage({ id: "Price including VAT" })
-                    : intl.formatMessage({ id: "Price" })}
+                    ? intl.formatMessage({
+                        defaultMessage: "Price including VAT",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "Price",
+                      })}
                </dt>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <dd>{`${ancillary.totalPrice} ${ancillary.currency}`}</dd>
+                <dd>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${ancillary.totalPrice} ${ancillary.currency}`}
+                </dd>
              </Typography>
            </dl>
          </div>
@@ -162,10 +201,15 @@ export default async function Specification({
          <div>
            <div className={styles.quantifyingHeader}>
              <Typography variant="Body/Supporting text (caption)/smBold">
-                <span>{intl.formatMessage({ id: "Breakfast" })}</span>
+                <span>
+                  {intl.formatMessage({
+                    defaultMessage: "Breakfast",
+                  })}
+                </span>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smBold">
-                <span>{`x ${breakfastCount}`}</span>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <span>{`× ${breakfastCount}`}</span>
              </Typography>
            </div>

@@ -173,12 +217,19 @@ export default async function Specification({
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <dt>
                  {breakfastTotalPriceInMoney > 0
-                    ? intl.formatMessage({ id: "Price including VAT" })
-                    : intl.formatMessage({ id: "Price" })}
+                    ? intl.formatMessage({
+                        defaultMessage: "Price including VAT",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "Price",
+                      })}
                </dt>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <dd>{`${breakfastMoneyString}${breakfastPlusString}${breakfastPointsString}`}</dd>
+                <dd>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${breakfastMoneyString}${breakfastPlusString}${breakfastPointsString}`}
+                </dd>
              </Typography>
            </dl>
          </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx
@@ -22,7 +22,9 @@ export default async function Total({ booking, currency }: TotalProps) {
    totalPriceInMoney > 0 ? `${totalPriceInMoney} ${currency}` : ""
  const pointsString =
    totalPriceInPoints > 0
-      ? `${totalPriceInPoints} ${intl.formatMessage({ id: "Points" })}`
+      ? `${totalPriceInPoints} ${intl.formatMessage({
+          defaultMessage: "Points",
+        })}`
      : ""
  const plusString = moneyString && pointsString ? " + " : ""

@@ -33,11 +35,14 @@ export default async function Total({ booking, currency }: TotalProps) {
        <Typography>
          <div>
            <span className={styles.title}>
-              {intl.formatMessage({ id: "Preliminary receipt" })}
+              {intl.formatMessage({
+                defaultMessage: "Preliminary receipt",
+              })}
            </span>
            <span className={styles.titleSubtext}>
              {intl.formatMessage({
-                id: "Final VAT breakdown will be provided at check-out.",
+                defaultMessage:
+                  "Final VAT breakdown will be provided at check-out.",
              })}
            </span>
          </div>
@@ -46,9 +51,14 @@ export default async function Total({ booking, currency }: TotalProps) {
        <Divider color="subtle" />
        <dl className={styles.dl}>
          <Typography>
-            <dt>{intl.formatMessage({ id: "Total including VAT" })}</dt>
+            <dt>
+              {intl.formatMessage({
+                defaultMessage: "Total including VAT",
+              })}
+            </dt>
          </Typography>
          <Typography>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <dd>{`${moneyString}${plusString}${pointsString}`}</dd>
          </Typography>

@@ -56,13 +66,16 @@ export default async function Total({ booking, currency }: TotalProps) {
            <>
              <Typography>
                <dt className={styles.tertiary}>
-                  {intl.formatMessage({ id: "Total excluding VAT" })}
+                  {intl.formatMessage({
+                    defaultMessage: "Total excluding VAT",
+                  })}
                </dt>
              </Typography>
              <Typography>
-                <dd
-                  className={styles.tertiary}
-                >{`${totalPriceInMoneyExclVat} ${currency}`}</dd>
+                <dd className={styles.tertiary}>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${totalPriceInMoneyExclVat} ${currency}`}
+                </dd>
              </Typography>
            </>
          )}
@@ -71,11 +84,16 @@ export default async function Total({ booking, currency }: TotalProps) {
            <>
              <Typography>
                <dt className={styles.tertiary}>
-                  {intl.formatMessage({ id: "VAT" })}
+                  {intl.formatMessage({
+                    defaultMessage: "VAT",
+                  })}
                </dt>
              </Typography>
              <Typography>
-                <dd className={styles.tertiary}>{`${totalVat} ${currency}`}</dd>
+                <dd className={styles.tertiary}>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${totalVat} ${currency}`}
+                </dd>
              </Typography>
            </>
          )}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
@@ -72,6 +72,7 @@ export async function Receipt({ refId }: { refId: string }) {
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
                </div>
              </Typography>
@@ -88,11 +89,15 @@ export async function Receipt({ refId }: { refId: string }) {
            </div>
            <div className={styles.rightColumn}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
              </Typography>
              {booking.guest.membershipNumber && (
                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <div>{`${intl.formatMessage({ id: "Member" })} ${booking.guest.membershipNumber}`}</div>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <div>{`${intl.formatMessage({
+                    defaultMessage: "Member",
+                  })} ${booking.guest.membershipNumber}`}</div>
                </Typography>
              )}
              <Typography variant="Body/Supporting text (caption)/smRegular">
@@ -142,14 +147,15 @@ export async function Receipt({ refId }: { refId: string }) {
          <Typography variant="Title/md">
            <h1>
              {intl.formatMessage({
-                id: "You need to be logged in to view your booking",
+                defaultMessage: "You need to be logged in to view your booking",
              })}
            </h1>
          </Typography>
          <Typography variant="Body/Lead text">
            <p>
              {intl.formatMessage({
-                id: "And you need to be logged in with the same member account that made the booking.",
+                defaultMessage:
+                  "And you need to be logged in with the same member account that made the booking.",
              })}
            </p>
          </Typography>