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

fix(BOOK-559): Using same ContactInformation component on hotel pages and booking flow inside the hotel details sidepeek

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-13 14:32:17 +00:00
parent f52d210240
commit b0f2276b0b
33 changed files with 75 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/api/web/destinations/[country]/[city]/route.ts
View File

@@ -3,6 +3,7 @@ import { TRPCError } from "@trpc/server"
import { unstable_noStore as noStore } from "next/cache"
import { NextResponse } from "next/server"
import { Country } from "@scandic-hotels/common/constants/country"
import { Lang } from "@scandic-hotels/common/constants/language"
import { equalsIgnoreCaseAndAccents } from "@scandic-hotels/common/utils/stringEquals"
import {
@@ -10,7 +11,6 @@ import {
httpStatusByErrorCode,
notFound,
} from "@scandic-hotels/trpc/errors"
import { Country } from "@scandic-hotels/trpc/types/country"
import {
isCityLocation,
isHotelLocation,

2
apps/scandic-web/app/api/web/destinations/[country]/route.ts
View File

@@ -3,6 +3,7 @@ import { TRPCError } from "@trpc/server"
import { unstable_noStore as noStore } from "next/cache"
import { NextResponse } from "next/server"
import { Country } from "@scandic-hotels/common/constants/country"
import { Lang } from "@scandic-hotels/common/constants/language"
import { equalsIgnoreCaseAndAccents } from "@scandic-hotels/common/utils/stringEquals"
import {
@@ -10,7 +11,6 @@ import {
httpStatusByErrorCode,
notFound,
} from "@scandic-hotels/trpc/errors"
import { Country } from "@scandic-hotels/trpc/types/country"
import {
isCityLocation,
isHotelLocation,

4
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -1,14 +1,14 @@
import { cx } from "class-variance-authority"
import { Country } from "@scandic-hotels/common/constants/country"
import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Country } from "@scandic-hotels/trpc/types/country"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import TripAdvisorSection from "./TripAdvisorSection"

50
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css
View File

@@ -1,50 +0,0 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Space-x15);
}
.information {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--Space-x2);
grid-template-areas:
"address drivingDirections"
"contact socials"
"email email"
"ecoLabel ecoLabel";
font-style: normal;
}
.address {
grid-area: address;
}
.drivingDirections {
grid-area: drivingDirections;
}
.contact {
grid-area: contact;
}
.socials {
grid-area: socials;
}
.socialIcons {
display: flex;
gap: var(--Space-x1);
align-items: center;
}
.email {
grid-area: email;
}
.ecoLabel {
grid-area: ecoLabel;
display: flex;
gap: var(--Space-x15);
color: var(--Text-Secondary);
}

142
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
View File

@@ -1,142 +0,0 @@
import NextLink from "next/link"
import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
import Image from "@scandic-hotels/design-system/Image"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./contactInformation.module.css"
import type { ContactInformationProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"
export default async function ContactInformation({
hotelAddress,
contact,
socials,
ecoLabels,
hotelName,
}: ContactInformationProps) {
const intl = await getIntl()
const lang = await getLang()
const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
`${hotelName}, ${hotelAddress.streetAddress}, ${hotelAddress.zipCode} ${hotelAddress.city}`
)}`
return (
<div className={styles.wrapper}>
<Typography variant="Title/Subtitle/lg">
<h3>
{intl.formatMessage({
id: "common.practicalInformation",
defaultMessage: "Practical information",
})}
</h3>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<address className={styles.information}>
<div className={styles.address}>
<p>
{intl.formatMessage({
id: "common.address",
defaultMessage: "Address",
})}
</p>
<Typography variant="Body/Paragraph/mdRegular">
<div>
<p>{hotelAddress.streetAddress}</p>
<p>{hotelAddress.city}</p>
</div>
</Typography>
</div>
<div className={styles.drivingDirections}>
<p>
{intl.formatMessage({
id: "common.drivingDirections",
defaultMessage: "Driving directions",
})}
</p>
<TextLink href={directionsUrl} target="_blank">
{intl.formatMessage({
id: "common.googleMaps",
defaultMessage: "Google Maps",
})}
</TextLink>
</div>
<div className={styles.contact}>
<p>
{intl.formatMessage({
id: "common.contactUs",
defaultMessage: "Contact us",
})}
</p>
<TextLink href={`tel:+${contact.phoneNumber}`}>
{contact.phoneNumber}
</TextLink>
<LocalCallCharges country={hotelAddress.country} />
</div>
{socials.instagram || socials.facebook ? (
<div className={styles.socials}>
<p>
{intl.formatMessage({
id: "common.followUs",
defaultMessage: "Follow us",
})}
</p>
<div className={styles.socialIcons}>
{socials.instagram && (
<NextLink href={socials.instagram}>
<InstagramIcon color="Icon/Interactive/Default" />
</NextLink>
)}
{socials.facebook && (
<NextLink href={socials.facebook}>
<FacebookIcon color="Icon/Interactive/Default" />
</NextLink>
)}
</div>
</div>
) : null}
<div className={styles.email}>
<p>
{intl.formatMessage({
id: "common.email",
defaultMessage: "Email",
})}
</p>
<TextLink href={`mailto:${contact.email}`}>
{contact.email}
</TextLink>
</div>
{ecoLabels.nordicEcoLabel && (
<div className={styles.ecoLabel}>
<Image
height={38}
width={38}
alt={intl.formatMessage({
id: "common.nordicSwanEcolabel",
defaultMessage: "Nordic Swan Ecolabel",
})}
src={`/_static/shared/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div>
<p>
{intl.formatMessage({
id: "common.nordicSwanEcolabel",
defaultMessage: "Nordic Swan Ecolabel",
})}
</p>
<p>{ecoLabels.svanenEcoLabelCertificateNumber}</p>
</div>
</Typography>
</div>
)}
</address>
</Typography>
</div>
)
}

3
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx
View File

@@ -1,11 +1,10 @@
import { ContactInformation } from "@scandic-hotels/booking-flow/components/HotelDetails/ContactInformation"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SidePeek from "@scandic-hotels/design-system/SidePeek"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getIntl } from "@/i18n"
import ContactInformation from "./ContactInformation"
import styles from "./aboutTheHotel.module.css"
import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"

2
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx
View File

@@ -1,7 +1,7 @@
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css"

2
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx
View File

@@ -1,7 +1,7 @@
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css"

2
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx
View File

@@ -1,10 +1,10 @@
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css"

2
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx
View File

@@ -1,7 +1,7 @@
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import { getIntl } from "@/i18n"
import OpeningHours from "../../HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours"

26
apps/scandic-web/components/LocalCallCharges/index.tsx
View File

@@ -1,26 +0,0 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Country } from "@scandic-hotels/trpc/types/country"
import { getIntl } from "@/i18n"
interface LocalCallChargesProps {
country: string
className?: string
}
export default async function LocalCallCharges({
country,
className,
}: LocalCallChargesProps) {
const intl = await getIntl()
return country === Country.Finland ? (
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={className}>
{intl.formatMessage({
id: "common.localCallCharges",
defaultMessage: "Price: €0.16/min + local call charges",
})}
</p>
</Typography>
) : null
}

2
apps/scandic-web/lib/trpc/memoizedRequests/index.ts
View File

@@ -2,10 +2,10 @@ import { cache } from "@/utils/cache"
import { serverClient } from "../server"
import type { Country } from "@scandic-hotels/common/constants/country"
import type { Lang } from "@scandic-hotels/common/constants/language"
import type { GetHotelsByCSFilterInput } from "@scandic-hotels/trpc/routers/hotels/input"
import type { GetSavedPaymentCardsInput } from "@scandic-hotels/trpc/routers/user/input"
import type { Country } from "@scandic-hotels/trpc/types/country"
import type { HotelInput } from "@scandic-hotels/trpc/types/hotel"
import type {
AncillaryPackagesInput,

5
apps/scandic-web/types/components/hotelPage/sidepeek/aboutTheHotel.ts
View File

@@ -8,8 +8,3 @@ export type AboutTheHotelSidePeekProps = {
descriptions: Hotel["hotelContent"]["texts"]
hotelName: Hotel["name"]
}
export type ContactInformationProps = Omit<
AboutTheHotelSidePeekProps,
"descriptions"
>