diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
new file mode 100644
index 000000000..8c6732f27
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
@@ -0,0 +1,32 @@
+.dialog {
+ display: grid;
+ flex: 1;
+ gap: var(--Space-x2);
+}
+
+.header {
+ align-items: center;
+ display: flex;
+ gap: var(--Space-x2);
+ justify-content: space-between;
+}
+
+.title {
+ color: var(--Text-Default);
+}
+
+.content {
+ display: grid;
+ gap: var(--Space-x2);
+}
+
+@media screen and (min-width: 768px) {
+ .dialog {
+ gap: var(--Space-x3);
+ }
+
+ .content {
+ gap: var(--Space-x3);
+ grid-template-columns: 1fr 1fr;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx
new file mode 100644
index 000000000..84d9a010c
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx
@@ -0,0 +1,38 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import ManageStay from "./ManageStay"
+
+export default function Upcoming() {
+ const intl = useIntl()
+ const hotel = useMyStayStore((state) => state.hotel)
+
+ const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+ `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
+ )}`
+ return (
+ <>
+
+
+
+ {intl.formatMessage({
+ id: "myStay.referenceCard.actions.findUs",
+ defaultMessage: "Find us",
+ })}
+
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/index.tsx
index 504a67c86..90b3580ff 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/index.tsx
@@ -1,16 +1,19 @@
"use client"
import { useMyStayStore } from "@/stores/my-stay"
-import Cancelled from "./Cancelled"
-import NotCancelled from "./NotCancelled"
+import NotUpcoming from "./NotUpcoming"
+import Upcoming from "./Upcoming"
import styles from "./actions.module.css"
export default function Actions() {
const isCancelled = useMyStayStore((state) => state.bookedRoom.isCancelled)
+ const isPastBooking = useMyStayStore((state) => state.isPastBooking)
+
+ const isActionable = !isCancelled && !isPastBooking
return (
- {isCancelled ? : }
+ {isActionable ? : }
)
}
diff --git a/apps/scandic-web/providers/MyStay.tsx b/apps/scandic-web/providers/MyStay.tsx
index c9fcc3aa9..795101d50 100644
--- a/apps/scandic-web/providers/MyStay.tsx
+++ b/apps/scandic-web/providers/MyStay.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
import { use, useRef } from "react"
import { useIntl } from "react-intl"
+import { dt } from "@scandic-hotels/common/dt"
import { trpc } from "@scandic-hotels/trpc/client"
import { createMyStayStore } from "@/stores/my-stay"
@@ -91,9 +92,15 @@ export default function MyStayProvider({
const rooms = [data.booking, ...linkedReservations]
+ // Following the API logic for determining if booking is in the past.
+ // This is the same logic as used for separating stays in /future and /past endpoints on the API
+ const now = dt()
+ const isPastBooking = dt(data.booking.checkInDate).isBefore(now, "day")
+
const hasInvalidatedQueryAndRefetched =
(isFetchedAfterMount && data) ||
(linkedReservationsIsFetchedAfterMount && linkedReservations)
+
if (!storeRef.current || hasInvalidatedQueryAndRefetched) {
storeRef.current = createMyStayStore({
breakfastPackages,
@@ -104,6 +111,7 @@ export default function MyStayProvider({
rooms,
savedCreditCards,
isLoggedIn,
+ isPastBooking,
})
}
diff --git a/apps/scandic-web/stores/my-stay/index.ts b/apps/scandic-web/stores/my-stay/index.ts
index 05e7713e3..2393c9b90 100644
--- a/apps/scandic-web/stores/my-stay/index.ts
+++ b/apps/scandic-web/stores/my-stay/index.ts
@@ -25,6 +25,7 @@ export function createMyStayStore({
rooms,
savedCreditCards,
isLoggedIn,
+ isPastBooking,
}: InitialState) {
const rates = {
change: intl.formatMessage({
@@ -79,6 +80,7 @@ export function createMyStayStore({
savedCreditCards,
totalPoints,
totalPrice,
+ isPastBooking,
actions: {
closeManageStay() {
diff --git a/apps/scandic-web/types/stores/my-stay.ts b/apps/scandic-web/types/stores/my-stay.ts
index 5c07c49d9..364f1ba0a 100644
--- a/apps/scandic-web/types/stores/my-stay.ts
+++ b/apps/scandic-web/types/stores/my-stay.ts
@@ -57,12 +57,18 @@ export interface MyStayState {
savedCreditCards: CreditCard[] | null
totalPoints: number
totalPrice: string
+ isPastBooking: boolean
}
export interface InitialState
extends Pick<
MyStayState,
- "breakfastPackages" | "hotel" | "refId" | "savedCreditCards" | "isLoggedIn"
+ | "breakfastPackages"
+ | "hotel"
+ | "refId"
+ | "savedCreditCards"
+ | "isLoggedIn"
+ | "isPastBooking"
> {
intl: IntlShape
roomCategories: RoomCategories