Merged in feat/SW-659-payment-send-query-params (pull request #727)

feat(SW-659): Receive query params from Planet callbacks

* feat(SW-659): read confirmation number from url and update callback url if dev

* fix(SW-659): moved callback url into env variable


Approved-by: Simon.Emanuelsson

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -1,14 +1,13 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useState } from "react"
 import { Label as AriaLabel } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import {
-  BOOKING_CONFIRMATION_NUMBER,
   BookingStatusEnum,
   PAYMENT_METHOD_TITLES,
   PaymentMethodEnum,
@@ -17,7 +16,9 @@ import {
   bookingTermsAndConditions,
   privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -51,6 +52,9 @@ export default function Payment({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const queryParams = useSearchParams()
+  const { firstName, lastName, email, phoneNumber, countryCode } =
+    useEnterDetailsStore((state) => state.data)
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
 
   const methods = useForm<PaymentFormData>({
@@ -90,14 +94,15 @@ export default function Payment({
   )
 
   useEffect(() => {
-    if (confirmationNumber && bookingStatus?.data?.paymentUrl) {
-      // Planet doesn't support query params so we have to store values in session storage
-      sessionStorage.setItem(BOOKING_CONFIRMATION_NUMBER, confirmationNumber)
+    if (bookingStatus?.data?.paymentUrl) {
       router.push(bookingStatus.data.paymentUrl)
     }
-  }, [confirmationNumber, bookingStatus, router])
+  }, [bookingStatus, router])
 
   function handleSubmit(data: PaymentFormData) {
+    const allQueryParams =
+      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+
     // set payment method to card if saved card is submitted
     const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
       ? data.paymentMethod
@@ -118,13 +123,13 @@ export default function Payment({
           rateCode: "SAVEEU",
           roomTypeCode: "QC",
           guest: {
-            title: "Mr",
-            firstName: "Test",
-            lastName: "User",
-            email: "test.user@scandichotels.com",
-            phoneCountryCodePrefix: "string",
-            phoneNumber: "string",
-            countryCode: "string",
+            title: "Mr", // TODO: do we need title?
+            firstName,
+            lastName,
+            email,
+            phoneCountryCodePrefix: phoneNumber.slice(0, 3),
+            phoneNumber: phoneNumber.slice(3),
+            countryCode,
           },
           packages: {
             breakfast: true,
@@ -150,9 +155,9 @@ export default function Payment({
           phoneCountryCode: "",
           phoneSubscriber: "",
         },
-        success: `api/web/payment-callback/${lang}/success`,
-        error: `api/web/payment-callback/${lang}/error`,
-        cancel: `api/web/payment-callback/${lang}/cancel`,
+        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
+        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
+        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
       },
     })
   }