Merged in feat/SW-588-payment-saved-card (pull request #697)

feat(SW-588): Added saved card to payment step

* feat(SW-588): Added saved card to payment step

* feat(SW-588): Add proper label for saved card

* feat(SW-588): fix from PR feedback

* feat(SW-588): Add preloading of data

* feat(SW-588): remove onChange logic for PaymentOption

* feat(SW-588): moved payment files to correct folder

* feat(SW-588): moved preload to layout

* fix: remove unused prop


Approved-by: Simon.Emanuelsson

app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx

@@ -1,6 +1,10 @@
 import { redirect } from "next/navigation"
 
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
@@ -14,15 +18,20 @@ import styles from "./layout.module.css"
 import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
+function preload(id: string, lang: string) {
+  void getHotelData(id, lang)
+  void getProfileSafely()
+  void getCreditCardsSafely()
+}
+
 export default async function StepLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
   setLang(params.lang)
-  const hotel = await serverClient().hotel.hotelData.get({
-    hotelId: "811",
-    language: params.lang,
-  })
+  preload("811", params.lang)
+
+  const hotel = await getHotelData("811", params.lang)
 
   if (!hotel?.data) {
     redirect(`/${params.lang}`)

app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx

@@ -1,14 +1,17 @@
 import { notFound } from "next/navigation"
 
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
+import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
-import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import { getIntl } from "@/i18n"
 
 import { StepEnum } from "@/types/components/enterDetails/step"
@@ -25,12 +28,9 @@ export default async function StepPage({
 
   const intl = await getIntl()
 
-  const hotel = await serverClient().hotel.hotelData.get({
-    hotelId: "811",
-    language: lang,
-  })
-
+  const hotel = await getHotelData("811", lang)
   const user = await getProfileSafely()
+  const savedCreditCards = await getCreditCardsSafely()
 
   if (!isValidStep(step) || !hotel) {
     return notFound()
@@ -65,7 +65,14 @@ export default async function StepPage({
         step={StepEnum.payment}
         label={intl.formatMessage({ id: "Select payment method" })}
       >
-        <Payment hotel={hotel.data.attributes} />
+        <Payment
+          hotelId={hotel.data.attributes.operaId}
+          otherPaymentOptions={
+            hotel.data.attributes.merchantInformationData
+              .alternatePaymentOptions
+          }
+          savedCreditCards={savedCreditCards}
+        />
       </SectionAccordion>
     </section>
   )