scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Browse Source 
Feat/SW-1737 design mystay multiroom

* feat(SW-1737) Fixed member view of guest details

* feat(SW-1737) fix merge issues

* feat(SW-1737) Fixed price details

* feat(SW-1737) removed unused imports

* feat(SW-1737) removed true as statement

* feat(SW-1737) updated store handling

* feat(SW-1737) fixed bug showing double numbers

* feat(SW-1737) small design fixed

* feat(SW-1737) fixed rebase errors

* feat(SW-1737) fixed create booking error with dates

* feat(SW-1737) fixed view multiroom as singleroom

* feat(SW-1737) fixes for multiroom

* feat(SW-1737) fixed bookingsummary

* feat(SW-1737) dont hide modify dates

* feat(SW-1737) updated breakfast to handle number

* feat(SW-1737) Added red color if member rate

* feat(SW-1737) fix PR comments

* feat(SW-1737) updated member tiers svg

* feat(SW-1737) updated how to handle paymentMethodDescription

* feat(SW-1737) fixes after testing mystay

* feat(SW-1737) updated Room type to just use whats used

* feat(SW-1737) fixed access

* feat(SW-1737) refactor my stay after PR comments

* feat(SW-1737) fix roomNumber translation

* feat(SW-1737) removed log


Approved-by: Arvid Norlin
This commit is contained in:
Pontus Dreij
2025-03-24 09:30:10 +00:00
parent c5e294c7ea
commit 74c5b47319
117 changed files with 5899 additions and 1901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/CancelStayPriceContainer/index.tsx
View File

@@ -1,23 +1,34 @@
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import PriceContainer from "../../../PriceContainer"
import { useCheckedRoomsCounts } from "../utils"
import type { PriceContainerProps } from "@/types/components/hotelReservation/myStay/cancelStay"
import type {
CancelStayFormValues,
PriceContainerProps,
} from "@/types/components/hotelReservation/myStay/cancelStay"
export default function CancelStayPriceContainer({
booking,
roomDetails,
stayDetails,
}: PriceContainerProps) {
const intl = useIntl()
const checkedRoomsDetails = useCheckedRoomsCounts(booking, intl)
const { getValues } = useFormContext<CancelStayFormValues>()
const formRooms = getValues("rooms")
const checkedRoomsDetails = useCheckedRoomsCounts(
roomDetails,
formRooms,
intl
)
return (
<PriceContainer
text={intl.formatMessage({ id: "Cancellation cost" })}
price={0}
currencyCode={booking.currencyCode}
currencyCode={roomDetails.currencyCode}
nightsText={stayDetails.nightsText}
adultsText={checkedRoomsDetails.adultsText}
childrenText={checkedRoomsDetails.childrenText}

40
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/Confirmation/index.tsx
View File

@@ -3,7 +3,8 @@
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { useMyStayRoomDetailsStore } from "@/components/HotelReservation/MyStay/stores/myStayRoomDetailsStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -19,12 +20,16 @@ import type {
export function CancelStayConfirmation({
hotel,
booking,
stayDetails,
}: CancelStayConfirmationProps) {
const intl = useIntl()
const { getValues } = useFormContext<CancelStayFormValues>()
const { rooms: roomDetails } = useMyStayRoomDetailsStore()
const { watch } = useFormContext<CancelStayFormValues>()
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
const linkedReservationRooms = useMyStayRoomDetailsStore(
(state) => state.linkedReservationRooms
)
const { multiRoom } = bookedRoom
return (
<>
@@ -45,25 +50,31 @@ export function CancelStayConfirmation({
{intl.formatMessage({ id: "No charges were made." })}
</Caption>
</div>
{booking.multiRoom && (
{multiRoom && (
<>
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({ id: "Select rooms" })}
</Body>
<div className={styles.rooms}>
{getValues("rooms").map((room, index) => {
{watch("rooms").map((room, index) => {
// Find room details from store by confirmationNumber
const roomDetail = roomDetails.find(
(detail) => detail.id === room.confirmationNumber
)
const roomDetail =
linkedReservationRooms.find(
(detail) =>
detail.confirmationNumber === room.confirmationNumber
) ?? bookedRoom
return (
<div key={room.id} className={styles.roomContainer}>
<div
key={room.confirmationNumber}
className={styles.roomContainer}
>
<Checkbox
name={`rooms.${index}.checked`}
registerOptions={{
disabled: !roomDetail?.isCancelable,
disabled:
!roomDetail.isCancelable || roomDetail.isCancelled,
}}
>
<div className={styles.roomInfo}>
@@ -90,8 +101,11 @@ export function CancelStayConfirmation({
</div>
</>
)}
{getValues("rooms").some((room) => room.checked) && (
<CancelStayPriceContainer booking={booking} stayDetails={stayDetails} />
{watch("rooms").some((room) => room.checked) && (
<CancelStayPriceContainer
roomDetails={bookedRoom}
stayDetails={stayDetails}
/>
)}
</>
)

16
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/FinalConfirmation/index.tsx
View File

@@ -1,5 +1,7 @@
import { useIntl } from "react-intl"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import Body from "@/components/TempDesignSystem/Text/Body"
import CancelStayPriceContainer from "../CancelStayPriceContainer"
@@ -8,12 +10,11 @@ import styles from "../cancelStay.module.css"
import type { FinalConfirmationProps } from "@/types/components/hotelReservation/myStay/cancelStay"
export function FinalConfirmation({
booking,
stayDetails,
}: FinalConfirmationProps) {
export function FinalConfirmation({ stayDetails }: FinalConfirmationProps) {
const intl = useIntl()
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
return (
<>
<div className={styles.modalText}>
@@ -23,7 +24,12 @@ export function FinalConfirmation({
})}
</Body>
</div>
<CancelStayPriceContainer booking={booking} stayDetails={stayDetails} />
{bookedRoom && (
<CancelStayPriceContainer
roomDetails={bookedRoom}
stayDetails={stayDetails}
/>
)}
</>
)
}

107
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts
View File

@@ -1,8 +1,12 @@
import { useIntl } from "react-intl"
import { trpc } from "@/lib/trpc/client"
import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import {
type Room,
useMyStayRoomDetailsStore,
} from "@/stores/my-stay/myStayRoomDetailsStore"
import { useManageStayStore } from "@/components/HotelReservation/MyStay/stores/manageStayStore"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
import { trackCancelStay } from "@/utils/tracking"
@@ -13,14 +17,12 @@ import type {
} from "@/types/components/hotelReservation/myStay/cancelStay"
interface UseCancelStayProps extends Omit<CancelStayProps, "hotel"> {
getFormValues: () => CancelStayFormValues
checkedRooms: CancelStayFormValues["rooms"]
}
export default function useCancelStay({
booking,
setBookingStatus,
handleCloseModal,
getFormValues,
checkedRooms,
}: UseCancelStayProps) {
const intl = useIntl()
const lang = useLang()
@@ -28,12 +30,25 @@ export default function useCancelStay({
actions: { setIsLoading },
} = useManageStayStore()
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
const linkedReservationRooms = useMyStayRoomDetailsStore(
(state) => state.linkedReservationRooms
)
const updateBookedRoom = useMyStayRoomDetailsStore(
(state) => state.actions.updateBookedRoom
)
const updateLinkedReservationRoom = useMyStayRoomDetailsStore(
(state) => state.actions.updateLinkedReservationRoom
)
const cancelStay = trpc.booking.cancel.useMutation({
onMutate: () => setIsLoading(true),
})
async function handleCancelStay() {
if (!booking.confirmationNumber) {
if (!bookedRoom.confirmationNumber) {
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
@@ -45,61 +60,96 @@ export default function useCancelStay({
setIsLoading(true)
try {
const formValues = getFormValues()
const { rooms } = formValues
const checkedRooms = rooms.filter((room) => room.checked)
const results = []
const errors = []
for (const room of checkedRooms) {
const confirmationNumber =
room.confirmationNumber || booking.confirmationNumber
let targetRoom: Room | undefined
// Check if this is the main booked room
if (room.confirmationNumber === bookedRoom.confirmationNumber) {
targetRoom = bookedRoom
}
// Check if this is a linked reservation room
else {
targetRoom = linkedReservationRooms.find(
(r) => r.confirmationNumber === room.confirmationNumber
)
}
if (!targetRoom?.confirmationNumber) {
errors.push(room.confirmationNumber)
continue
}
try {
const result = await cancelStay.mutateAsync({
confirmationNumber: confirmationNumber,
const response = await cancelStay.mutateAsync({
confirmationNumber: targetRoom.confirmationNumber,
language: lang,
})
if (result) {
results.push(room.id)
if (response) {
results.push(room.confirmationNumber)
const cancelledRoom = response.rooms.find(
(r) => r.confirmationNumber === targetRoom?.confirmationNumber
)
if (cancelledRoom) {
if (
targetRoom.confirmationNumber === bookedRoom.confirmationNumber
) {
// Update main booked room
updateBookedRoom({
...bookedRoom,
isCancelled: true,
cancellationNumber: cancelledRoom.cancellationNumber,
})
} else {
// Update linked reservation room
updateLinkedReservationRoom({
...targetRoom,
isCancelled: true,
cancellationNumber: cancelledRoom.cancellationNumber,
})
}
trackCancelStay(
bookedRoom.hotelId,
cancelledRoom.confirmationNumber
)
}
} else {
errors.push(room.id)
errors.push(room.confirmationNumber)
}
} catch (error) {
console.error(
`Error cancelling room ${room.confirmationNumber}:`,
`Error cancelling room ${targetRoom.confirmationNumber}:`,
error
)
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
})
)
errors.push(room.id)
errors.push(room.confirmationNumber)
}
}
// Show appropriate toast based on results
if (results.length > 0 && errors.length === 0) {
setBookingStatus()
// All selected rooms cancelled successfully
toast.success(
intl.formatMessage(
{
id: "Your stay was cancelled. Cancellation cost: 0 {currency}. We're sorry to see that the plans didn't work out",
},
{ currency: booking.currencyCode }
{ currency: bookedRoom.currencyCode }
)
)
trackCancelStay(booking.hotelId, booking.confirmationNumber)
} else if (results.length > 0 && errors.length > 0) {
setBookingStatus()
// Some rooms cancelled, some failed
toast.warning(
intl.formatMessage({
id: "Some rooms were cancelled successfully, but we encountered issues with others. Please contact customer service for assistance.",
})
)
} else {
// No rooms cancelled successfully
toast.error(
intl.formatMessage({
id: "Something went wrong. Please try again later.",
@@ -115,6 +165,7 @@ export default function useCancelStay({
id: "Something went wrong. Please try again later.",
})
)
} finally {
setIsLoading(false)
}
}

47
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/index.tsx
View File

@@ -4,7 +4,9 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { useManageStayStore } from "@/components/HotelReservation/MyStay/stores/manageStayStore"
import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"
@@ -21,44 +23,38 @@ import {
import { MODAL_STEPS } from "@/types/components/hotelReservation/myStay/myStay"
import { AlertTypeEnum } from "@/types/enums/alert"
import type { Hotel } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
interface CancelStayProps {
booking: BookingConfirmation["booking"]
hotel: Hotel
setBookingStatus: () => void
}
export default function CancelStay({
booking,
hotel,
setBookingStatus,
}: CancelStayProps) {
export default function CancelStay({ hotel }: CancelStayProps) {
const intl = useIntl()
const lang = useLang()
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
const form = useForm<CancelStayFormValues>({
resolver: zodResolver(cancelStaySchema),
defaultValues: {
rooms: getDefaultRooms(booking),
rooms: getDefaultRooms(bookedRoom),
},
})
const {
currentStep,
isLoading,
actions: { handleForward, handleCloseView, handleCloseModal },
} = useManageStayStore()
const { rooms } = form.watch()
const { handleCancelStay } = useCancelStay({
booking,
setBookingStatus,
handleCloseModal,
getFormValues: form.getValues,
checkedRooms: rooms.filter((room) => room.checked),
})
const { mainRoom } = booking
const isFirstStep = currentStep === MODAL_STEPS.INITIAL
const stayDetails = formatStayDetails({ booking, lang, intl })
const stayDetails = formatStayDetails({ bookedRoom, lang, intl })
function getModalCopy() {
if (isFirstStep) {
@@ -77,19 +73,13 @@ export default function CancelStay({
}
function getModalContent() {
if (mainRoom && isFirstStep)
return (
<CancelStayConfirmation
hotel={hotel}
booking={booking}
stayDetails={stayDetails}
/>
)
if (bookedRoom && isFirstStep)
return <CancelStayConfirmation hotel={hotel} stayDetails={stayDetails} />
if (mainRoom && !isFirstStep)
return <FinalConfirmation booking={booking} stayDetails={stayDetails} />
if (bookedRoom && !isFirstStep)
return <FinalConfirmation stayDetails={stayDetails} />
if (!mainRoom && isFirstStep)
if (!bookedRoom && isFirstStep)
return (
<Alert
type={AlertTypeEnum.Info}
@@ -103,7 +93,6 @@ export default function CancelStay({
)
}
const { rooms } = form.watch()
const isFormValid = rooms?.some((room) => room.checked)
return (
@@ -113,7 +102,7 @@ export default function CancelStay({
content={getModalContent()}
onClose={handleCloseModal}
primaryAction={
mainRoom
bookedRoom
? {
label: getModalCopy().primaryLabel,
onClick: isFirstStep ? handleForward : handleCancelStay,

91
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/utils.ts
View File

@@ -1,14 +1,12 @@
import { useFormContext } from "react-hook-form"
import { dt } from "@/lib/dt"
import type { IntlShape } from "react-intl"
import type { CancelStayFormValues } from "@/types/components/hotelReservation/myStay/cancelStay"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
import type { Room } from "@/stores/my-stay/myStayRoomDetailsStore"
export function getDefaultRooms(booking: BookingConfirmation["booking"]) {
const { multiRoom, confirmationNumber, linkedReservations = [] } = booking
export function getDefaultRooms(room: Room) {
const { multiRoom, confirmationNumber, linkedReservations = [] } = room
if (!multiRoom) {
return [{ id: "1", checked: true, confirmationNumber }]
@@ -25,35 +23,43 @@ export function getDefaultRooms(booking: BookingConfirmation["booking"]) {
}
export function formatStayDetails({
booking,
bookedRoom,
lang,
intl,
}: {
booking: BookingConfirmation["booking"]
bookedRoom: Room
lang: string
intl: IntlShape
}) {
const { multiRoom } = booking
const totalAdults = multiRoom
? (booking.adults ?? 0) +
(booking.linkedReservations ?? []).reduce((acc, reservation) => {
return acc + (reservation.adults ?? 0)
}, 0)
: (booking.adults ?? 0)
const totalChildren = multiRoom
? booking.childrenAges?.length +
(booking.linkedReservations ?? []).reduce((acc, reservation) => {
return acc + reservation.children
}, 0)
: booking.childrenAges?.length
const {
multiRoom,
adults,
childrenAges,
linkedReservations,
checkInDate,
checkOutDate,
} = bookedRoom
const checkInDate = dt(booking.checkInDate)
const totalAdults = multiRoom
? linkedReservations.reduce((acc, reservation) => {
return acc + reservation.adults
}, adults)
: adults
const totalChildren = multiRoom
? linkedReservations.reduce((acc, reservation) => {
return acc + reservation.children
}, childrenAges.length)
: childrenAges.length
const checkInDateFormatted = dt(checkInDate)
.locale(lang)
.format("dddd D MMM YYYY")
const checkOutDate = dt(booking.checkOutDate)
const checkOutDateFormatted = dt(checkOutDate)
.locale(lang)
.format("dddd D MMM YYYY")
const diff = dt(checkOutDate).diff(checkInDate, "days")
const diff = dt(checkOutDate)
.startOf("day")
.diff(dt(checkInDate).startOf("day"), "days")
const nightsText = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
@@ -69,8 +75,8 @@ export function formatStayDetails({
)
return {
checkInDate,
checkOutDate,
checkInDate: checkInDateFormatted,
checkOutDate: checkOutDateFormatted,
nightsText,
adultsText,
childrenText,
@@ -79,31 +85,28 @@ export function formatStayDetails({
}
function getMatchedRooms(
booking: BookingConfirmation["booking"],
roomDetails: Room,
checkedConfirmationNumbers: string[]
) {
let matchedRooms = []
// Main booking
if (checkedConfirmationNumbers.includes(booking.confirmationNumber)) {
if (checkedConfirmationNumbers.includes(roomDetails.confirmationNumber)) {
matchedRooms.push({
adults: booking.adults ?? 0,
children: booking.childrenAges?.length ?? 0,
adults: roomDetails.adults,
children: roomDetails.childrenAges.length,
})
}
// Linked reservations
if (booking.linkedReservations) {
const matchedLinkedRooms = booking.linkedReservations
.filter((reservation) =>
checkedConfirmationNumbers.includes(reservation.confirmationNumber)
)
.map((reservation) => ({
adults: reservation.adults ?? 0,
children: reservation.children ?? 0,
}))
matchedRooms = [...matchedRooms, ...matchedLinkedRooms]
if (roomDetails.linkedReservations) {
roomDetails.linkedReservations.forEach((reservation) => {
if (checkedConfirmationNumbers.includes(reservation.confirmationNumber))
matchedRooms.push({
adults: reservation.adults,
children: reservation.children,
})
})
}
return matchedRooms
@@ -119,12 +122,10 @@ function calculateTotals(matchedRooms: { adults: number; children: number }[]) {
}
export const useCheckedRoomsCounts = (
booking: BookingConfirmation["booking"],
roomDetails: Room,
formRooms: CancelStayFormValues["rooms"],
intl: IntlShape
) => {
const { getValues } = useFormContext<CancelStayFormValues>()
const formRooms = getValues("rooms")
const checkedFormRooms = formRooms.filter((room) => room.checked)
const checkedConfirmationNumbers = checkedFormRooms
.map((room) => room.confirmationNumber)
@@ -133,7 +134,7 @@ export const useCheckedRoomsCounts = (
confirmationNumber !== null && confirmationNumber !== undefined
)
const matchedRooms = getMatchedRooms(booking, checkedConfirmationNumbers)
const matchedRooms = getMatchedRooms(roomDetails, checkedConfirmationNumbers)
const { totalAdults, totalChildren } = calculateTotals(matchedRooms)
const adultsText = intl.formatMessage(