Merged in chore/add-formatjs-linting-to-booking-flow (pull request #2761)

chore: Add formatjs linting to booking-flow * Add formatjs linting to booking-flow * Fix lock file Approved-by: Joakim Jäderberg
2025-09-04 13:52:56 +00:00
parent 55e25d6c75
commit 711589ff5e
11 changed files with 34 additions and 7 deletions
--- a/packages/booking-flow/eslint.config.mjs
+++ b/packages/booking-flow/eslint.config.mjs
@@ -6,6 +6,7 @@ import js from "@eslint/js"
 import typescriptEslint from "@typescript-eslint/eslint-plugin"
 import tsParser from "@typescript-eslint/parser"
 import { defineConfig } from "eslint/config"
+import formatjs from "eslint-plugin-formatjs"
 import simpleImportSort from "eslint-plugin-simple-import-sort"

 const compat = new FlatCompat({
@@ -21,6 +22,7 @@ export default defineConfig([
    plugins: {
      "simple-import-sort": simpleImportSort,
      "@typescript-eslint": typescriptEslint,
+      formatjs,
    },

    languageOptions: {
@@ -99,6 +101,18 @@ export default defineConfig([
        },
      ],

+      "formatjs/enforce-default-message": ["error", "literal"],
+      "formatjs/enforce-placeholders": ["error"],
+      "formatjs/enforce-plural-rules": ["error"],
+      "formatjs/no-literal-string-in-jsx": ["error"],
+      "formatjs/no-multiple-whitespaces": ["error"],
+      "formatjs/no-multiple-plurals": ["error"],
+      "formatjs/no-invalid-icu": ["error"],
+      "formatjs/no-id": ["error"],
+      "formatjs/no-complex-selectors": ["error"],
+      "formatjs/no-useless-message": ["error"],
+      "formatjs/prefer-pound-in-plural": ["error"],
+
      "@typescript-eslint/consistent-type-imports": "error",

      "@typescript-eslint/no-unused-vars": [
--- a/packages/booking-flow/lib/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/packages/booking-flow/lib/components/ErrorBoundary/ErrorBoundary.tsx
@@ -34,8 +34,10 @@ export class ErrorBoundary extends React.Component<
      return (
        <>
          {hasFallback && this.props.fallback}
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          {!hasFallback && <h2>Something went wrong.</h2>}
          {process.env.NODE_ENV === "development" && (
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <button onClick={() => this.setState({ hasError: false })}>
              Reset
            </button>
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -128,6 +128,7 @@ export default function ListingHotelCardDialog({
                    <Subtitle type="two">
                      {publicPrice} {currency}
                    </Subtitle>
+                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {memberPrice && <Caption>/</Caption>}
                  </>
                ) : (
@@ -166,7 +167,8 @@ export default function ListingHotelCardDialog({
                      }
                    )}
                    {chequePrice.additionalPricePerStay > 0
-                      ? " + " +
+                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                        " + " +
                        intl.formatMessage(
                          {
                            defaultMessage: "{price} {currency}",
@@ -178,6 +180,7 @@ export default function ListingHotelCardDialog({
                        )
                      : null}
                    <Typography variant="Body/Paragraph/mdRegular">
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
@@ -199,6 +202,7 @@ export default function ListingHotelCardDialog({
                      }
                    )}
                    <Typography variant="Body/Paragraph/mdRegular">
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
@@ -80,6 +80,7 @@ export default function FilterContent({
            isDisabled={isDisabled}
          />
          {!isDisabled && (
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <span>{`(${combinedFiltersCount > 0 ? combinedFiltersCount : filterCount})`}</span>
          )}
        </li>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
@@ -101,14 +101,13 @@ export default function SummaryContent({
            <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
            {dt(input.data?.booking.toDate)
              .locale(lang)
-              .format(longDateFormat[lang])}{" "}
-            ({nightsLabel})
+              .format(longDateFormat[lang])}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {` (${nightsLabel})`}
          </p>
        </Typography>
      </header>
-
      <Divider color="Border/Divider/Subtle" />
-
      {selectedRates.rates.map((room, idx) => {
        if (!room) {
          return null
@@ -131,7 +130,6 @@ export default function SummaryContent({
          />
        )
      })}
-
      <div>
        <div className={styles.entry}>
          <div>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -12,6 +12,7 @@ import styles from "./rateSummary.module.css"

 export function RateSummary() {
  return (
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
    <ErrorBoundary fallback={<div>Unable to render summary</div>}>
      <InnerRateSummary />
    </ErrorBoundary>
@@ -59,6 +60,7 @@ function InnerRateSummary() {
    >
      <div className={styles.summary}>
        <div className={styles.content}>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <ErrorBoundary fallback={<div>Unable to render desktop summary</div>}>
            <DesktopSummary
              isSubmitting={isSubmitting}
@@ -69,6 +71,7 @@ function InnerRateSummary() {
          </ErrorBoundary>
        </div>
        <div className={styles.mobileSummary}>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <ErrorBoundary fallback={<div>Unable to render mobile summary</div>}>
            <MobileSummary />
          </ErrorBoundary>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
@@ -14,6 +14,7 @@ import styles from "./roomsHeader.module.css"

 export function RoomsHeader({ roomIndex }: { roomIndex: number }) {
  return (
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
    <ErrorBoundary fallback={<div>Unable to render rooms header</div>}>
      <InnerRoomsHeader roomIndex={roomIndex} />
    </ErrorBoundary>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/RoomSize.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/RoomSize.tsx
@@ -23,6 +23,7 @@ export default function RoomSize({ roomSize }: RoomSizeProps) {
    return (
      <>
        <Typography variant="Body/Supporting text (caption)/smBold">
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>∙</p>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smBold">
@@ -41,6 +42,7 @@ export default function RoomSize({ roomSize }: RoomSizeProps) {
  return (
    <>
      <Typography variant="Body/Supporting text (caption)/smBold">
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <p>∙</p>
      </Typography>
      <Typography variant="Body/Supporting text (caption)/smBold">
--- a/packages/booking-flow/lib/contexts/SelectRate/DebugButton.tsx
+++ b/packages/booking-flow/lib/contexts/SelectRate/DebugButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
 import { Button } from "@scandic-hotels/design-system/Button"

 import { useSelectRateContext } from "./SelectRateContext"
@@ -33,7 +34,6 @@ export function DebugButton() {
      }}
      onClick={handleClick}
    >
-      {/* // eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
      DEBUG
    </Button>
  )
--- a/packages/booking-flow/package.json
+++ b/packages/booking-flow/package.json
@@ -105,6 +105,7 @@
    "@typescript-eslint/parser": "^8.32.0",
    "dotenv": "^16.5.0",
    "eslint": "^9",
+    "eslint-plugin-formatjs": "^5.3.1",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "typescript": "5.8.3",
--- a/yarn.lock
+++ b/yarn.lock
@@ -6060,6 +6060,7 @@ __metadata:
    dotenv: "npm:^16.5.0"
    downshift: "npm:^9.0.9"
    eslint: "npm:^9"
+    eslint-plugin-formatjs: "npm:^5.3.1"
    eslint-plugin-import: "npm:^2.31.0"
    eslint-plugin-simple-import-sort: "npm:^12.1.1"
    fast-deep-equal: "npm:^3.1.0"