diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx index 2d4496b98..ba645e64c 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx @@ -10,14 +10,8 @@ export default async function BookingConfirmationPage({ searchParams, }: PageArgs) { setLang(params.lang) - const bookingConfirmationPromise = getBookingConfirmation( - searchParams.confirmationNumber - ) - + void getBookingConfirmation(searchParams.confirmationNumber) return ( - + ) } diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx index 3df3f9c7c..972982337 100644 --- a/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -22,7 +22,10 @@ import SearchList from "./SearchList" import styles from "./search.module.css" import type { BookingWidgetSchema } from "@/types/components/bookingWidget" -import { ActionType } from "@/types/components/form/bookingwidget" +import { + ActionType, + type SetStorageData, +} from "@/types/components/form/bookingwidget" import type { SearchProps } from "@/types/components/search" import type { Location } from "@/types/trpc/routers/hotel/locations" @@ -40,7 +43,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) { : null const [state, dispatch] = useReducer( reducer, - { defaultLocations: locations }, + { defaultLocations: locations, initialValue: value }, init ) const handleMatchLocations = useCallback( @@ -122,30 +125,19 @@ export default function Search({ locations, handlePressEnter }: SearchProps) { } useEffect(() => { - const searchData = - typeof window !== "undefined" - ? sessionStorage.getItem(sessionStorageKey) - : undefined - - const searchHistory = - typeof window !== "undefined" - ? localStorage.getItem(localStorageKey) - : null - if (searchData || searchHistory) { - dispatch({ - payload: { - searchData: - isValidJson(searchData) && searchData - ? JSON.parse(searchData) - : undefined, - searchHistory: - isValidJson(searchHistory) && searchHistory - ? JSON.parse(searchHistory) - : null, - }, - type: ActionType.SET_STORAGE_DATA, - }) + const searchData = sessionStorage.getItem(sessionStorageKey) + const searchHistory = localStorage.getItem(localStorageKey) + const payload: SetStorageData["payload"] = {} + if (searchData) { + payload.searchData = JSON.parse(searchData) } + if (searchHistory) { + payload.searchHistory = JSON.parse(searchHistory) + } + dispatch({ + payload, + type: ActionType.SET_STORAGE_DATA, + }) }, [dispatch]) const stayType = state.searchData?.type === "cities" ? "city" : "hotel" diff --git a/components/Forms/BookingWidget/FormContent/Search/reducer.ts b/components/Forms/BookingWidget/FormContent/Search/reducer.ts index dd7bb1f8c..3ca0e2b93 100644 --- a/components/Forms/BookingWidget/FormContent/Search/reducer.ts +++ b/components/Forms/BookingWidget/FormContent/Search/reducer.ts @@ -10,11 +10,20 @@ export const localStorageKey = "searchHistory" export const sessionStorageKey = "searchData" export function init(initState: InitState): State { + const locations = [] + if (initState.initialValue) { + const location = initState.defaultLocations.find( + (loc) => loc.name.toLowerCase() === initState.initialValue!.toLowerCase() + ) + if (location) { + locations.push(location) + } + } return { defaultLocations: initState.defaultLocations, - locations: [], - search: "", - searchData: undefined, + locations, + search: locations.length ? locations[0].name : "", + searchData: locations.length ? locations[0] : undefined, searchHistory: null, } } @@ -73,8 +82,12 @@ export function reducer(state: State, action: Action) { case ActionType.SET_STORAGE_DATA: { return { ...state, - searchData: action.payload.searchData, - searchHistory: action.payload.searchHistory, + searchData: action.payload.searchData + ? action.payload.searchData + : state.searchData, + searchHistory: action.payload.searchHistory + ? action.payload.searchHistory + : state.searchHistory, } } default: diff --git a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx index 3d2e5dc9a..71efd978d 100644 --- a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx @@ -1,5 +1,5 @@ "use client" -import { use, useRef } from "react" +import { useRef } from "react" import Header from "@/components/HotelReservation/BookingConfirmation/Header" import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails" @@ -15,13 +15,11 @@ import styles from "./confirmation.module.css" import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation" export default function Confirmation({ - bookingConfirmationPromise, + booking, + hotel, + room, }: ConfirmationProps) { - const bookingConfirmation = use(bookingConfirmationPromise) const mainRef = useRef(null) - - const { booking, hotel, room } = bookingConfirmation - return (
@@ -30,7 +28,11 @@ export default function Confirmation({ - +
diff --git a/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx b/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx index d0c8c2a82..45f7d3655 100644 --- a/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx +++ b/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx @@ -1,15 +1,40 @@ "use client" import { useIntl } from "react-intl" +import { myBooking } from "@/constants/myBooking" +import { env } from "@/env/client" + import { EditIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" +import Link from "@/components/TempDesignSystem/Link" +import useLang from "@/hooks/useLang" -export default function ManageBooking() { +import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking" + +export default function ManageBooking({ + confirmationNumber, + lastName, +}: ManageBookingProps) { const intl = useIntl() + const lang = useLang() + const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang] return ( - ) } diff --git a/components/HotelReservation/BookingConfirmation/Header/index.tsx b/components/HotelReservation/BookingConfirmation/Header/index.tsx index 0d2d08f8b..f9aee6f71 100644 --- a/components/HotelReservation/BookingConfirmation/Header/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Header/index.tsx @@ -70,7 +70,10 @@ export default function Header({ event={event} hotelName={hotel.name} /> - +
diff --git a/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx b/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx index f8319c644..87b7f4748 100644 --- a/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx @@ -1,4 +1,5 @@ import Button from "@/components/TempDesignSystem/Button" +import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" @@ -6,18 +7,20 @@ import styles from "./promo.module.css" import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo" -export default function Promo({ buttonText, text, title }: PromoProps) { +export default function Promo({ buttonText, href, text, title }: PromoProps) { return ( -
- - {title} - - - {text} - - -
+ +
+ + {title} + + + {text} + + +
+ ) } diff --git a/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css b/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css index ed4714228..69bf014a5 100644 --- a/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css +++ b/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css @@ -13,24 +13,24 @@ padding: var(--Spacing-x4) var(--Spacing-x3); } -.promo:nth-of-type(1) { +.link:nth-of-type(1) .promo { background-image: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.36) 37.88%, - rgba(0, 0, 0, 0.75) 100% - ); - /* , url(""); uncomment and add image once we have it */ + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.36) 37.88%, + rgba(0, 0, 0, 0.75) 100% + ), + url("/_static/img/Scandic_Park_Party_Lipstick.jpg"); } -.promo:nth-of-type(2) { +.link:nth-of-type(2) .promo { background-image: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.36) 37.88%, - rgba(0, 0, 0, 0.75) 100% - ); - /* , url(""); uncomment and add image once we have it */ + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.36) 37.88%, + rgba(0, 0, 0, 0.75) 100% + ), + url("/_static/img/Scandic_Family_Breakfast.jpg"); } .text { diff --git a/components/HotelReservation/BookingConfirmation/Promos/index.tsx b/components/HotelReservation/BookingConfirmation/Promos/index.tsx index 4cf6d9076..1ee922763 100644 --- a/components/HotelReservation/BookingConfirmation/Promos/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Promos/index.tsx @@ -1,16 +1,32 @@ "use client" import { useIntl } from "react-intl" +import { homeHrefs } from "@/constants/homeHrefs" +import { myBooking } from "@/constants/myBooking" +import { env } from "@/env/client" + +import useLang from "@/hooks/useLang" + import Promo from "./Promo" import styles from "./promos.module.css" -export default function Promos() { +import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos" + +export default function Promos({ + confirmationNumber, + hotelId, + lastName, +}: PromosProps) { const intl = useIntl() + const lang = useLang() + const homeUrl = homeHrefs[env.NEXT_PUBLIC_NODE_ENV][lang] + const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang] return (
- + {} +export interface InitState extends Pick { + initialValue?: string +} diff --git a/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts b/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts new file mode 100644 index 000000000..70b22b300 --- /dev/null +++ b/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts @@ -0,0 +1,5 @@ +import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation" + +export interface ManageBookingProps + extends Pick, + Pick {} diff --git a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts index 4b9352677..73007a82d 100644 --- a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts +++ b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts @@ -1,11 +1,7 @@ -import type { Lang } from "@/constants/languages" -import type { RouterOutput } from "@/lib/trpc/client" +import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation" export interface BookingConfirmationProps { - lang: Lang - bookingConfirmationPromise: Promise + confirmationNumber: string } -export interface ConfirmationProps { - bookingConfirmationPromise: Promise -} +export interface ConfirmationProps extends BookingConfirmation {} diff --git a/types/components/hotelReservation/bookingConfirmation/promo.ts b/types/components/hotelReservation/bookingConfirmation/promo.ts index 22cf695d8..03fdf07bc 100644 --- a/types/components/hotelReservation/bookingConfirmation/promo.ts +++ b/types/components/hotelReservation/bookingConfirmation/promo.ts @@ -1,5 +1,6 @@ export interface PromoProps { buttonText: string + href: string text: string title: string } diff --git a/types/components/hotelReservation/bookingConfirmation/promos.ts b/types/components/hotelReservation/bookingConfirmation/promos.ts new file mode 100644 index 000000000..55f11c6a1 --- /dev/null +++ b/types/components/hotelReservation/bookingConfirmation/promos.ts @@ -0,0 +1,8 @@ +import { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation" + +export interface PromosProps + extends Pick< + BookingConfirmation["booking"], + "confirmationNumber" | "hotelId" + >, + Pick {}