Merged in feat/sw-3514-join-card-membership-id (pull request #2967)

feat(SW-3514): Add variant of join friends card with membership id input

* Move membershipId input in enter details to join card

Add booking flow feature flag to move membershipId into join card and hide login button.
Currently only applies to first room.

* Add sas join card to multiroom


Approved-by: Hrishikesh Vaipurkar

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

@@ -22,6 +22,7 @@ import { getErrorMessage } from "../../../BookingFlowInput/errors"
 import MemberPriceModal from "../MemberPriceModal"
 import { SpecialRequests } from "../SpecialRequests"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
+import { PartnerSASJoinScandicFriendsCard } from "./PartnerSASJoinScandicFriendsCard"
 import { getMultiroomDetailsSchema } from "./schema"
 
 import styles from "./details.module.css"
@@ -161,6 +162,10 @@ export default function Details() {
   const guestIsGoingToJoin = methods.watch("join")
   const guestIsMember = methods.watch("membershipNo")
 
+  const showMembershipIdInput =
+    config.enterDetailsMembershipIdInputLocation === "form" &&
+    !guestIsGoingToJoin
+
   return (
     <FormProvider {...methods}>
       <form
@@ -168,7 +173,9 @@ export default function Details() {
         id={`${formID}-room-${roomNr}`}
         onSubmit={methods.handleSubmit(updateDetails)}
       >
-        {guestIsMember ? null : <JoinScandicFriendsCard />}
+        {guestIsMember ? null : (
+          <JoinScandicCard updateDetailsStore={updateDetailsStore} />
+        )}
         <div className={styles.container}>
           <Footnote
             color="uiTextHighContrast"
@@ -245,7 +252,7 @@ export default function Details() {
             name="phoneNumber"
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
-          {guestIsGoingToJoin ? null : (
+          {showMembershipIdInput ? (
             <BookingFlowInput
               className={styles.fullWidth}
               label={intl.formatMessage({
@@ -255,7 +262,7 @@ export default function Details() {
               type="tel"
               registerOptions={{ onBlur: updateDetailsStore }}
             />
-          )}
+          ) : null}
           <SpecialRequests registerOptions={{ onBlur: updateDetailsStore }} />
         </div>
         <MemberPriceModal />
@@ -263,3 +270,26 @@ export default function Details() {
     </FormProvider>
   )
 }
+
+function JoinScandicCard({
+  updateDetailsStore,
+}: {
+  updateDetailsStore: () => void
+}) {
+  const config = useBookingFlowConfig()
+
+  switch (config.enterDetailsMembershipIdInputLocation) {
+    case "form":
+      return <JoinScandicFriendsCard />
+    case "join-card":
+      return (
+        <PartnerSASJoinScandicFriendsCard
+          updateDetailsStore={updateDetailsStore}
+        />
+      )
+    default:
+      const _exhaustiveCheck: never =
+        config.enterDetailsMembershipIdInputLocation
+      return null
+  }
+}