Merged in fix/booking-flow-eslint-fix (pull request #3342)

fix: Upgrade booking-flow eslint config

* Upgrade booking-flow eslint config


Approved-by: Bianca Widstam

apps/redis-api/src/routes/api/cache.ts

@@ -2,11 +2,11 @@ import * as Sentry from "@sentry/bun";
 import { Elysia, t } from "elysia";
 
 import { redis } from "@/services/redis";
+import { getAllKeys } from "@/services/redis/getAllKeys";
 import { queueDelete, queueDeleteMultiple } from "@/services/redis/queueDelete";
 import { loggerModule } from "@/utils/logger";
 import { truncate } from "@/utils/truncate";
 import { validateKey } from "@/utils/validateKey";
-import { getAllKeys } from "@/services/redis/getAllKeys";
 
 const QUERY_TYPE = t.Object({ key: t.String({}) });
 const DELETEMULTIPLE_BODY_TYPE = t.Object({

apps/redis-api/src/services/redis/getAllKeys.ts

@@ -1,7 +1,8 @@
 import { env } from "@/env";
-import { redis } from ".";
 import { timeout } from "@/utils/timeout";
 
+import { redis } from ".";
+
 /**
  * Retrieves all Redis keys that match any of the provided patterns.
  *

apps/redis-api/src/services/redis/queueDelete.ts

@@ -1,10 +1,8 @@
 import { Queue, Worker } from "bullmq";
 import z from "zod";
 
-import { env } from "@/env";
 import { sentry } from "@/server/sentry.server.config";
 import { loggerModule } from "@/utils/logger";
-import { timeout } from "@/utils/timeout";
 
 import { bullmqredis, redis } from ".";
 import { getAllKeys } from "./getAllKeys";

apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/index.tsx

@@ -70,6 +70,7 @@ export async function TopCampaign({ topCampaign }: TopCampaignProps) {
           <h2 className={styles.heading}>{heading}</h2>
         </Typography>
       ) : null}
+      {/* eslint-disable-next-line react-hooks/static-components */}
       <CampaignContent />
     </section>
   )

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx

@@ -26,7 +26,7 @@ export default function DeliveryMethodStep() {
           </Typography>
           <Select
             name="deliveryTime"
-            label={""}
+            label=""
             items={deliveryTimeOptions}
             registerOptions={{ required: true }}
             isNestedInModal

packages/booking-flow/eslint.config.mjs

@@ -1,50 +1,30 @@
-import path from "node:path"
+import { defineConfig, globalIgnores } from "eslint/config"
-import { fileURLToPath } from "node:url"
+import nextVitals from "eslint-config-next/core-web-vitals"
-
+import nextTs from "eslint-config-next/typescript"
-import { FlatCompat } from "@eslint/eslintrc"
-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({
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
-
-const packageDir = path.dirname(fileURLToPath(import.meta.url))
-
 export default defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([
+    ".next/**",
+    "node_modules/**",
+    "dist/**",
+    "build/**",
+    "coverage/**",
+    "*.config.js",
+    "*.config.ts",
+    "*.config.mjs",
+  ]),
+
   {
-    extends: compat.extends(
+    files: ["**/*.{js,jsx,ts,tsx,mts}"],
-      "next/core-web-vitals",
-      "plugin:@typescript-eslint/recommended"
-    ),
     plugins: {
       "simple-import-sort": simpleImportSort,
-      "@typescript-eslint": typescriptEslint,
       formatjs,
     },
 
-    languageOptions: {
-      parser: tsParser,
-    },
-
-    settings: {
-      // Ensure the plugin can resolve workspace packages and TS path aliases
-      "import/resolver": {
-        typescript: {
-          project: [path.join(packageDir, "tsconfig.json")],
-          alwaysTryTypes: true,
-        },
-        node: {
-          extensions: [".js", ".jsx", ".ts", ".tsx"],
-        },
-      },
-    },
-
     rules: {
       "no-console": "warn",
       "no-unused-vars": "off",
@@ -57,15 +37,8 @@ export default defineConfig([
           propElementValues: "always",
         },
       ],
+      "react-hooks/incompatible-library": "off",
       "import/no-relative-packages": "error",
-      "import/no-extraneous-dependencies": [
-        "warn",
-        {
-          includeInternal: true,
-          includeTypes: true,
-          packageDir: [packageDir],
-        },
-      ],
       "simple-import-sort/imports": [
         "warn",
         {
@@ -113,19 +86,9 @@ 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/enforce-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-empty-object-type": "off",
+      "@typescript-eslint/no-require-imports": "off",
 
       "@typescript-eslint/no-unused-vars": [
         "error",
@@ -141,6 +104,18 @@ export default defineConfig([
       ],
 
       "@next/next/no-html-link-for-pages": "off",
+
+      "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/enforce-id": ["error"],
+      "formatjs/no-complex-selectors": ["error"],
+      "formatjs/no-useless-message": ["error"],
+      "formatjs/prefer-pound-in-plural": ["error"],
     },
   },
 ])

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -30,6 +30,7 @@ export default function MemberPriceModal() {
 
   useEffect(() => {
     if (join) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsOpen(true)
     }
   }, [join])

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx

@@ -49,6 +49,7 @@ export default function Signup({
       <div className={styles.additionalFormData}>
         <div
           ref={(el) => {
+            // eslint-disable-next-line react-hooks/immutability
             refs.current.zipCode = el
           }}
         >
@@ -64,6 +65,7 @@ export default function Signup({
         <div
           className={styles.dateField}
           ref={(el) => {
+            // eslint-disable-next-line react-hooks/immutability
             refs.current.dateOfBirth = el
           }}
         >
@@ -110,6 +112,7 @@ export default function Signup({
   return (
     <div
       ref={(el) => {
+        // eslint-disable-next-line react-hooks/immutability
         refs.current.membershipNo = el
       }}
     >

packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/index.tsx

@@ -40,6 +40,7 @@ function useBookingErrorAlert() {
   const selectRateReturnUrl = getSelectRateReturnUrl()
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setShowAlert(!!errorCode)
   }, [errorCode])
 

packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx

@@ -147,6 +147,7 @@ export default function PaymentClient({
         if (booking.reservationStatus == BookingStatusEnum.BookingCompleted) {
           clearBookingWidgetState()
           // Cookie is used by Booking Confirmation page to validate that the user came from payment callback
+          // eslint-disable-next-line react-hooks/immutability
           document.cookie = `bcsig=${result.sig}; Path=/; Max-Age=60; Secure; SameSite=Strict`
           const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${encodeURIComponent(mainRoom.refId)}`
           router.push(confirmationUrl)

packages/booking-flow/lib/components/EnterDetails/Section/index.tsx

@@ -44,6 +44,7 @@ export default function Section({
 
   useEffect(() => {
     if (step === EnterDetailsStepEnum.selectBed && bedType) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setTitle(bedType.description)
     }
     // If breakfast step, check if an option has been selected

packages/booking-flow/lib/components/MapContainer/index.tsx

@@ -66,6 +66,7 @@ export function MapContainer({ children }: { children: React.ReactNode }) {
 
     if (scrollHeightWhenOpened === 0) {
       const scrollY = window.scrollY
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setScrollHeightWhenOpened(scrollY)
       window.scrollTo({ top: 0, behavior: "instant" })
     }

packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -67,6 +67,7 @@ export default function FilterAndSortModal({
 
   useEffect(() => {
     if (activeFilters.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSelectedFilters(activeFilters)
     }
   }, [activeFilters])

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -64,6 +64,7 @@ export default function FilterContent({
       selectedFilters[0] || []
     )
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setFilteredHotelIds(filteredIds)
   }, [filters, activeFilters, setFilteredHotelIds, showOnlyBookingCodeRates])
 

packages/booking-flow/lib/contexts/EnterDetails/EnterDetailsContext.tsx

@@ -66,6 +66,7 @@ export default function EnterDetailsProvider({
   const [hasInitializedStore, setHasInitializedStore] = useState(false)
   const storeRef = useRef<EnterDetailsStore>(undefined)
   const pointsCurrency = useGetPointsCurrency()
+  // eslint-disable-next-line react-hooks/refs
   if (!storeRef.current) {
     const initialData: InitialState = {
       booking,
@@ -242,6 +243,7 @@ export default function EnterDetailsProvider({
   }, [booking, rooms, user])
 
   return (
+    // eslint-disable-next-line react-hooks/refs
     <EnterDetailsContext.Provider value={storeRef.current}>
       {hasInitializedStore ? children : <LoadingSpinner fullPage />}
     </EnterDetailsContext.Provider>

packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx

@@ -427,6 +427,7 @@ export function SelectRateProvider({
               return
             }
 
+            // eslint-disable-next-line react-hooks/immutability
             updatedRoom.packages = packages
             updateBooking(selectRateBooking)
             setActiveRoomIndex(roomIndex)
@@ -448,6 +449,7 @@ export function SelectRateProvider({
               return
             }
 
+            // eslint-disable-next-line react-hooks/immutability
             updatedRoom.rateCode = rateCode
             updatedRoom.roomTypeCode = roomTypeCode
             updatedRoom.counterRateCode = counterRateCode || null

packages/booking-flow/lib/hooks/useAvailablePaymentOptions.ts

@@ -17,6 +17,7 @@ export function useAvailablePaymentOptions(
 
   useEffect(() => {
     if (window.ApplePaySession) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setAvailablePaymentOptions(otherPaymentOptions)
     }
   }, [otherPaymentOptions, setAvailablePaymentOptions])

packages/booking-flow/lib/hooks/useBookingWidgetState.ts

@@ -51,6 +51,7 @@ export function useBookingWidgetState() {
       storedTo.isAfter(storedFrom)
 
     if (isDateParamValid && stored.rooms?.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setBookingState({
         fromDate: storedFrom.format("YYYY-MM-DD"),
         toDate: storedTo.format("YYYY-MM-DD"),

packages/booking-flow/lib/hooks/useHandleBookingStatus.ts

@@ -57,6 +57,7 @@ export function useHandleBookingStatus({
 
   return {
     ...query,
+    // eslint-disable-next-line react-hooks/refs
     isTimeout: retries.current >= maxRetries,
   }
 }

packages/booking-flow/lib/pages/BookingConfirmationPage.tsx

@@ -38,6 +38,7 @@ export async function BookingConfirmationPage({
   }
 
   const expire = Number(decrypt(sig))
+  // eslint-disable-next-line react-hooks/purity
   const now = Math.floor(Date.now() / 1000)
   if (typeof expire === "number" && !isNaN(expire) && now > expire) {
     redirect(`/${lang}`)

packages/booking-flow/lib/pages/PaymentCallbackPage.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation"
 
 import { PaymentCallbackStatusEnum } from "@scandic-hotels/common/constants/paymentCallbackStatusEnum"
+import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import {
   bookingConfirmation,
   details,
@@ -17,10 +18,9 @@ import { HandleSuccessCallback } from "../components/EnterDetails/Payment/Paymen
 import { serverClient } from "../trpc"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { CreateBookingSchema } from "@scandic-hotels/trpc/routers/booking/mutation/create/schema"
 
 import type { NextSearchParams } from "../types"
-import { CreateBookingSchema } from "@scandic-hotels/trpc/routers/booking/mutation/create/schema"
-import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 
 type PaymentCallbackPageProps = {
   lang: Lang
@@ -118,6 +118,7 @@ export async function PaymentCallbackPage({
       await caller.booking.validatePartnerPayment({ confirmationNumber })
     }
 
+    // eslint-disable-next-line react-hooks/purity
     const expire = Math.floor(Date.now() / 1000) + 60
     const sig = encrypt(expire.toString())
     const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${encodeURIComponent(refId)}`

packages/booking-flow/lib/pages/SelectRatePage.tsx

@@ -49,6 +49,7 @@ export async function SelectRatePage({
   // If someone tries to update the url with
   // a bookingCode also, then we need to remove it
   if (isRedemption && searchParams.bookingCode) {
+    // eslint-disable-next-line react-hooks/immutability
     delete searchParams.bookingCode
   }
 

packages/booking-flow/lib/providers/BookingConfirmationProvider.tsx

@@ -26,6 +26,7 @@ export function BookingConfirmationProvider({
   const intl = useIntl()
   const storeRef = useRef<BookingConfirmationStore>(undefined)
 
+  // eslint-disable-next-line react-hooks/refs
   if (!storeRef.current) {
     const totalBookingPrice = rooms.reduce((acc, room) => {
       const reservationTotalPrice = room?.totalPrice || 0
@@ -105,6 +106,7 @@ export function BookingConfirmationProvider({
   }
 
   return (
+    // eslint-disable-next-line react-hooks/refs
     <BookingConfirmationContext.Provider value={storeRef.current}>
       {children}
     </BookingConfirmationContext.Provider>