From be25be7bb513edd029df7020c19295290110b27f Mon Sep 17 00:00:00 2001 From: Anton Gunnarsson Date: Tue, 1 Jul 2025 12:41:28 +0000 Subject: [PATCH] Merged in feat/sw-3125-move-client-trpc-setup (pull request #2493) feat(SW-3125): Move client trpc setup * Move client trpc to package * Client setup in partner-sas * Add todo Approved-by: Linus Flood --- apps/partner-sas/app/ClientComponent.tsx | 20 ++++ .../app/api/web/trpc/[trpc]/route.ts | 16 +++ apps/partner-sas/app/globals.css | 1 - apps/partner-sas/app/layout.tsx | 7 +- apps/partner-sas/app/page.module.css | 3 - apps/partner-sas/app/page.tsx | 5 + apps/partner-sas/package.json | 1 + .../sas-x-scandic/otp/OneTimePasswordForm.tsx | 3 +- .../EarnAndBurn/JourneyTable/Client.tsx | 2 +- .../Rewards/CurrentRewards/Client.tsx | 2 +- .../DynamicContent/Rewards/Redeem/index.tsx | 3 +- .../Rewards/Redeem/useRedeemFlow.ts | 2 +- .../DynamicContent/Stays/Previous/Client.tsx | 2 +- .../DynamicContent/Stays/Upcoming/Client.tsx | 2 +- .../components/BookingWidget/Client.tsx | 2 +- .../Current/Header/LanguageSwitcher/index.tsx | 2 +- .../FormContent/Search/SearchList/index.tsx | 3 +- .../components/Forms/Edit/Profile/index.tsx | 2 +- .../components/Forms/Signup/index.tsx | 2 +- .../MainMenu/MyPagesMenuContent/index.tsx | 2 +- .../MainMenu/MyPagesMenuWrapper/index.tsx | 3 +- .../Rooms/LinkedReservation/index.tsx | 2 +- .../EnterDetails/Payment/PaymentClient.tsx | 2 +- .../HotelReservation/FindMyBooking/index.tsx | 2 +- .../AddAncillaryFlowModal/index.tsx | 2 +- .../AddedAncillaries/RemoveButton.tsx | 3 +- .../Ancillaries/GuaranteeCallback/index.tsx | 2 +- .../MyStay/GuestDetails/index.tsx | 2 +- .../Steps/FinalConfirmation/index.tsx | 2 +- .../ChangeDates/Steps/Confirmation/index.tsx | 2 +- .../Actions/ChangeDates/Steps/index.tsx | 2 +- .../RoomsHeader/BookingCodeFilter/index.tsx | 2 +- .../RoomPackageFilter/Form/index.tsx | 2 +- .../RoomsHeader/RoomPackageFilter/index.tsx | 2 +- .../SelectRate/RoomsContainer/index.tsx | 3 +- .../HotelReservation/SidePeek/index.tsx | 3 +- .../components/LanguageSwitcher/index.tsx | 2 +- .../MyPages/SASLevelUpgradeCheck.tsx | 2 +- .../components/MyPages/Surprises/Client.tsx | 2 +- .../Profile/AddCreditCardButton/index.tsx | 3 +- .../Profile/CreditCardList/index.tsx | 2 +- .../Profile/DeleteCreditCardConfirmation.tsx | 3 +- .../Profile/ManagePreferencesButton/index.tsx | 3 +- .../components/SitewideAlert/index.tsx | 2 +- .../components/TrackingSDK/hooks.ts | 3 +- .../hooks/booking/useGuaranteeBooking.ts | 3 +- .../hooks/booking/useHandleBookingStatus.ts | 2 +- apps/scandic-web/lib/trpc/Provider.tsx | 108 ++++-------------- apps/scandic-web/lib/trpc/client.ts | 9 -- apps/scandic-web/providers/MyStay.tsx | 3 +- .../actions/addToCalendar.ts | 3 +- apps/scandic-web/types/user.ts | 2 +- packages/trpc/env/client.ts | 21 ++++ packages/trpc/lib/Provider.tsx | 92 +++++++++++++++ packages/trpc/lib/client.ts | 9 ++ packages/trpc/package.json | 4 + yarn.lock | 5 +- 57 files changed, 247 insertions(+), 154 deletions(-) create mode 100644 apps/partner-sas/app/ClientComponent.tsx create mode 100644 apps/partner-sas/app/api/web/trpc/[trpc]/route.ts delete mode 100644 apps/scandic-web/lib/trpc/client.ts create mode 100644 packages/trpc/env/client.ts create mode 100644 packages/trpc/lib/Provider.tsx create mode 100644 packages/trpc/lib/client.ts diff --git a/apps/partner-sas/app/ClientComponent.tsx b/apps/partner-sas/app/ClientComponent.tsx new file mode 100644 index 000000000..fccfcefb5 --- /dev/null +++ b/apps/partner-sas/app/ClientComponent.tsx @@ -0,0 +1,20 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +"use client" +import { Lang } from "@scandic-hotels/common/constants/language" +import { trpc } from "@scandic-hotels/trpc/client" + +export function ClientComponent() { + const { data, isLoading } = trpc.autocomplete.destinations.useQuery({ + lang: Lang.en, + includeTypes: ["hotels"], + query: "Malmö", + }) + + return ( +
+

client component

+

Data: {JSON.stringify(data?.hits?.hotels[0]?.name)}

+

Is loading: {isLoading ? "Yes" : "No"}

+
+ ) +} diff --git a/apps/partner-sas/app/api/web/trpc/[trpc]/route.ts b/apps/partner-sas/app/api/web/trpc/[trpc]/route.ts new file mode 100644 index 000000000..a54b2c7fb --- /dev/null +++ b/apps/partner-sas/app/api/web/trpc/[trpc]/route.ts @@ -0,0 +1,16 @@ +import { fetchRequestHandler } from "@trpc/server/adapters/fetch" + +import { appRouter } from "@scandic-hotels/trpc/routers/appRouter" + +import { createAppContext } from "@/lib/trpc" + +async function handler(req: Request) { + return fetchRequestHandler({ + createContext: createAppContext, + endpoint: "/api/web/trpc", + req, + router: appRouter, + }) +} + +export { handler as GET, handler as POST } diff --git a/apps/partner-sas/app/globals.css b/apps/partner-sas/app/globals.css index a5ff62d3a..25fa51c5a 100644 --- a/apps/partner-sas/app/globals.css +++ b/apps/partner-sas/app/globals.css @@ -1,3 +1,2 @@ body { - background: rebeccapurple; } diff --git a/apps/partner-sas/app/layout.tsx b/apps/partner-sas/app/layout.tsx index 24742f1a8..2e063d029 100644 --- a/apps/partner-sas/app/layout.tsx +++ b/apps/partner-sas/app/layout.tsx @@ -3,6 +3,8 @@ import "@scandic-hotels/design-system/fonts.css" import "@/public/_static/css/design-system-new-deprecated.css" import "./globals.css" +import { TrpcProvider } from "@scandic-hotels/trpc/Provider" + import type { Metadata } from "next" export const metadata: Metadata = { @@ -23,7 +25,10 @@ export default function RootLayout({ {/* eslint-disable-next-line @next/next/no-css-tags */} - {children} + + {/* TODO handle onError */} + {children} + ) } diff --git a/apps/partner-sas/app/page.module.css b/apps/partner-sas/app/page.module.css index 3c9fdc513..0c38093bf 100644 --- a/apps/partner-sas/app/page.module.css +++ b/apps/partner-sas/app/page.module.css @@ -1,7 +1,4 @@ .page { - color: white; - width: 500px; - height: 500px; padding-left: 200px; padding-top: 200px; } diff --git a/apps/partner-sas/app/page.tsx b/apps/partner-sas/app/page.tsx index bd023bea4..bb4743d49 100644 --- a/apps/partner-sas/app/page.tsx +++ b/apps/partner-sas/app/page.tsx @@ -4,6 +4,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { serverClient } from "@/lib/trpc" +import { ClientComponent } from "./ClientComponent" + import styles from "./page.module.css" export default async function Home() { @@ -22,6 +24,9 @@ export default async function Home() { {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

hello world with data: {hotel}

+
+ +
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

from booking-flow package:

diff --git a/apps/partner-sas/package.json b/apps/partner-sas/package.json index 016fcb6b1..e5ad72d1c 100644 --- a/apps/partner-sas/package.json +++ b/apps/partner-sas/package.json @@ -18,6 +18,7 @@ "@netlify/plugin-nextjs": "^5.11.2", "@scandic-hotels/booking-flow": "workspace:*", "@scandic-hotels/design-system": "workspace:*", + "@scandic-hotels/trpc": "workspace:*", "@sentry/nextjs": "^8.41.0", "next": "15.3.4", "react": "^19.0.0", diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx index b1e866fe6..73cb939ba 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx @@ -8,8 +8,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Link from "@/components/TempDesignSystem/Link" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx index 0c31a5b8b..966026ce1 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx @@ -3,7 +3,7 @@ import { keepPreviousData } from "@tanstack/react-query" import { useState } from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import LoadingSpinner from "@/components/LoadingSpinner" import Pagination from "@/components/MyPages/Pagination" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx index dba047f56..dee59fd7b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx @@ -2,10 +2,10 @@ import { useRef, useState } from "react" +import { trpc } from "@scandic-hotels/trpc/client" import { type Reward } from "@scandic-hotels/trpc/types/rewards" import { REWARDS_PER_PAGE } from "@/constants/rewards" -import { trpc } from "@/lib/trpc/client" import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon" import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/ScriptedRewardText" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx index 1b0df3742..5722bcabb 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx @@ -11,8 +11,7 @@ import { import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts index 927ee023c..caaccd9b0 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts @@ -2,7 +2,7 @@ import { createContext, useCallback, useContext, useEffect } from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import { getFirstRedeemableCoupon } from "@/utils/rewards" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx index 2e82511df..147c81817 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx @@ -1,6 +1,6 @@ "use client" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import LoadingSpinner from "@/components/LoadingSpinner" import Grids from "@/components/TempDesignSystem/Grids" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx index 84c9a01db..0d49d9c9e 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx @@ -1,6 +1,6 @@ "use client" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import LoadingSpinner from "@/components/LoadingSpinner" import Grids from "@/components/TempDesignSystem/Grids" diff --git a/apps/scandic-web/components/BookingWidget/Client.tsx b/apps/scandic-web/components/BookingWidget/Client.tsx index da0fe590b..da61e0d9e 100644 --- a/apps/scandic-web/components/BookingWidget/Client.tsx +++ b/apps/scandic-web/components/BookingWidget/Client.tsx @@ -7,9 +7,9 @@ import { FormProvider, useForm } from "react-hook-form" import { dt } from "@scandic-hotels/common/dt" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { trpc } from "@scandic-hotels/trpc/client" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" -import { trpc } from "@/lib/trpc/client" import { StickyElementNameEnum } from "@/stores/sticky-position" import Form, { diff --git a/apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx b/apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx index 92765cff6..551fbf6fa 100644 --- a/apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx +++ b/apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx @@ -2,7 +2,7 @@ import { usePathname } from "next/navigation" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import SkeletonShimmer from "@/components/SkeletonShimmer" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx index 340545c9b..a60bef325 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx @@ -6,8 +6,7 @@ import { useDebounceValue } from "usehooks-ts" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" diff --git a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx index a712dc9f1..37afeab3c 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx +++ b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx @@ -6,11 +6,11 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { profile } from "@scandic-hotels/common/constants/routes/myPages" +import { trpc } from "@scandic-hotels/trpc/client" import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang" import { getDefaultCountryFromLang } from "@/constants/languages" import { logout } from "@/constants/routes/handleAuth" -import { trpc } from "@/lib/trpc/client" import { editProfile } from "@/actions/editProfile" import Dialog from "@/components/Dialog" diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx index ed6d419f7..e7da8ff5b 100644 --- a/apps/scandic-web/components/Forms/Signup/index.tsx +++ b/apps/scandic-web/components/Forms/Signup/index.tsx @@ -8,6 +8,7 @@ import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { type SignUpSchema, signUpSchema, @@ -18,7 +19,6 @@ import { membershipTermsAndConditions, privacyPolicy, } from "@/constants/webHrefs" -import { trpc } from "@/lib/trpc/client" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import CountrySelect from "@/components/TempDesignSystem/Form/Country" diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx index 66c87ebf2..8d9f3b13f 100644 --- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx @@ -5,9 +5,9 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { trpc } from "@scandic-hotels/trpc/client" import { logout } from "@/constants/routes/handleAuth" -import { trpc } from "@/lib/trpc/client" import Link from "@/components/TempDesignSystem/Link" import Caption from "@/components/TempDesignSystem/Text/Caption" diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx index 7a0bc2c12..b0d0e8aa3 100644 --- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx @@ -4,8 +4,7 @@ import { useSession } from "next-auth/react" import { useIntl } from "react-intl" import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import LoginButton from "@/components/LoginButton" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx index 356cfb43b..d45088a4f 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx @@ -4,8 +4,8 @@ import { useEffect } from "react" import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" +import { trpc } from "@scandic-hotels/trpc/client" -import { trpc } from "@/lib/trpc/client" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index adb5f7447..ad02b0369 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -12,6 +12,7 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation" import { Button } from "@scandic-hotels/design-system/Button" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus" @@ -20,7 +21,6 @@ import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" import { PAYMENT_METHOD_TITLES } from "@/constants/booking" import { bookingConfirmation } from "@/constants/routes/hotelReservation" import { env } from "@/env/client" -import { trpc } from "@/lib/trpc/client" import { useEnterDetailsStore } from "@/stores/enter-details" import PaymentOption from "@/components/HotelReservation/PaymentOption" diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx index 61820b79e..b3cde6712 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx @@ -6,9 +6,9 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { myStay } from "@scandic-hotels/common/constants/routes/myStay" +import { trpc } from "@scandic-hotels/trpc/client" import { customerService } from "@/constants/webHrefs" -import { trpc } from "@/lib/trpc/client" import Button from "@/components/TempDesignSystem/Button" import Input from "@/components/TempDesignSystem/Form/Input" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx index 5aafba266..d6912087a 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx @@ -10,11 +10,11 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho import { dt } from "@scandic-hotels/common/dt" import { Divider } from "@scandic-hotels/design-system/Divider" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { guaranteeCallback } from "@/constants/routes/hotelReservation" import { env } from "@/env/client" -import { trpc } from "@/lib/trpc/client" import { AncillaryStepEnum, type BreakfastData, diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx index 0b2356553..a96a4705c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx @@ -2,8 +2,7 @@ import { useRouter } from "next/navigation" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Dialog from "@/components/Dialog" import Button from "@/components/TempDesignSystem/Button" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx index 4ce2b76bf..f364e0bd4 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/navigation" import { useEffect } from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import { clearAncillarySessionData, diff --git a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx index 953db2ffe..487de3e8b 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx @@ -9,9 +9,9 @@ import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { isWebview } from "@/constants/routes/webviews" -import { trpc } from "@/lib/trpc/client" import MembershipLevelIcon from "@/components/Levels/Icon" import Modal from "@/components/Modal" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx index 38ed77b3d..4937f526c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx @@ -3,8 +3,8 @@ import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" -import { trpc } from "@/lib/trpc/client" import { useMyStayStore } from "@/stores/my-stay" import Modal from "@/components/HotelReservation/MyStay/Modal" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx index c9711e4e2..5b1e8e89e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx @@ -3,9 +3,9 @@ import { useIntl } from "react-intl" import { dt } from "@scandic-hotels/common/dt" import { Divider } from "@scandic-hotels/design-system/Divider" +import { trpc } from "@scandic-hotels/trpc/client" import { longDateWithYearFormat } from "@/constants/dateFormats" -import { trpc } from "@/lib/trpc/client" import { useMyStayStore } from "@/stores/my-stay" import Modal from "@/components/HotelReservation/MyStay/Modal" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/index.tsx index e92fc5da1..eb2b5564c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/index.tsx @@ -4,8 +4,8 @@ import { useState } from "react" import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" +import { trpc } from "@scandic-hotels/trpc/client" -import { trpc } from "@/lib/trpc/client" import { useMyStayStore } from "@/stores/my-stay" import { sumPackages } from "@/components/HotelReservation/utils" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx index 8f89c0121..4a09cdcee 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx @@ -17,9 +17,9 @@ import { ChipButton } from "@scandic-hotels/design-system/ChipButton" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType" -import { trpc } from "@/lib/trpc/client" import { useRatesStore } from "@/stores/select-rate" import { useRoomContext } from "@/contexts/SelectRate/Room" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx index 77020b9fa..6ea6049de 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx @@ -5,8 +5,8 @@ import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" import { Divider } from "@scandic-hotels/design-system/Divider" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" -import { trpc } from "@/lib/trpc/client" import { useRatesStore } from "@/stores/select-rate" import { useRoomContext } from "@/contexts/SelectRate/Room" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx index aac39f179..79a1d6abf 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx @@ -4,8 +4,8 @@ import { useMediaQuery } from "usehooks-ts" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" -import { trpc } from "@/lib/trpc/client" import { useRatesStore } from "@/stores/select-rate" import { useRoomContext } from "@/contexts/SelectRate/Room" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx index 1b1a1fb12..3617bc5be 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx @@ -3,11 +3,10 @@ import { notFound, useSearchParams } from "next/navigation" import { useIntl } from "react-intl" +import { trpc } from "@scandic-hotels/trpc/client" import { selectRateRoomsAvailabilityInputSchema } from "@scandic-hotels/trpc/routers/hotels/input" import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType" -import { trpc } from "@/lib/trpc/client" - import Alert from "@/components/TempDesignSystem/Alert" import useLang from "@/hooks/useLang" import RatesProvider from "@/providers/RatesProvider" diff --git a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx index 03172206e..d55ce5972 100644 --- a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx @@ -2,7 +2,8 @@ import { useEffect } from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" + import useSidePeekStore from "@/stores/sidepeek" import HotelSidePeek from "@/components/SidePeeks/HotelSidePeek" diff --git a/apps/scandic-web/components/LanguageSwitcher/index.tsx b/apps/scandic-web/components/LanguageSwitcher/index.tsx index 8e6e97357..77cef9ca2 100644 --- a/apps/scandic-web/components/LanguageSwitcher/index.tsx +++ b/apps/scandic-web/components/LanguageSwitcher/index.tsx @@ -7,9 +7,9 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { languages } from "@/constants/languages" -import { trpc } from "@/lib/trpc/client" import useDropdownStore from "@/stores/main-menu" import useClickOutside from "@/hooks/useClickOutside" diff --git a/apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx b/apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx index bfbd890f4..66dc1783f 100644 --- a/apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx +++ b/apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx @@ -5,9 +5,9 @@ import { useEffect, useRef } from "react" import { useIntl } from "react-intl" import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages" +import { trpc } from "@scandic-hotels/trpc/client" import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels" -import { trpc } from "@/lib/trpc/client" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/MyPages/Surprises/Client.tsx b/apps/scandic-web/components/MyPages/Surprises/Client.tsx index 2e1141a32..60112b11d 100644 --- a/apps/scandic-web/components/MyPages/Surprises/Client.tsx +++ b/apps/scandic-web/components/MyPages/Surprises/Client.tsx @@ -8,13 +8,13 @@ import { useIntl } from "react-intl" import { benefits } from "@scandic-hotels/common/constants/routes/myPages" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trpc } from "@scandic-hotels/trpc/client" import { benefits as webviewBenefits, myPagesWebviews, } from "@/constants/routes/webviews" import { customerService } from "@/constants/webHrefs" -import { trpc } from "@/lib/trpc/client" import Link from "@/components/TempDesignSystem/Link" import { toast } from "@/components/TempDesignSystem/Toasts" diff --git a/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx b/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx index 762e6d499..f1ffc4520 100644 --- a/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx +++ b/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx @@ -5,8 +5,7 @@ import { useEffect, useRef } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" diff --git a/apps/scandic-web/components/Profile/CreditCardList/index.tsx b/apps/scandic-web/components/Profile/CreditCardList/index.tsx index 87a997601..8033faae5 100644 --- a/apps/scandic-web/components/Profile/CreditCardList/index.tsx +++ b/apps/scandic-web/components/Profile/CreditCardList/index.tsx @@ -2,7 +2,7 @@ import React from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import CreditCardRow from "../CreditCardRow" diff --git a/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx b/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx index 7bda06ae4..e82dffc81 100644 --- a/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx +++ b/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx @@ -2,8 +2,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Dialog from "@/components/Dialog" import Button from "@/components/TempDesignSystem/Button" diff --git a/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx b/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx index 27c777216..a8af17640 100644 --- a/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx +++ b/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" diff --git a/apps/scandic-web/components/SitewideAlert/index.tsx b/apps/scandic-web/components/SitewideAlert/index.tsx index bd5a3e859..68e366422 100644 --- a/apps/scandic-web/components/SitewideAlert/index.tsx +++ b/apps/scandic-web/components/SitewideAlert/index.tsx @@ -2,9 +2,9 @@ import { useCallback, useRef } from "react" +import { trpc } from "@scandic-hotels/trpc/client" import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType" -import { trpc } from "@/lib/trpc/client" import { StickyElementNameEnum } from "@/stores/sticky-position" import Alert from "@/components/TempDesignSystem/Alert" diff --git a/apps/scandic-web/components/TrackingSDK/hooks.ts b/apps/scandic-web/components/TrackingSDK/hooks.ts index a8427fc32..d04ec0a35 100644 --- a/apps/scandic-web/components/TrackingSDK/hooks.ts +++ b/apps/scandic-web/components/TrackingSDK/hooks.ts @@ -15,7 +15,8 @@ import { type UseFromSubscribe, } from "react-hook-form" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" + import useRouterTransitionStore from "@/stores/router-transition" import useTrackingStore from "@/stores/tracking" diff --git a/apps/scandic-web/hooks/booking/useGuaranteeBooking.ts b/apps/scandic-web/hooks/booking/useGuaranteeBooking.ts index 6f4167742..42549ee21 100644 --- a/apps/scandic-web/hooks/booking/useGuaranteeBooking.ts +++ b/apps/scandic-web/hooks/booking/useGuaranteeBooking.ts @@ -2,10 +2,9 @@ import { useRouter } from "next/navigation" import { useCallback, useEffect, useState } from "react" import { useIntl } from "react-intl" +import { trpc } from "@scandic-hotels/trpc/client" import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus" -import { trpc } from "@/lib/trpc/client" - import { toast } from "@/components/TempDesignSystem/Toasts" import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import { trackEvent } from "@/utils/tracking/base" diff --git a/apps/scandic-web/hooks/booking/useHandleBookingStatus.ts b/apps/scandic-web/hooks/booking/useHandleBookingStatus.ts index d38f0ae4d..6d5343904 100644 --- a/apps/scandic-web/hooks/booking/useHandleBookingStatus.ts +++ b/apps/scandic-web/hooks/booking/useHandleBookingStatus.ts @@ -2,7 +2,7 @@ import { useRef } from "react" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/lib/trpc/Provider.tsx b/apps/scandic-web/lib/trpc/Provider.tsx index 127c2f242..8812e7598 100644 --- a/apps/scandic-web/lib/trpc/Provider.tsx +++ b/apps/scandic-web/lib/trpc/Provider.tsx @@ -1,101 +1,39 @@ "use client" -import { - QueryCache, - QueryClient, - QueryClientProvider, -} from "@tanstack/react-query" -import { httpLink, loggerLink, TRPCClientError } from "@trpc/client" -import { useState } from "react" +import { TRPCClientError } from "@trpc/client" import { SessionExpiredError } from "@scandic-hotels/trpc/errors" -import { transformer } from "@scandic-hotels/trpc/transformer" +import { TrpcProvider as InternalTrpcProvider } from "@scandic-hotels/trpc/Provider" import { login } from "@/constants/routes/handleAuth" -import { env } from "@/env/client" import useLang from "@/hooks/useLang" -import { trpc } from "./client" - import type { AnyTRPCRouter } from "@trpc/server" -function initializeTrpcClient() { - // Locally we set nextjs to run on port to 3000 so that we always guarantee - // that trpc and next are running on the same port. - return trpc.createClient({ - links: [ - loggerLink({ - enabled: (opts) => - (env.NEXT_PUBLIC_NODE_ENV === "development" && - typeof window !== "undefined") || - (opts.direction === "down" && opts.result instanceof Error), - }), - httpLink({ - transformer, - /** - * This is locally in Next.js - */ - url: `/api/web/trpc`, - }), - ], - }) -} - -export default function TrpcProvider({ children }: React.PropsWithChildren) { +export default function TrpcProvider({ + children, +}: { + children: React.ReactNode +}) { const lang = useLang() - const [queryClient] = useState( - () => - new QueryClient({ - queryCache: new QueryCache({ - async onError(error) { - if (error instanceof TRPCClientError) { - const appError: TRPCClientError = error - console.log({ appError }) - if (appError.data?.code === "UNAUTHORIZED") { - if (appError.data?.cause instanceof SessionExpiredError) { - const loginUrl = login[lang] - window.location.assign(loginUrl) - } - } - } - }, - }), - defaultOptions: { - queries: { - staleTime: 60 * 1000, - retry(failureCount, error) { - if (error instanceof TRPCClientError) { - const appError: TRPCClientError = error - // Do not retry query requests that got UNAUTHORIZED error. - // It won't make a difference sending the same request again. - - if (appError.data?.code) { - if ( - [ - "UNAUTHORIZED", - "INTERNAL_SERVER_ERROR", - "FORBIDDEN", - ].includes(appError.data.code) - ) { - return false - } - } - } - - // Retry all client requests that fail (and are not handled above) - // at most 3 times. - return failureCount < 3 - }, - }, - }, - }) - ) - const [trpcClient] = useState(() => initializeTrpcClient()) return ( - - {children} - + { + if (error instanceof TRPCClientError) { + const appError: TRPCClientError = error + console.log({ appError }) + if (appError.data?.code === "UNAUTHORIZED") { + if (appError.data?.cause instanceof SessionExpiredError) { + const loginUrl = login[lang] + window.location.assign(loginUrl) + } + } + } + }} + > + {children} + ) } diff --git a/apps/scandic-web/lib/trpc/client.ts b/apps/scandic-web/lib/trpc/client.ts deleted file mode 100644 index c26280ca5..000000000 --- a/apps/scandic-web/lib/trpc/client.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createTRPCReact } from "@trpc/react-query" - -import type { AppRouter } from "@scandic-hotels/trpc/routers/appRouter" -import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server" - -export const trpc = createTRPCReact() - -export type RouterInput = inferRouterInputs -export type RouterOutput = inferRouterOutputs diff --git a/apps/scandic-web/providers/MyStay.tsx b/apps/scandic-web/providers/MyStay.tsx index cf2b1458b..95840fc5a 100644 --- a/apps/scandic-web/providers/MyStay.tsx +++ b/apps/scandic-web/providers/MyStay.tsx @@ -3,7 +3,8 @@ import { notFound } from "next/navigation" import { use, useRef } from "react" import { useIntl } from "react-intl" -import { trpc } from "@/lib/trpc/client" +import { trpc } from "@scandic-hotels/trpc/client" + import { createMyStayStore } from "@/stores/my-stay" import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton" diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts index bf7aee437..789cabc76 100644 --- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts +++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar.ts @@ -1,7 +1,6 @@ +import type { RouterOutput } from "@scandic-hotels/trpc/client" import type { EventAttributes } from "ics" -import type { RouterOutput } from "@/lib/trpc/client" - export interface AddToCalendarProps { checkInDate: NonNullable< RouterOutput["booking"]["get"] diff --git a/apps/scandic-web/types/user.ts b/apps/scandic-web/types/user.ts index e23f8f89e..50cc08701 100644 --- a/apps/scandic-web/types/user.ts +++ b/apps/scandic-web/types/user.ts @@ -1,3 +1,3 @@ -import type { RouterOutput } from "@/lib/trpc/client" +import type { RouterOutput } from "@scandic-hotels/trpc/client" export type SafeUser = RouterOutput["user"]["getSafely"] diff --git a/packages/trpc/env/client.ts b/packages/trpc/env/client.ts new file mode 100644 index 000000000..c7e1d025b --- /dev/null +++ b/packages/trpc/env/client.ts @@ -0,0 +1,21 @@ +import { createEnv } from "@t3-oss/env-nextjs" +import { z } from "zod" + +export const env = createEnv({ + client: { + NEXT_PUBLIC_NODE_ENV: z.enum(["development", "test", "production"]), + // NEXT_PUBLIC_PORT: z.string().default("3000"), + // NEXT_PUBLIC_SENTRY_ENVIRONMENT: z.string().default("development"), + // NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE: z.coerce.number().default(0.001), + // NEXT_PUBLIC_PUBLIC_URL: z.string().optional(), + }, + emptyStringAsUndefined: true, + runtimeEnv: { + NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV, + // NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT, + // NEXT_PUBLIC_SENTRY_ENVIRONMENT: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT, + // NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE: + // process.env.NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE, + // NEXT_PUBLIC_PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL, + }, +}) diff --git a/packages/trpc/lib/Provider.tsx b/packages/trpc/lib/Provider.tsx new file mode 100644 index 000000000..371c539c6 --- /dev/null +++ b/packages/trpc/lib/Provider.tsx @@ -0,0 +1,92 @@ +"use client" + +import { + QueryCache, + QueryClient, + QueryClientProvider, +} from "@tanstack/react-query" +import { httpLink, loggerLink, TRPCClientError } from "@trpc/client" +import { useState } from "react" + +import { trpc } from "@scandic-hotels/trpc/client" +import { transformer } from "@scandic-hotels/trpc/transformer" + +import { env } from "../env/client" + +import type { AnyTRPCRouter } from "@trpc/server" + +function initializeTrpcClient() { + // Locally we set nextjs to run on port to 3000 so that we always guarantee + // that trpc and next are running on the same port. + return trpc.createClient({ + links: [ + loggerLink({ + enabled: (opts) => + (env.NEXT_PUBLIC_NODE_ENV === "development" && + typeof window !== "undefined") || + (opts.direction === "down" && opts.result instanceof Error), + }), + httpLink({ + transformer, + /** + * This is locally in Next.js + */ + url: `/api/web/trpc`, + }), + ], + }) +} + +export function TrpcProvider({ + onError, + children, +}: { + onError?: (error: Error) => void + children: React.ReactNode +}) { + const [queryClient] = useState( + () => + new QueryClient({ + queryCache: new QueryCache({ + async onError(error) { + onError?.(error) + }, + }), + defaultOptions: { + queries: { + staleTime: 60 * 1000, + retry(failureCount, error) { + if (error instanceof TRPCClientError) { + const appError: TRPCClientError = error + + // Do not retry query requests that got UNAUTHORIZED error. + // It won't make a difference sending the same request again. + + if (appError.data?.code) { + if ( + [ + "UNAUTHORIZED", + "INTERNAL_SERVER_ERROR", + "FORBIDDEN", + ].includes(appError.data.code) + ) { + return false + } + } + } + + // Retry all client requests that fail (and are not handled above) + // at most 3 times. + return failureCount < 3 + }, + }, + }, + }) + ) + const [trpcClient] = useState(() => initializeTrpcClient()) + return ( + + {children} + + ) +} diff --git a/packages/trpc/lib/client.ts b/packages/trpc/lib/client.ts new file mode 100644 index 000000000..16b192617 --- /dev/null +++ b/packages/trpc/lib/client.ts @@ -0,0 +1,9 @@ +import { createTRPCReact } from "@trpc/react-query" + +import type { inferRouterOutputs } from "@trpc/server" + +import type { AppRouter } from "./routers/appRouter" + +export const trpc = createTRPCReact() + +export type RouterOutput = inferRouterOutputs diff --git a/packages/trpc/package.json b/packages/trpc/package.json index 732aa4173..5e1d070c9 100644 --- a/packages/trpc/package.json +++ b/packages/trpc/package.json @@ -18,6 +18,8 @@ "./procedures": "./lib/procedures.ts", "./transformer": "./lib/transformer.ts", "./serverClient": "./lib/serverClient.ts", + "./client": "./lib/client.ts", + "./Provider": "./lib/Provider.tsx", "./utils/generateTag": "./lib/utils/generateTag.ts", "./graphql/request": "./lib/graphql/request.ts", "./graphql/batchRequest": "./lib/graphql/batchRequest.ts", @@ -48,6 +50,8 @@ "@scandic-hotels/common": "workspace:*", "@sentry/nextjs": "^8.41.0", "@t3-oss/env-nextjs": "^0.13.4", + "@trpc/client": "^11.1.2", + "@trpc/react-query": "^11.1.2", "@trpc/server": "^11.1.2", "dayjs": "^1.11.13", "deepmerge": "^4.3.1", diff --git a/yarn.lock b/yarn.lock index 43093ee98..7f65f1c80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6897,6 +6897,7 @@ __metadata: "@scandic-hotels/booking-flow": "workspace:*" "@scandic-hotels/common": "workspace:*" "@scandic-hotels/design-system": "workspace:*" + "@scandic-hotels/trpc": "workspace:*" "@scandic-hotels/typescript-config": "workspace:*" "@sentry/nextjs": "npm:^8.41.0" "@types/node": "npm:^20" @@ -7080,7 +7081,7 @@ __metadata: languageName: unknown linkType: soft -"@scandic-hotels/trpc@workspace:packages/trpc": +"@scandic-hotels/trpc@workspace:*, @scandic-hotels/trpc@workspace:packages/trpc": version: 0.0.0-use.local resolution: "@scandic-hotels/trpc@workspace:packages/trpc" dependencies: @@ -7091,6 +7092,8 @@ __metadata: "@scandic-hotels/typescript-config": "workspace:*" "@sentry/nextjs": "npm:^8.41.0" "@t3-oss/env-nextjs": "npm:^0.13.4" + "@trpc/client": "npm:^11.1.2" + "@trpc/react-query": "npm:^11.1.2" "@trpc/server": "npm:^11.1.2" "@types/lodash-es": "npm:^4" "@types/react": "npm:19.1.0"