From 707077058159feaf4f4d4c8aea88990bf76e899f Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Wed, 30 Apr 2025 08:20:57 +0000 Subject: [PATCH] Merged in fix/SW-2406-update-modal-ancillaries (pull request #1911) fix(SW-2406): update modal for ancillaries * fix(SW-2406): update modal for ancillaries * fix(SW-2406): revert translations Approved-by: Niclas Edenvin Approved-by: Erik Tiekstra --- .../ActionButtons/actionButtons.module.css | 2 +- .../ActionButtons/index.tsx | 4 +- .../deliveryDetailsStep.module.css | 12 +++--- .../Steps/DeliveryDetailsStep/index.tsx | 37 +++++++++-------- .../Steps/SelectQuantityStep/index.tsx | 37 +++++++++-------- .../selectQuantityStep.module.css | 12 +++++- .../addAncillaryFlowModal.module.css | 30 +------------- .../AddAncillaryFlowModal/index.tsx | 41 ++++++++----------- .../stores/my-stay/add-ancillary-flow.ts | 18 ++++++++ 9 files changed, 98 insertions(+), 95 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css index 586db5f10..875ee841b 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css @@ -2,7 +2,7 @@ display: flex; gap: var(--Spacing-x4); justify-content: flex-end; - padding: var(--Space-x15) var(--Space-x15) 0; + padding: var(--Space-x2) var(--Space-x15) 0; } .confirmButtons { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx index 70dd9ac68..892548b18 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx @@ -26,6 +26,7 @@ export default function ActionButtons({ const { currentStep, prevStep, + prevStepMobile, selectQuantity, selectDeliveryTime, selectQuantityAndDeliveryTime, @@ -33,6 +34,7 @@ export default function ActionButtons({ } = useAddAncillaryStore((state) => ({ currentStep: state.currentStep, prevStep: state.prevStep, + prevStepMobile: state.prevStepMobile, selectQuantity: state.selectQuantity, selectDeliveryTime: state.selectDeliveryTime, selectQuantityAndDeliveryTime: state.selectQuantityAndDeliveryTime, @@ -116,7 +118,7 @@ export default function ActionButtons({ variant="Text" size="Small" color="Primary" - onPress={prevStep} + onPress={isMobile ? prevStepMobile : prevStep} > {intl.formatMessage({ defaultMessage: "Back", diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css index 22f789574..d81e7a017 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css @@ -1,15 +1,15 @@ .selectContainer { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - margin-bottom: var(--Spacing-x2); + gap: var(--Space-x2); + padding: var(--Space-x3); + margin-bottom: var(--Space-x05); + background-color: var(--Base-Background-Primary-Normal); + border-radius: var(--Corner-radius-Medium); } .select { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: var(--Spacing-x2) var(--Spacing-x3); - background-color: var(--Base-Background-Primary-Normal); - border-radius: var(--Corner-radius-Medium); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx index 78b1a0c28..ac2a43ebf 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx @@ -1,11 +1,10 @@ import { useIntl } from "react-intl" +import { Typography } from "@scandic-hotels/design-system/Typography" + import { generateDeliveryOptions } from "@/components/HotelReservation/MyStay/utils/ancillaries" import Input from "@/components/TempDesignSystem/Form/Input" import Select from "@/components/TempDesignSystem/Form/Select" -import Body from "@/components/TempDesignSystem/Text/Body" -import Caption from "@/components/TempDesignSystem/Text/Caption" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./deliveryDetailsStep.module.css" @@ -16,11 +15,13 @@ export default function DeliveryMethodStep() { return (
- - {intl.formatMessage({ - defaultMessage: "Delivered at:", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Delivered at:", + })} +

+ - - {intl.formatMessage({ - defaultMessage: "Optional", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Optional", + })} +

+
) diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx index f8c77c7aa..9c3b40b7a 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx @@ -50,20 +50,12 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) { const insufficientPoints = currentPoints < pointsCost || currentPoints === 0 - const pointsLabel = insufficientPoints - ? intl.formatMessage({ - defaultMessage: "Insufficient points", - }) - : intl.formatMessage({ - defaultMessage: "Select quantity", - }) - return (
{selectedAncillary?.points && user && (
-

+

{intl.formatMessage({ defaultMessage: "Pay with points", })} @@ -84,18 +76,29 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {

{currentPoints}

- + )}
)}
-

+

{ /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */ " " diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css index ea091a1db..e75529584 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: var(--Space-x025); - margin-bottom: var(--Space-x2); } .select { @@ -15,6 +14,14 @@ margin-bottom: var(--Spacing-x1); } +.selectTitle { + margin-bottom: var(--Space-x1); +} + +.insufficientPoints { + color: var(--Text-Tertiary); +} + .totalPointsContainer { display: flex; justify-content: space-between; @@ -73,6 +80,9 @@ display: none; } @media screen and (min-width: 768px) { + .select { + margin-bottom: 0; + } .icon { display: block; } 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 c44e24fb6..a746d0fff 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 @@ -3,6 +3,7 @@ flex-direction: column; max-height: 70dvh; width: 100%; + margin-top: var(--Space-x3); } .form { @@ -19,22 +20,6 @@ .modalScrollable { display: flex; flex-direction: column; - margin-bottom: var(--Spacing-x2); -} - -.imageContainer { - position: relative; - width: 100%; - aspect-ratio: 16 / 9; - border-radius: var(--Corner-radius-Medium); - overflow: hidden; - margin-top: var(--Spacing-x1); - flex-shrink: 0; - margin-bottom: var(--Spacing-x3); -} - -.image { - object-fit: cover; } .price { @@ -52,12 +37,10 @@ display: flex; flex-direction: column; justify-content: space-between; - position: sticky; border-radius: var(--Corner-radius-Medium); - bottom: 0; - z-index: 10; background: var(--Surface-Primary-OnSurface-Default); padding-bottom: var(--Space-x15); + margin-top: var(--Space-x2); } .description { @@ -65,15 +48,6 @@ margin: var(--Spacing-x2) 0; } -.actionButtons { - position: sticky; - bottom: 0; - z-index: 10; - background: var(--UI-Opacity-White-100); - border-top: 1px solid var(--Base-Border-Normal); - padding-bottom: var(--Space-x025); -} - .pointsDivider { display: flex; gap: var(--Space-x2); diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx index 24e33713d..51510f14e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx @@ -26,7 +26,6 @@ import { getAncillarySessionData, setAncillarySessionData, } from "@/components/HotelReservation/MyStay/utils/ancillaries" -import Image from "@/components/Image" import LoadingSpinner from "@/components/LoadingSpinner" import Modal from "@/components/Modal" import Divider from "@/components/TempDesignSystem/Divider" @@ -351,14 +350,6 @@ export default function AddAncillaryFlowModal({
{selectedAncillary && ( <> -
- {selectedAncillary.title} -
{currentStep !== AncillaryStepEnum.confirmation && (
@@ -409,24 +400,24 @@ export default function AddAncillaryFlowModal({ )} + {currentStep === AncillaryStepEnum.selectAncillary ? null : ( +
+ + +
+ )}
- {currentStep === AncillaryStepEnum.selectAncillary ? null : ( -
- - -
- )}
diff --git a/apps/scandic-web/stores/my-stay/add-ancillary-flow.ts b/apps/scandic-web/stores/my-stay/add-ancillary-flow.ts index a2724988f..e079dbc6b 100644 --- a/apps/scandic-web/stores/my-stay/add-ancillary-flow.ts +++ b/apps/scandic-web/stores/my-stay/add-ancillary-flow.ts @@ -52,6 +52,7 @@ export interface AddAncillaryState { openModal: () => void closeModal: () => void prevStep: () => void + prevStepMobile: () => void breakfastData: BreakfastData | null setBreakfastData: (breakfastData: BreakfastData | null) => void isBreakfast: boolean @@ -194,6 +195,23 @@ export const createAddAncillaryStore = ( } }) ), + prevStepMobile: () => + set( + produce((state: AddAncillaryState) => { + if (state.currentStep === AncillaryStepEnum.selectQuantity) { + state.isOpen = false + clearAncillarySessionData() + state.selectedAncillary = null + state.steps = steps + } else { + if (state.currentStep === AncillaryStepEnum.confirmation) { + state.currentStep = AncillaryStepEnum.selectQuantity + } else { + state.currentStep = state.currentStep - 1 + } + } + }) + ), selectAncillary: (ancillary) => set( produce((state: AddAncillaryState) => {