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

Merged in feature/SW-3515-join-scandic-friends-placeholder (pull request #2883)

Browse Source 
feat(SW-3515): display placeholder for join scandic friends

* feat(SW-3515): display placeholder for join scandic friends

* add missing variant config


Approved-by: Linus Flood
This commit is contained in:
Joakim Jäderberg
2025-10-02 13:55:24 +00:00
parent 7fcd5833bd
commit ea5c82fef0
16 changed files with 280 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/booking-flow/lib/bookingFlowConfig/bookingFlowConfig.tsx
View File

@@ -5,11 +5,12 @@ import { cache } from "react"
import { BookingFlowConfigContextProvider } from "./bookingFlowConfigContext"
import type { LangRoute } from "@scandic-hotels/common/constants/routes/langRoute"
import type { ScandicPartnersEnum } from "@scandic-hotels/common/constants/scandicPartners"
import type { BookingFlowVariant } from "./bookingFlowVariants"
export type BookingFlowConfig = {
bookingCodeEnabled: boolean
partner?: ScandicPartnersEnum
variant: BookingFlowVariant
routes: {
myStay: LangRoute
bookingTermsAndConditions: LangRoute

7
packages/booking-flow/lib/bookingFlowConfig/bookingFlowConfigContext.tsx
View File

@@ -2,9 +2,8 @@
import { createContext, useContext } from "react"
import type { ScandicPartnersEnum } from "@scandic-hotels/common/constants/scandicPartners"
import type { BookingFlowConfig } from "./bookingFlowConfig"
import type { BookingFlowVariant } from "./bookingFlowVariants"
type BookingFlowConfigContextData = BookingFlowConfig
@@ -12,7 +11,7 @@ const BookingFlowConfigContext = createContext<
BookingFlowConfigContextData | undefined
>(undefined)
export const useIsPartner = (partner: ScandicPartnersEnum) => {
export const useIsPartner = (variant: BookingFlowVariant) => {
const context = useContext(BookingFlowConfigContext)
if (!context) {
@@ -21,7 +20,7 @@ export const useIsPartner = (partner: ScandicPartnersEnum) => {
)
}
return context.partner === partner
return context.variant === variant
}
export const useBookingFlowConfig = (): BookingFlowConfigContextData => {

2
packages/booking-flow/lib/bookingFlowConfig/bookingFlowVariants.ts Normal file
View File

@@ -0,0 +1,2 @@
export const bookingFlowVariants = ["scandic", "partner-sas"] as const
export type BookingFlowVariant = (typeof bookingFlowVariants)[number]

9
packages/booking-flow/lib/components/BookingFlowInput/errors.ts
View File

@@ -1,4 +1,3 @@
import { ScandicPartnersEnum } from "@scandic-hotels/common/constants/scandicPartners"
import { logger } from "@scandic-hotels/common/logger"
import { phoneErrors } from "@scandic-hotels/common/utils/zod/phoneValidator"
@@ -10,10 +9,12 @@ import {
import type { IntlShape } from "react-intl"
import type { BookingFlowVariant } from "../../bookingFlowConfig/bookingFlowVariants"
export function getErrorMessage(
intl: IntlShape,
errorCode?: string,
partner?: ScandicPartnersEnum
variant: BookingFlowVariant,
errorCode?: string
) {
switch (errorCode) {
case bookingWidgetErrors.BOOKING_CODE_INVALID:
@@ -47,7 +48,7 @@ export function getErrorMessage(
"Multi-room booking is not available with this booking code.",
})
case bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE:
return partner === ScandicPartnersEnum.sas
return variant === "partner-sas"
? intl.formatMessage({
defaultMessage:
"Multi-room bookings are not available with EuroBonus points.",

8
packages/booking-flow/lib/components/BookingFlowInput/index.tsx
View File

@@ -17,6 +17,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
import { getErrorMessage } from "./errors"
import styles from "./input.module.css"
@@ -51,6 +52,7 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
) {
const intl = useIntl()
const { control } = useFormContext()
const config = useBookingFlowConfig()
return (
<Controller
@@ -96,7 +98,11 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
{fieldState.error && !hideError ? (
<Caption className={styles.error} fontOnly>
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
{getErrorMessage(intl, fieldState.error.message)}
{getErrorMessage(
intl,
config.variant,
fieldState.error.message
)}
</Caption>
) : null}
</TextField>

4
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
View File

@@ -13,6 +13,7 @@ import Switch from "@scandic-hotels/design-system/Switch"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import BookingFlowInput from "../../../../BookingFlowInput"
import { getErrorMessage } from "../../../../BookingFlowInput/errors"
import { Input as BookingWidgetInput } from "../Input"
@@ -282,6 +283,7 @@ function BookingCodeError({
}) {
const intl = useIntl()
const isMultiroomError = isMultiRoomError(codeError.message)
const config = useBookingFlowConfig()
return (
<div className={styles.errorContainer}>
@@ -296,7 +298,7 @@ function BookingCodeError({
color="Icon/Feedback/Error"
isFilled={!isDesktop}
/>
{getErrorMessage(intl, codeError.message)}
{getErrorMessage(intl, config.variant, codeError.message)}
</span>
</Typography>
{isMultiroomError ? (

71
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx
View File

@@ -2,10 +2,9 @@
import { useCallback, useEffect, useRef } from "react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { type IntlShape, useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { ScandicPartnersEnum } from "@scandic-hotels/common/constants/scandicPartners"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -13,10 +12,9 @@ import Modal from "@scandic-hotels/design-system/Modal"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import {
useBookingFlowConfig,
useIsPartner,
} from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import { type BookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfig"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import { bookingFlowVariants } from "../../../../../bookingFlowConfig/bookingFlowVariants"
import { getErrorMessage } from "../../../../BookingFlowInput/errors"
import { RemoveExtraRooms } from "../RemoveExtraRooms/RemoveExtraRooms"
import { isMultiRoomError } from "../utils"
@@ -28,7 +26,6 @@ import type { BookingWidgetSchema } from "../../../Client"
export default function RewardNight() {
const intl = useIntl()
const config = useBookingFlowConfig()
const isPartnerSas = useIsPartner(ScandicPartnersEnum.sas)
const {
setValue,
getValues,
@@ -36,22 +33,9 @@ export default function RewardNight() {
trigger,
} = useFormContext<BookingWidgetSchema>()
const ref = useRef<HTMLDivElement | null>(null)
const reward = isPartnerSas
? intl.formatMessage({
defaultMessage: "EuroBonus Points",
})
: intl.formatMessage({
defaultMessage: "Reward Night",
})
const rewardNightTooltip = isPartnerSas
? intl.formatMessage({
defaultMessage:
"To book with EuroBonus points, make sure you're logged into your SAS EuroBonus account.",
})
: intl.formatMessage({
defaultMessage:
"To book a reward night, make sure you're logged in to your Scandic Friends account.",
})
const reward = getRewardMessage(config, intl)
const rewardNightTooltip = getRewardNightTooltipMessage(config, intl)
const redemptionErr = errors[SEARCH_TYPE_REDEMPTION]
const isDesktop = useMediaQuery("(min-width: 767px)")
@@ -149,7 +133,7 @@ export default function RewardNight() {
className={styles.errorIcon}
isFilled={!isDesktop}
/>
{getErrorMessage(intl, redemptionErr.message, config.partner)}
{getErrorMessage(intl, config.variant, redemptionErr.message)}
</span>
</Typography>
{isMultiRoomError(redemptionErr.message) ? (
@@ -162,3 +146,42 @@ export default function RewardNight() {
</div>
)
}
function getRewardMessage(config: BookingFlowConfig, intl: IntlShape): string {
if (!bookingFlowVariants.includes(config.variant)) {
throw new Error("Unknown booking flow variant")
}
switch (config.variant) {
case "partner-sas":
return intl.formatMessage({
defaultMessage: "EuroBonus Points",
})
case "scandic":
return intl.formatMessage({
defaultMessage: "Reward Night",
})
}
}
function getRewardNightTooltipMessage(
config: BookingFlowConfig,
intl: IntlShape
): string {
if (!bookingFlowVariants.includes(config.variant)) {
throw new Error("Unknown booking flow variant")
}
switch (config.variant) {
case "partner-sas":
return intl.formatMessage({
defaultMessage:
"To book with EuroBonus points, make sure you're logged into your SAS EuroBonus account.",
})
case "scandic":
return intl.formatMessage({
defaultMessage:
"To book a reward night, make sure you're logged in to your Scandic Friends account.",
})
}
}

14
packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/index.tsx
View File

@@ -12,6 +12,7 @@ import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"
import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
import useLang from "../../../../hooks/useLang"
import { getFormattedCountryList } from "../../../../misc/getFormatedCountryList"
@@ -29,6 +30,7 @@ const formID = "enter-details"
export default function Details() {
const intl = useIntl()
const lang = useLang()
const config = useBookingFlowConfig()
const { addPreSubmitCallback, rooms } = useEnterDetailsStore((state) => ({
addPreSubmitCallback: state.actions.addPreSubmitCallback,
@@ -205,7 +207,11 @@ export default function Details() {
<CountrySelect
className={styles.fullWidth}
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(intl, errors.countryCode?.message)}
errorMessage={getErrorMessage(
intl,
config.variant,
errors.countryCode?.message
)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
@@ -227,7 +233,11 @@ export default function Details() {
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(intl, errors.phoneNumber?.message)}
errorMessage={getErrorMessage(
intl,
config.variant,
errors.phoneNumber?.message
)}
className={styles.fullWidth}
label={intl.formatMessage({
defaultMessage: "Phone number",

2
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -21,7 +21,7 @@ import styles from "./joinScandicFriendsCard.module.css"
type Props = {
name?: string
}
export default function JoinScandicFriendsCard({ name = "join" }: Props) {
export function JoinScandicFriendsCard({ name = "join" }: Props) {
const lang = useLang()
const intl = useIntl()
const loginPathname = useLazyPathname({ includeSearchParams: true })

122
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx Normal file
View File

@@ -0,0 +1,122 @@
"use client"
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { membershipTermsAndConditions } from "@scandic-hotels/common/constants/routes/membershipTermsAndConditions"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Button } from "@scandic-hotels/design-system/Button"
import Footnote from "@scandic-hotels/design-system/Footnote"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import Link from "@scandic-hotels/design-system/Link"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import { useRoomContext } from "../../../../../contexts/EnterDetails/RoomContext"
import useLang from "../../../../../hooks/useLang"
import styles from "./partnerSASJoinScandicFriendsCard.module.css"
type Props = {
name?: string
}
export function PartnerSASJoinScandicFriendsCard({ name = "join" }: Props) {
const lang = useLang()
const intl = useIntl()
const { data: euroBonusProfile } =
trpc.partner.sas.getEuroBonusProfile.useQuery()
const {
room,
actions: { updateJoin },
} = useRoomContext()
function onChange(event: { target: { value: boolean } }) {
updateJoin(event.target.value)
}
if (!euroBonusProfile || euroBonusProfile.linkStatus !== "UNLINKED") {
return null
}
if (!("member" in room.roomRate) || !room.roomRate.member) {
return null
}
return (
<div className={styles.cardContainer}>
<Typography variant="Title/Subtitle/md">
<h2 className={styles.priceContainer}>
<span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<>
NOT IMPLEMENTED
<br />
{intl.formatMessage({
defaultMessage: "Get the Scandic Friends room price",
})}
</>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`: `}
</span>
<span className={styles.price}>
{formatPrice(
intl,
room.roomRate.member.localPrice.pricePerStay ?? 0,
room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
)}
</span>
</h2>
</Typography>
<Checkbox
name={name}
className={styles.checkBox}
registerOptions={{ onChange }}
>
<Typography variant="Body/Paragraph/mdRegular">
<div>
{intl.formatMessage({
defaultMessage: "Join Scandic Friends now",
})}
</div>
</Typography>
</Checkbox>
<Button
variant={"Tertiary"}
size={"Small"}
typography={"Body/Paragraph/mdBold"}
color="Inverted"
className={styles.login}
onClick={() => toast.error("TODO: Not implemented")}
>
{intl.formatMessage({
defaultMessage: "Link",
})}
</Button>
<div className={styles.terms}>
<Footnote color="uiTextPlaceholder">
{intl.formatMessage(
{
defaultMessage:
"By joining you accept the <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. The Scandic Friends Membership is valid until further notice, but can at any time be terminated by contacting Scandic Customer Service.",
},
{
termsAndConditionsLink: (str) => (
<Link
textDecoration="underline"
size="tiny"
target="_blank"
href={membershipTermsAndConditions[lang]}
>
{str}
</Link>
),
}
)}
</Footnote>
</div>
</div>
)
}

55
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css Normal file
View File

@@ -0,0 +1,55 @@
.cardContainer {
align-self: flex-start;
background-color: orchid;
color: white;
border-radius: var(--Corner-radius-lg);
display: grid;
gap: var(--Space-x2);
padding: var(--Space-x2);
grid-template-areas:
"price login"
"checkbox checkbox"
"terms terms";
width: min(100%, 696px);
}
.priceContainer {
grid-area: price;
margin-bottom: var(--Space-x1);
}
.price {
color: var(--Text-Accent-Primary);
}
.login {
grid-area: login;
align-self: center;
justify-self: end;
}
.checkBox {
align-self: center;
grid-area: checkbox;
}
.terms {
grid-area: terms;
}
@media screen and (min-width: 768px) {
.cardContainer {
grid-template-columns: 1fr auto auto;
grid-template-rows: auto auto;
gap: var(--Space-x3);
grid-template-areas:
"price checkbox login"
"terms terms terms";
}
.priceContainer {
margin-bottom: 0;
display: flex;
flex-direction: column;
}
}

3
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx
View File

@@ -11,6 +11,7 @@ import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import DateSelect from "@scandic-hotels/design-system/Form/Date"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang"
import BookingFlowInput from "../../../../BookingFlowInput"
import { getErrorMessage } from "../../../../BookingFlowInput/errors"
@@ -28,6 +29,7 @@ export default function Signup({
}) {
const intl = useIntl()
const lang = useLang()
const config = useBookingFlowConfig()
const [isJoinChecked, setIsJoinChecked] = useState(false)
@@ -65,6 +67,7 @@ export default function Signup({
year: intl.formatMessage({ defaultMessage: "Year" }),
errorMessage: getErrorMessage(
intl,
config.variant,
errors["dateOfBirth"]?.message?.toString()
),
}}

17
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -12,6 +12,7 @@ import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"
import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
import useLang from "../../../../hooks/useLang"
import { getFormattedCountryList } from "../../../../misc/getFormatedCountryList"
@@ -20,7 +21,8 @@ import BookingFlowInput from "../../../BookingFlowInput"
import { getErrorMessage } from "../../../BookingFlowInput/errors"
import MemberPriceModal from "../MemberPriceModal"
import { SpecialRequests } from "../SpecialRequests"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { JoinScandicFriendsCard } from "./JoinScandicFriendsCard"
import { PartnerSASJoinScandicFriendsCard } from "./PartnerSASJoinScandicFriendsCard"
import {
type GuestDetailsSchema,
guestDetailsSchema,
@@ -40,6 +42,7 @@ const formID = "enter-details"
export default function Details({ user }: DetailsProps) {
const intl = useIntl()
const lang = useLang()
const config = useBookingFlowConfig()
const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
lastRoom: state.lastRoom,
@@ -153,7 +156,15 @@ export default function Details({ user }: DetailsProps) {
id={`${formID}-room-${roomNr}`}
onSubmit={methods.handleSubmit(onSubmit)}
>
{user || !memberRate ? null : <JoinScandicFriendsCard />}
{config.variant === "scandic" && (
<>{!user || !memberRate ? null : <JoinScandicFriendsCard />}</>
)}
{config.variant === "partner-sas" && (
<>
{user || !memberRate ? null : <PartnerSASJoinScandicFriendsCard />}
</>
)}
<div className={styles.container}>
<Footnote
color="uiTextHighContrast"
@@ -194,6 +205,7 @@ export default function Details({ user }: DetailsProps) {
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
config.variant,
formState.errors.countryCode?.message
)}
name="countryCode"
@@ -219,6 +231,7 @@ export default function Details({ user }: DetailsProps) {
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(
intl,
config.variant,
formState.errors.phoneNumber?.message
)}
label={intl.formatMessage({

3
packages/common/constants/scandicPartners.ts
View File

@@ -1,3 +0,0 @@
export enum ScandicPartnersEnum {
sas = "sas",
}