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/RoomOne/Signup/MembershipNumberInput.tsx

@@ -0,0 +1,35 @@
+import { useIntl } from "react-intl"
+
+import BookingFlowInput from "../../../../BookingFlowInput"
+
+import type { RegisterOptions } from "react-hook-form"
+
+export function MembershipNumberInput({
+  registerOptions,
+  label,
+  className,
+  disabled,
+}: {
+  registerOptions?: RegisterOptions
+  label?: string
+  className?: string
+  disabled?: boolean
+}) {
+  const intl = useIntl()
+
+  return (
+    <BookingFlowInput
+      label={
+        label ||
+        intl.formatMessage({
+          defaultMessage: "Membership ID",
+        })
+      }
+      name="membershipNo"
+      type="tel"
+      registerOptions={registerOptions}
+      className={className}
+      disabled={disabled}
+    />
+  )
+}

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

@@ -15,6 +15,7 @@ import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFl
 import useLang from "../../../../../hooks/useLang"
 import BookingFlowInput from "../../../../BookingFlowInput"
 import { getErrorMessage } from "../../../../BookingFlowInput/errors"
+import { MembershipNumberInput } from "./MembershipNumberInput"
 
 import styles from "./signup.module.css"
 
@@ -41,50 +42,46 @@ export default function Signup({
     setIsJoinChecked(joinValue)
   }, [joinValue])
 
-  return isJoinChecked ? (
-    <div className={styles.additionalFormData}>
-      <BookingFlowInput
-        name="zipCode"
-        label={intl.formatMessage({
-          defaultMessage: "Zip code",
-        })}
-        registerOptions={{ required: true, ...registerOptions }}
-      />
-      <div className={styles.dateField}>
-        <header>
-          <Caption type="bold">
-            <span className={styles.required}>
-              {intl.formatMessage({
-                defaultMessage: "Birth date",
-              })}
-            </span>
-          </Caption>
-        </header>
-        <DateSelect
-          labels={{
-            day: intl.formatMessage({ defaultMessage: "Day" }),
-            month: intl.formatMessage({ defaultMessage: "Month" }),
-            year: intl.formatMessage({ defaultMessage: "Year" }),
-            errorMessage: getErrorMessage(
-              intl,
-              config.variant,
-              errors["dateOfBirth"]?.message?.toString()
-            ),
-          }}
-          lang={lang}
-          name="dateOfBirth"
+  if (isJoinChecked)
+    return (
+      <div className={styles.additionalFormData}>
+        <BookingFlowInput
+          name="zipCode"
+          label={intl.formatMessage({
+            defaultMessage: "Zip code",
+          })}
           registerOptions={{ required: true, ...registerOptions }}
         />
+        <div className={styles.dateField}>
+          <header>
+            <Caption type="bold">
+              <span className={styles.required}>
+                {intl.formatMessage({
+                  defaultMessage: "Birth date",
+                })}
+              </span>
+            </Caption>
+          </header>
+          <DateSelect
+            labels={{
+              day: intl.formatMessage({ defaultMessage: "Day" }),
+              month: intl.formatMessage({ defaultMessage: "Month" }),
+              year: intl.formatMessage({ defaultMessage: "Year" }),
+              errorMessage: getErrorMessage(
+                intl,
+                config.variant,
+                errors["dateOfBirth"]?.message?.toString()
+              ),
+            }}
+            lang={lang}
+            name="dateOfBirth"
+            registerOptions={{ required: true, ...registerOptions }}
+          />
+        </div>
       </div>
-    </div>
-  ) : (
-    <BookingFlowInput
-      label={intl.formatMessage({
-        defaultMessage: "Membership ID",
-      })}
-      name="membershipNo"
-      type="tel"
-      registerOptions={registerOptions}
-    />
-  )
+    )
+
+  if (config.enterDetailsMembershipIdInputLocation === "join-card") return null
+
+  return <MembershipNumberInput registerOptions={registerOptions} />
 }