Merged in feat/SW-1437-price-change-scenario (pull request #1532)

Feat/SW-1437 price change scenario

* wip price change scenario

* feat(SW-1437): added updated room prices to summary

* fix: spinner not centered on page

* fix: feedback fixes


Approved-by: Arvid Norlin
Approved-by: Simon.Emanuelsson

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/layout.module.css

@@ -1,3 +1,4 @@
 .layout {
   background-color: var(--Base-Background-Primary-Normal);
+  min-height: 100dvh;
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx

@@ -56,5 +56,5 @@ export default function PaymentCallback({
     }
   }, [returnUrl, router, searchObject, status, errorMessage])
 
-  return <LoadingSpinner />
+  return <LoadingSpinner fullPage />
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -51,7 +51,10 @@ import { type PaymentFormData, paymentSchema } from "./schema"
 
 import styles from "./payment.module.css"
 
-import type { PaymentClientProps } from "@/types/components/hotelReservation/enterDetails/payment"
+import type {
+  PaymentClientProps,
+  PriceChangeData,
+} from "@/types/components/hotelReservation/enterDetails/payment"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 
 const maxRetries = 15
@@ -97,10 +100,8 @@ export default function PaymentClient({
 
   const availablePaymentOptions =
     useAvailablePaymentOptions(otherPaymentOptions)
-  const [priceChangeData, setPriceChangeData] = useState<{
+  const [priceChangeData, setPriceChangeData] =
-    oldPrice: number
+    useState<PriceChangeData | null>(null)
-    newPrice: number
-  } | null>()
 
   const { toDate, fromDate, hotelId } = booking
 
@@ -143,15 +144,12 @@ export default function PaymentClient({
 
         setBookingNumber(result.id)
 
-        const priceChange = result.rooms.find(
+        const hasPriceChange = result.rooms.some((r) => r.priceChangedMetadata)
-          (r) => r.priceChangedMetadata
+        if (hasPriceChange) {
-        )?.priceChangedMetadata
+          const priceChangeData = result.rooms.map(
-
+            (room) => room.priceChangedMetadata || null
-        if (priceChange) {
+          )
-          setPriceChangeData({
+          setPriceChangeData(priceChangeData)
-            oldPrice: rooms[0].room.roomPrice.perStay.local.price,
-            newPrice: priceChange.totalPrice,
-          })
         } else {
           setIsPollingForBookingStatus(true)
         }
@@ -172,7 +170,6 @@ export default function PaymentClient({
       } else {
         handlePaymentError("No confirmation number")
       }
-
       setPriceChangeData(null)
     },
     onError: (error) => {
@@ -518,8 +515,8 @@ export default function PaymentClient({
       {priceChangeData ? (
         <PriceChangeDialog
           isOpen={!!priceChangeData}
-          oldPrice={priceChangeData.oldPrice}
+          priceChangeData={priceChangeData}
-          newPrice={priceChangeData.newPrice}
+          prevTotalPrice={totalPrice.local.price}
           currency={totalPrice.local.currency}
           onCancel={() => {
             const allSearchParams = searchParams.size

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/helpers.ts

@@ -14,8 +14,11 @@ export function hasPrepaidRate({ room }: RoomState): boolean {
   return !room.isFlexRate
 }
 
-export function calculateTotalRoomPrice({ room }: RoomState) {
+export function calculateTotalRoomPrice(
-  let totalPrice = room.roomPrice.perStay.local.price
+  { room }: RoomState,
+  initialRoomPrice?: number
+) {
+  let totalPrice = initialRoomPrice ?? room.roomPrice.perStay.local.price
 
   if (room.breakfast) {
     totalPrice += Number(room.breakfast.localPrice.totalPrice) * room.adults

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import { useState, Fragment } from "react"
+import {
+  Dialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./priceChangeSummary.module.css"
+
+import type { RoomState } from "@/types/stores/enter-details"
+
+interface PriceChangeSummaryProps {
+  rooms: RoomState[]
+  roomPrices: { prevPrice: number; newPrice?: number }[]
+  newTotalPrice: { price: number; currency: string }
+  onAccept: () => void
+  onCancel: () => void
+}
+
+export default function PriceChangeSummary({
+  rooms,
+  roomPrices,
+  newTotalPrice,
+  onAccept,
+  onCancel,
+}: PriceChangeSummaryProps) {
+  const intl = useIntl()
+  const [isOpen, toggleOpen] = useState(false)
+
+  return (
+    <DialogTrigger>
+      <Button
+        intent="text"
+        size="small"
+        theme="base"
+        variant="icon"
+        wrapping
+        onClick={() => toggleOpen((isOpen) => !isOpen)}
+      >
+        {intl.formatMessage({ id: "See price details" })}
+        <ChevronRightSmallIcon />
+      </Button>
+      <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
+        <Modal>
+          <Dialog className={styles.dialog}>
+            {({ close }) => (
+              <div className={styles.content}>
+                <header className={styles.header}>
+                  <Subtitle>
+                    {intl.formatMessage({ id: "Price details" })}
+                  </Subtitle>
+                  <Button
+                    onPress={close}
+                    variant="clean"
+                    className={styles.closeButton}
+                  >
+                    <CloseLargeIcon height={20} width={20} />
+                  </Button>
+                </header>
+                <section>
+                  <div>
+                    {rooms.map(({ room }, idx) => {
+                      const roomNumber = idx + 1
+                      const newPrice = roomPrices[idx].newPrice
+
+                      return (
+                        <Fragment key={idx}>
+                          <div className={styles.rowContainer}>
+                            <Body textTransform="bold">
+                              {rooms.length > 1
+                                ? intl.formatMessage(
+                                    { id: "Room {roomIndex}" },
+                                    { roomIndex: roomNumber }
+                                  )
+                                : intl.formatMessage({ id: "Room" })}
+                            </Body>
+                            <Body>{room.roomType}</Body>
+                            <div className={styles.priceRow}>
+                              <Caption color="uiTextMediumContrast">
+                                {intl.formatMessage({ id: "Room charge" })}
+                              </Caption>
+                              {newPrice ? (
+                                <div className={styles.updatedPrice}>
+                                  <Caption color="uiTextMediumContrast" striked>
+                                    {formatPrice(
+                                      intl,
+                                      room.roomPrice.perStay.local.price,
+                                      room.roomPrice.perStay.local.currency
+                                    )}
+                                  </Caption>
+                                  <Body
+                                    color="uiTextMediumContrast"
+                                    textTransform="bold"
+                                  >
+                                    {formatPrice(
+                                      intl,
+                                      newPrice,
+                                      room.roomPrice.perStay.local.currency
+                                    )}
+                                  </Body>
+                                </div>
+                              ) : (
+                                <Caption color="uiTextMediumContrast">
+                                  {formatPrice(
+                                    intl,
+                                    room.roomPrice.perStay.local.price,
+                                    room.roomPrice.perStay.local.currency
+                                  )}
+                                </Caption>
+                              )}
+                            </div>
+                            {room.breakfast && (
+                              <div className={styles.priceRow}>
+                                <Caption color="uiTextMediumContrast">
+                                  {intl.formatMessage({
+                                    id: "Breakfast charge",
+                                  })}
+                                </Caption>
+                                <Caption color="uiTextMediumContrast">
+                                  {formatPrice(
+                                    intl,
+                                    Number(
+                                      room.breakfast.localPrice.totalPrice
+                                    ),
+                                    room.breakfast.localPrice.currency
+                                  )}
+                                </Caption>
+                              </div>
+                            )}
+                            {room.roomFeatures?.map((feature) => (
+                              <div
+                                className={styles.priceRow}
+                                key={feature.itemCode}
+                              >
+                                <Caption color="uiTextMediumContrast">
+                                  {feature.description}
+                                </Caption>
+                                <Caption color="uiTextMediumContrast">
+                                  {formatPrice(
+                                    intl,
+                                    Number(feature.localPrice.totalPrice),
+                                    feature.localPrice.currency
+                                  )}
+                                </Caption>
+                              </div>
+                            ))}
+                          </div>
+                          <Divider color="primaryLightSubtle" />
+                        </Fragment>
+                      )
+                    })}
+                  </div>
+                  <div className={styles.rowContainer}>
+                    <Body>{intl.formatMessage({ id: "Total" })}</Body>
+                    <div className={styles.priceRow}>
+                      <Body textTransform="bold">
+                        {intl.formatMessage({ id: "Price including VAT" })}
+                      </Body>
+                      <Body textTransform="bold">
+                        {formatPrice(
+                          intl,
+                          newTotalPrice.price,
+                          newTotalPrice.currency
+                        )}
+                      </Body>
+                    </div>
+                  </div>
+                </section>
+                <footer className={styles.footer}>
+                  <Button intent="secondary" onClick={onCancel}>
+                    {intl.formatMessage({ id: "Back to select room" })}
+                  </Button>
+                  <Button onClick={onAccept}>
+                    {intl.formatMessage({ id: "Continue with new price" })}
+                  </Button>
+                </footer>
+              </div>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css

@@ -0,0 +1,96 @@
+.dialog {
+  position: fixed;
+  inset: 0;
+  width: 100dvw;
+  height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
+  z-index: 200;
+  overflow: auto;
+
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  padding: var(--Spacing-x4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}
+
+.closeButton {
+  position: absolute;
+  top: var(--Spacing-x4);
+  right: var(--Spacing-x4);
+}
+
+.roomsSection {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.rowContainer {
+  padding: var(--Spacing-x2) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.roomContainer:first-child {
+  padding-top: 0;
+}
+
+.roomContainer:last-child {
+  padding-bottom: 0;
+}
+
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+}
+
+.updatedPrice {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  gap: var(--Spacing-x2);
+  padding-top: var(--Spacing-x6);
+  margin-top: auto;
+}
+
+@media screen and (min-width: 1367px) {
+  .dialog {
+    padding: var(--Spacing-x6);
+    align-items: center;
+  }
+
+  .header {
+    justify-content: flex-start;
+  }
+
+  .content {
+    width: 512px;
+    height: fit-content;
+    padding: 0;
+  }
+
+  .footer {
+    flex-direction: row;
+    padding: var(--Spacing-x6) 0;
+  }
+}

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -1,26 +1,68 @@
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { InfoCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import styles from "./priceChangeDialog.module.css"
+import { calculateTotalRoomPrice } from "../Payment/helpers"
+import PriceChangeSummary from "./PriceChangeSummary"
 
-import type { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"
+import styles from "./priceChangeDialog.module.css"
+import { PriceChangeData } from "@/types/components/hotelReservation/enterDetails/payment"
+
+type PriceDetailsState = {
+  newTotalPrice: number
+  roomPrices: { prevPrice: number; newPrice?: number }[]
+}
+
+type PriceChangeDialogProps = {
+  isOpen: boolean
+  priceChangeData: PriceChangeData
+  prevTotalPrice: number
+  currency: string
+  onCancel: () => void
+  onAccept: () => void
+}
 
 export default function PriceChangeDialog({
   isOpen,
-  oldPrice,
+  priceChangeData,
-  newPrice,
+  prevTotalPrice,
   currency,
   onCancel,
   onAccept,
 }: PriceChangeDialogProps) {
   const intl = useIntl()
-  const title = intl.formatMessage({ id: "The price has increased" })
+  const title = intl.formatMessage({ id: "Price change" })
+  const rooms = useEnterDetailsStore((state) => state.rooms)
+
+  const { newTotalPrice, roomPrices } = rooms.reduce<PriceDetailsState>(
+    (acc, room, idx) => {
+      const roomPrice = room.room.roomPrice.perStay.local.price
+      const priceChange = priceChangeData[idx]
+
+      const { totalPrice } = calculateTotalRoomPrice(
+        room,
+        priceChange?.roomPrice
+      )
+      acc.newTotalPrice += totalPrice
+
+      acc.roomPrices.push({
+        prevPrice: roomPrice,
+        newPrice: priceChange?.roomPrice,
+      })
+
+      return acc
+    },
+    { newTotalPrice: 0, roomPrices: [] }
+  )
 
   return (
     <ModalOverlay
@@ -37,34 +79,46 @@ export default function PriceChangeDialog({
                 level="h1"
                 as="h3"
                 textAlign="center"
-                textTransform="regular"
+                textTransform="uppercase"
               >
                 {title}
               </Title>
             </div>
             <Body textAlign="center">
-              {intl.formatMessage({
+              {intl.formatMessage(
-                id: "The price has increased since you selected your room.",
+                {
-              })}
+                  id: "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.",
-              <br />
+                },
-              {intl.formatMessage({
+                { totalRooms: rooms.length, br: <br /> }
-                id: "You can still book the room but you need to confirm that you accept the new price",
+              )}
-              })}
-              <br />
-              <span className={styles.oldPrice}>
-                {formatPrice(intl, oldPrice, currency)}
-              </span>
-              <strong className={styles.newPrice}>
-                {formatPrice(intl, newPrice, currency)}
-              </strong>
             </Body>
+            <div>
+              <Subtitle textAlign="center" color="burgundy">
+                {intl.formatMessage({ id: "New total" })}
+              </Subtitle>
+              <div className={styles.prices}>
+                <Caption striked>
+                  {formatPrice(intl, prevTotalPrice, currency)}
+                </Caption>
+                <Body textAlign="center" textTransform="bold">
+                  {formatPrice(intl, newTotalPrice, currency)}
+                </Body>
+              </div>
+            </div>
+            <PriceChangeSummary
+              rooms={rooms}
+              roomPrices={roomPrices}
+              newTotalPrice={{ price: newTotalPrice, currency }}
+              onAccept={onAccept}
+              onCancel={onCancel}
+            />
           </header>
           <footer className={styles.footer}>
             <Button intent="secondary" onClick={onCancel}>
-              {intl.formatMessage({ id: "Cancel" })}
+              {intl.formatMessage({ id: "Back to select room" })}
             </Button>
             <Button onClick={onAccept}>
-              {intl.formatMessage({ id: "Accept new price" })}
+              {intl.formatMessage({ id: "Continue with new price" })}
             </Button>
           </footer>
         </Dialog>

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -19,17 +19,19 @@
 }
 
 .overlay {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  height: var(--visual-viewport-height);
-  justify-content: center;
-  left: 0;
   position: fixed;
+  left: 0;
   top: 0;
-  width: 100vw;
+  width: 100%;
   z-index: 100;
 
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  background: var(--Overlay-60);
+  height: var(--visual-viewport-height);
+
   &[data-entering] {
     animation: modal-fade 200ms;
   }
@@ -50,12 +52,15 @@
 
 .dialog {
   background-color: var(--Scandic-Brand-Pale-Peach);
-  border-radius: var(--Corner-radius-Medium);
+  border-top-left-radius: var(--Corner-radius-Medium);
+  border-top-right-radius: var(--Corner-radius-Medium);
+
   box-shadow: var(--modal-box-shadow);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x4);
   padding: var(--Spacing-x5) var(--Spacing-x4);
+  width: 100dvw;
 }
 
 .header {
@@ -68,18 +73,40 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: var(--Spacing-x1);
 }
 
 .footer {
   display: flex;
+  flex-direction: column-reverse;
   justify-content: center;
   gap: var(--Spacing-x2);
 }
 
-.oldPrice {
+.modal .prices {
-  text-decoration: line-through;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Spacing-x-half);
+  padding-top: var(--Spacing-x-half);
 }
 
-.newPrice {
+@media screen and (min-width: 1367px) {
-  font-size: 1.2em;
+  .overlay {
+    align-items: center;
+  }
+
+  .dialog {
+    border-radius: var(--Corner-radius-Medium);
+    padding: var(--Spacing-x6);
+    width: fit-content;
+  }
+
+  .content {
+    width: 512px;
+  }
+
+  .footer {
+    flex-direction: row;
+  }
 }

apps/scandic-web/i18n/dictionaries/da.json

@@ -78,6 +78,7 @@
   "Away from elevator": "Væk fra elevator",
   "Back": "Tilbage",
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
+  "Back to select room": "Tilbage til at vælge værelse",
   "Back to top": "Tilbage til top",
   "Bar": "Bar",
   "Based on availability": "Baseret på tilgængelighed",
@@ -183,6 +184,7 @@
   "Contact us": "Kontakt os",
   "Continue": "Blive ved",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Fortsæt med ny pris",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Kunne ikke finde den anmodede ressource",
@@ -464,6 +466,7 @@
   "Nearby": "I nærheden",
   "Nearby companies": "Nærliggende virksomheder",
   "New password": "Nyt kodeord",
+  "New total": "Ny total",
   "Next": "Næste",
   "Nightlife": "Natteliv",
   "Nights needed to level up": "Nætter nødvendige for at komme i niveau",
@@ -555,6 +558,7 @@
   "Previous victories": "Tidligere sejre",
   "Price": "Pris",
   "Price 0,16 €/min + local call charges": "Pris 0,16 €/min + lokale opkaldstakster",
+  "Price change": "Prisændring",
   "Price details": "Prisoplysninger",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "Pris ekskl. moms",
@@ -564,10 +568,11 @@
   "Price per day": "Pris per dag",
   "Price per night": "Pris per nat",
   "Prices": "Priser",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Priserne er steget siden du valgte dit {totalRooms, plural, one {værelse} other {værelser}}.{br} For at fortsætte din booking, accepter den opdaterede pris,{br} eller gå tilbage for at vælge {totalRooms, plural, one {et nyt værelse} other {nya værelser}}.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Fortsæt til login",
   "Proceed to payment": "Fortsæt til betalingsmetode",
-  "Proceed to payment method": "Proceed to payment method",
+  "Proceed to payment method": "Gå videre til betalingsmetode",
   "Promo code": "Promo code",
   "Provide a payment card in the next step": "Giv os dine betalingsoplysninger i næste skridt",
   "Public price from": "Offentlig pris fra",
@@ -627,6 +632,7 @@
   "See hotel information": "Se hoteloplysninger",
   "See map": "Vis kort",
   "See on map": "Se på kort",
+  "See price details": "Se prisdetaljer",
   "See results ({ count })": "Se resultater ({ count })",
   "See room details": "Se værelsesdetaljer",
   "See rooms": "Se værelser",
@@ -896,5 +902,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{number} m²",
   "{value} points": "{value} point",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle rettigheder forbeholdes"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle rettigheder forbeholdes",
+  "Room": "Værelse"
 }

apps/scandic-web/i18n/dictionaries/de.json

@@ -79,6 +79,7 @@
   "Away from elevator": "Weg vom Aufzug",
   "Back": "Zurück",
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
+  "Back to select room": "Zurück zur Zimmerauswahl",
   "Back to top": "Zurück zur Spitze",
   "Bar": "Bar",
   "Based on availability": "Je nach Verfügbarkeit",
@@ -184,6 +185,7 @@
   "Contact us": "Kontaktieren Sie uns",
   "Continue": "Weitermachen",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Mit neuer Preis fortsetzen",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Die angeforderte Ressource konnte nicht gefunden werden.",
@@ -465,6 +467,7 @@
   "Nearby": "In der Nähe",
   "Nearby companies": "Nahe gelegene Unternehmen",
   "New password": "Neues Kennwort",
+  "New total": "Neue Gesamt",
   "Next": "Nächste",
   "Nightlife": "Nachtleben",
   "Nights needed to level up": "Nächte, die zum Levelaufstieg benötigt werden",
@@ -554,6 +557,7 @@
   "Previous victories": "Bisherige Siege",
   "Price": "Preis",
   "Price 0,16 €/min + local call charges": "Preis 0,16 €/Min. + Ortsgesprächsgebühren",
+  "Price change": "Preisänderung",
   "Price details": "Preisdetails",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "Preis ohne MwSt.",
@@ -563,10 +567,11 @@
   "Price per day": "Preis pro Tag",
   "Price per night": "Preis pro Nacht",
   "Prices": "Preise",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Die Preise haben sich seitdem erhöht, dass Sie Ihr {totalRooms, plural, one {Zimmer} other {Zimmer}} ausgewählt haben.{br} Um Ihre Buchung fortzusetzen, akzeptieren Sie den aktualisierten Preis,{br} oder gehen Sie zurück, um {totalRooms, plural, one {ein neues Zimmer} other {neue Zimmer}} auszuwählen.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Weiter zum Login",
   "Proceed to payment": "Weiter zur Zahlungsmethode",
-  "Proceed to payment method": "Proceed to payment method",
+  "Proceed to payment method": "Zum Zahlungsmethode wechseln",
   "Promo code": "Promo code",
   "Provide a payment card in the next step": "Geben Sie Ihre Zahlungskarteninformationen im nächsten Schritt an",
   "Public price from": "Öffentlicher Preis ab",
@@ -626,6 +631,7 @@
   "See hotel information": "Siehe Hotelinformationen",
   "See map": "Karte anzeigen",
   "See on map": "Karte ansehen",
+  "See price details": "Preisdetails ansehen",
   "See results ({ count })": "Ergebnisse anzeigen ({ count })",
   "See room details": "Zimmerdetails ansehen",
   "See rooms": "Zimmer ansehen",
@@ -894,5 +900,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{number} m²",
   "{value} points": "{value} punkte",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle Rechte vorbehalten"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle Rechte vorbehalten",
+  "Room": "Zimmer"
 }

apps/scandic-web/i18n/dictionaries/en.json

@@ -77,6 +77,7 @@
   "Away from elevator": "Away from elevator",
   "Back": "Back",
   "Back to scandichotels.com": "Back to scandichotels.com",
+  "Back to select room": "Back to select room",
   "Back to top": "Back to top",
   "Bar": "Bar",
   "Based on availability": "Based on availability",
@@ -182,6 +183,7 @@
   "Contact us": "Contact us",
   "Continue": "Continue",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Continue with new price",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Could not find requested resource",
@@ -463,6 +465,7 @@
   "Nearby": "Nearby",
   "Nearby companies": "Nearby companies",
   "New password": "New password",
+  "New total": "New total",
   "Next": "Next",
   "Nightlife": "Nightlife",
   "Nights needed to level up": "Nights needed to level up",
@@ -553,6 +556,7 @@
   "Previous victories": "Previous victories",
   "Price": "Price",
   "Price 0,16 €/min + local call charges": "Price 0,16 €/min + local call charges",
+  "Price change": "Price change",
   "Price details": "Price details",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "Price excluding VAT",
@@ -562,6 +566,7 @@
   "Price per day": "Price per day",
   "Price per night": "Price per night",
   "Prices": "Prices",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Proceed to login",
   "Proceed to payment": "Proceed to payment",
@@ -625,6 +630,7 @@
   "See hotel information": "See hotel information",
   "See map": "See map",
   "See on map": "See on map",
+  "See price details": "See price details",
   "See results ({ count })": "See results ({ count })",
   "See room details": "See room details",
   "See rooms": "See rooms",
@@ -889,5 +895,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{value} m²",
   "{value} points": "{value} points",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB All rights reserved"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB All rights reserved",
+  "Room": "Room"
 }

apps/scandic-web/i18n/dictionaries/fi.json

@@ -77,6 +77,7 @@
   "Away from elevator": "Kaukana hissistä",
   "Back": "Takaisin",
   "Back to scandichotels.com": "Takaisin scandichotels.com",
+  "Back to select room": "Palaa huoneen valintaan",
   "Back to top": "Takaisin ylös",
   "Bar": "Bar",
   "Based on availability": "Saatavuuden mukaan",
@@ -183,6 +184,7 @@
   "Contact us": "Ota meihin yhteyttä",
   "Continue": "Jatkaa",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Jatka uudella hinnalla",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Pyydettyä resurssia ei löytynyt",
@@ -464,6 +466,7 @@
   "Nearby": "Lähistöllä",
   "Nearby companies": "Läheiset yritykset",
   "New password": "Uusi salasana",
+  "New total": "Uusi kokonais",
   "Next": "Seuraava",
   "Nightlife": "Yöelämä",
   "Nights needed to level up": "Yöt, joita tarvitaan tasolle",
@@ -553,6 +556,7 @@
   "Previous victories": "Edelliset voitot",
   "Price": "Hinta",
   "Price 0,16 €/min + local call charges": "Hinta 0,16 €/min + pvm",
+  "Price change": "Hinnan muutos",
   "Price details": "Hintatiedot",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "ALV ei sisälly hintaan",
@@ -562,10 +566,11 @@
   "Price per day": "Hinta per päivä",
   "Price per night": "Hinta per yö",
   "Prices": "Hinnat",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Hinnat ovat nousseet, koska valitsemasi huoneet ovat nyt käytettävissä. Jatkaaksesi varauksen, hyväksy uuden hinnan tai palaa valitsemaan {totalRooms, plural, one {uusi huone} other {uusia huoneita}}.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Jatka kirjautumiseen",
   "Proceed to payment": "Siirry maksutavalle",
-  "Proceed to payment method": "Proceed to payment method",
+  "Proceed to payment method": "Siirry maksutapaan",
   "Promo code": "Promo code",
   "Provide a payment card in the next step": "Anna maksukortin tiedot seuraavassa vaiheessa",
   "Public price from": "Julkinen hinta alkaen",
@@ -626,6 +631,7 @@
   "See hotel information": "Katso hotellin tiedot",
   "See map": "Näytä kartta",
   "See on map": "Näytä kartalla",
+  "See price details": "Näytä hinnatiedot",
   "See results ({ count })": "Katso tulokset ({ count })",
   "See room details": "Katso huoneen tiedot",
   "See rooms": "Katso huoneet",
@@ -894,5 +900,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{number} m²",
   "{value} points": "{value} pisteet",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Kaikki oikeudet pidätetään"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Kaikki oikeudet pidätetään",
+  "Room": "Huone"
 }

apps/scandic-web/i18n/dictionaries/no.json

@@ -77,6 +77,7 @@
   "Away from elevator": "Bort fra heisen",
   "Back": "Tilbake",
   "Back to scandichotels.com": "Tilbake til scandichotels.com",
+  "Back to select room": "Tilbake til å velge rom",
   "Back to top": "Tilbake til toppen",
   "Bar": "Bar",
   "Based on availability": "Basert på tilgjengelighet",
@@ -182,6 +183,7 @@
   "Contact us": "Kontakt oss",
   "Continue": "Fortsette",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Fortsett med ny pris",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
@@ -463,6 +465,7 @@
   "Nearby": "I nærheten",
   "Nearby companies": "Nærliggende selskaper",
   "New password": "Nytt passord",
+  "New total": "Ny total",
   "Next": "Neste",
   "Nightlife": "Natteliv",
   "Nights needed to level up": "Netter som trengs for å komme opp i nivå",
@@ -552,6 +555,7 @@
   "Previous victories": "Tidligere seire",
   "Price": "Pris",
   "Price 0,16 €/min + local call charges": "Pris 0,16 €/min + lokale samtalekostnader",
+  "Price change": "Prisendring",
   "Price details": "Prisdetaljer",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "Pris exkludert mva",
@@ -561,10 +565,11 @@
   "Price per day": "Pris per dag",
   "Price per night": "Pris per natt",
   "Prices": "Priser",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Prisene har økt siden du valgte ditt {totalRooms, plural, one {rom} other {rom}}.{br} For å fortsette din bestilling, aksepterer du den oppdaterte prisen,{br} eller gå tilbake for å velge {totalRooms, plural, one {et nytt rom} other {nya rom}}.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Fortsett til innlogging",
   "Proceed to payment": "Fortsett til betalingsmetode",
-  "Proceed to payment method": "Proceed to payment method",
+  "Proceed to payment method": "Gå videre til betalingsmetode",
   "Promo code": "Promo code",
   "Provide a payment card in the next step": "Gi oss dine betalingskortdetaljer i neste steg",
   "Public price from": "Offentlig pris fra",
@@ -623,6 +628,7 @@
   "See hotel information": "Se hotellinformasjon",
   "See map": "Vis kart",
   "See on map": "Se på kart",
+  "See price details": "Se prisdetaljer",
   "See results ({ count })": "Se resultater ({ count })",
   "See room details": "Se detaljer om rommet",
   "See rooms": "Se rom",
@@ -890,5 +896,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{number} m²",
   "{value} points": "{value} poeng",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle rettigheter forbeholdt"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alle rettigheter forbeholdt",
+  "Room": "Rom"
 }

apps/scandic-web/i18n/dictionaries/sv.json

@@ -77,6 +77,7 @@
   "Away from elevator": "Bort från hissen",
   "Back": "Tillbaka",
   "Back to scandichotels.com": "Tillbaka till scandichotels.com",
+  "Back to select room": "Tillbaka till välj rum",
   "Back to top": "Tillbaka till toppen",
   "Bar": "Bar",
   "Based on availability": "Baserat på tillgänglighet",
@@ -182,6 +183,7 @@
   "Contact us": "Kontakta oss",
   "Continue": "Fortsätt",
   "Continue to room {nextRoomNumber}": "Continue to room {nextRoomNumber}",
+  "Continue with new price": "Fortsätt med nytt pris",
   "Copied to clipboard": "Copied to clipboard",
   "Copy promotion code": "Copy promotion code",
   "Could not find requested resource": "Det gick inte att hitta den begärda resursen",
@@ -463,6 +465,7 @@
   "Nearby": "I närheten",
   "Nearby companies": "Närliggande företag",
   "New password": "Nytt lösenord",
+  "New total": "Ny total",
   "Next": "Nästa",
   "Nightlife": "Nattliv",
   "Nights needed to level up": "Nätter som behövs för att gå upp i nivå",
@@ -552,6 +555,7 @@
   "Previous victories": "Tidigare segrar",
   "Price": "Pris",
   "Price 0,16 €/min + local call charges": "Pris 0,16 €/min + lokalsamtalsavgifter",
+  "Price change": "Prisändring",
   "Price details": "Prisdetaljer",
   "Price excl VAT": "Price excl VAT",
   "Price excluding VAT": "Pris exkl. VAT",
@@ -561,10 +565,11 @@
   "Price per day": "Pris per dag",
   "Price per night": "Pris per natt",
   "Prices": "Priser",
+  "Prices have increased since you selected your {totalRooms, plural, one {room} other {rooms}}.{br} To continue your booking, accept the updated price,{br} or go back to select {totalRooms, plural, one {a new room} other {new rooms}}.": "Priserna har ökat sedan du valde {totalRooms, plural, one {ditt rum} other {dina rum}}.{br} För att fortsätta din bokning, acceptera det uppdaterade priset,{br} eller gå tillbaka för att välja {totalRooms, plural, one {ett nytt rum} other {nya rum}}.",
   "Print confirmation": "Print confirmation",
   "Proceed to login": "Fortsätt till inloggning",
   "Proceed to payment": "Gå vidare till betalningsmetod",
-  "Proceed to payment method": "Proceed to payment method",
+  "Proceed to payment method": "Gå vidare till betalningsmetod",
   "Promo code": "Promo code",
   "Provide a payment card in the next step": "Ge oss dina betalkortdetaljer i nästa steg",
   "Public price from": "Offentligt pris från",
@@ -587,7 +592,7 @@
   "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
   "Remove extra rooms": "Ta bort extra rum",
   "Remove room": "Remove room",
-  "Request bedtype": "Request bedtype",
+  "Request bedtype": "Begär sängtyp",
   "Reservation policy": "Reservation policy",
   "Reserve with Card": "Reservera med kort",
   "Restaurant & Bar": "Restaurang & Bar",
@@ -624,6 +629,7 @@
   "See hotel information": "Se hotellinformation",
   "See map": "Visa karta",
   "See on map": "Se på karta",
+  "See price details": "Se prisdetaljer",
   "See results ({ count })": "Se resultat ({ count })",
   "See room details": "Se rumsdetaljer",
   "See rooms": "Se rum",
@@ -894,5 +900,6 @@
   "{value} cm": "{value} cm",
   "{value} m²": "{number} m²",
   "{value} points": "{value} poäng",
-  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alla rättigheter förbehålls"
+  "© {currentYear} Scandic AB All rights reserved": "© {currentYear} Scandic AB Alla rättigheter förbehålls",
+  "Room": "Rum"
 }

apps/scandic-web/types/components/hotelReservation/enterDetails/payment.ts

@@ -13,3 +13,9 @@ export interface PaymentClientProps
   extends Omit<PaymentProps, "supportedCards"> {
   savedCreditCards: CreditCard[] | null
 }
+
+export type PriceChangeData = Array<{
+  roomPrice: number
+  totalPrice: number
+  packagePrice?: number
+} | null>

apps/scandic-web/types/components/hotelReservation/enterDetails/priceChangeDialog.ts

@@ -1,8 +0,0 @@
-export type PriceChangeDialogProps = {
-  isOpen: boolean
-  oldPrice: number
-  newPrice: number
-  currency: string
-  onCancel: () => void
-  onAccept: () => void
-}