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

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

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

@@ -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({