diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css index 8d66a8e9c..4a4e86140 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css @@ -20,6 +20,14 @@ padding: var(--Space-x2); } +.refundPolicy { + color: var(--Text-Secondary); +} + +.pointsAvailable { + text-align: end; +} + .paymentInfo { display: flex; gap: var(--Space-x1); diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx index 51e54a358..eafd56de7 100755 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx @@ -2,7 +2,6 @@ import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod" -import { dt } from "@scandic-hotels/common/dt" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" import { Alert } from "@scandic-hotels/design-system/Alert" import { Divider } from "@scandic-hotels/design-system/Divider" @@ -15,7 +14,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow" import TermsAndConditions from "@/components/HotelReservation/MyStay/TermsAndConditions" -import useLang from "@/hooks/useLang" import { trackUpdatePaymentMethod } from "@/utils/tracking" import Summary from "../Summary" @@ -30,19 +28,15 @@ export default function ConfirmationStep({ error, }: ConfirmationStepProps) { const intl = useIntl() - const lang = useLang() - const { checkInDate, guaranteeInfo, selectedAncillary, booking } = - useAddAncillaryStore((state) => ({ + const { guaranteeInfo, selectedAncillary, booking } = useAddAncillaryStore( + (state) => ({ checkInDate: state.booking.checkInDate, guaranteeInfo: state.booking.guaranteeInfo, selectedAncillary: state.selectedAncillary, booking: state.booking, - })) - const refundableDate = dt(checkInDate) - .subtract(1, "day") - .locale(lang) - .format("23:59, dddd, D MMMM YYYY") + }) + ) const mustBeGuaranteed = !guaranteeInfo && booking.isGuaranteeable const quantityWithCard = useWatch({ name: "quantityWithCard" }) @@ -99,7 +93,7 @@ export default function ConfirmationStep({ -

+

{intl.formatMessage( { id: "addAncillary.confirmationStep.pointsAvailable", @@ -112,7 +106,7 @@ export default function ConfirmationStep({ )} - {!!quantityWithCard && ( + {!!quantityWithCard ? ( <>

@@ -123,15 +117,12 @@ export default function ConfirmationStep({

-

- {intl.formatMessage( - { - id: "addAncillary.confirmationStep.refundPolicy", - defaultMessage: - "All ancillaries are fully refundable until {date}. Time selection and special requests are also modifiable.", - }, - { date: refundableDate } - )} +

+ {intl.formatMessage({ + id: "addAncillary.confirmationStep.refundPolicyNightBefore", + defaultMessage: + "All extras can be cancelled until 23:59 the night before arrival. Time selection and special requests can also be modified.", + })}

@@ -171,6 +162,7 @@ export default function ConfirmationStep({ )} - {savedCreditCards && } + {!!savedCreditCards?.length && } ({ ...card, @@ -224,6 +216,16 @@ export default function ConfirmationStep({ )}
+ ) : ( + +

+ {intl.formatMessage({ + id: "addAncillary.confirmationStep.refundPolicyNightBefore", + defaultMessage: + "All extras can be cancelled until 23:59 the night before arrival. Time selection and special requests can also be modified.", + })} +

+
)} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css index 030f871b6..fdfd4f023 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css @@ -5,10 +5,6 @@ overflow-y: auto; } -.form::-webkit-scrollbar { - display: none; -} - .modalScrollable { display: flex; flex-direction: column; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/mapToPrice.ts b/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/mapToPrice.ts index e9c2b75bd..2aaffa0f6 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/mapToPrice.ts +++ b/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/mapToPrice.ts @@ -110,6 +110,18 @@ export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) { } } break + case PriceTypeEnum.money: + { + if (room.totalPoints) { + total.local.additionalPrice = + (total.local.additionalPrice || 0) + room.totalPoints + } + + if (!total.local.additionalPriceCurrency) { + total.local.additionalPriceCurrency = CurrencyEnum.POINTS + } + } + break } return total diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx index 80c63dcf3..2b394e9a3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx @@ -64,8 +64,9 @@ export function ConfirmBookingPaymentOptions({ {savedCreditCards.map((savedCreditCard) => ( ) : null} ( {label} - {cardNumber ? ( - <> +
+ {cardNumber && ( {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} •••• {cardNumber} - - ) : ( - - )} + )} + +
)} diff --git a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx index 9c0546747..7bd5b0290 100644 --- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx +++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx @@ -22,15 +22,21 @@ export const Default: Story = { onChange: fn(), children: ( <> - + ), diff --git a/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css index b9d437035..84ec39b00 100644 --- a/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css +++ b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css @@ -11,6 +11,12 @@ cursor: pointer; } +.cardContainer { + display: flex; + gap: var(--Space-x15); + align-items: center; +} + .paymentOption.focused { outline: 2px solid var(--UI-Input-Controls-Border-Focus); outline-offset: 2px; diff --git a/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx b/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx index 8219bb014..e501c9368 100644 --- a/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx +++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx @@ -9,7 +9,7 @@ import styles from './selectPaymentMethod.module.css' import { PAYMENT_METHOD_TITLES, - type PaymentMethodEnum, + PaymentMethodEnum, } from '@scandic-hotels/common/constants/paymentMethod' type PaymentMethod = { @@ -79,8 +79,9 @@ export function SelectPaymentMethod({ return ( @@ -90,7 +91,8 @@ export function SelectPaymentMethod({ {otherCardLabel}