fix(BOOK-711): Added isFloating prop to decide when the booking widget should have a border radius

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css

@@ -1,3 +1,8 @@
+.formContent {
+  display: flex;
+  flex-direction: column;
+}
+
 .vouchersHeader {
   display: flex;
   gap: var(--Space-x15);
@@ -100,25 +105,25 @@
   height: fit-content;
 }
 
-.input {
-  display: flex;
-  flex-direction: column;
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .formContent.floating .voucherContainer {
+    border-bottom-left-radius: var(--Corner-Radius-lg);
+    border-bottom-right-radius: var(--Corner-Radius-lg);
+  }
 }
 
 @media screen and (min-width: 768px) {
-  .input {
+  .formContent {
     display: flex;
     align-items: center;
     flex-direction: row;
   }
+
   .inputContainer {
     display: flex;
     flex: 2;
     gap: var(--Space-x15);
   }
-  .voucherContainer {
-    border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
-  }
 
   .rooms,
   .when,
@@ -154,7 +159,7 @@
 }
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
-  .input {
+  .formContent {
     flex-wrap: wrap;
   }
   .inputRow {
@@ -197,8 +202,8 @@
   .inputContainer {
     margin-left: calc(-1 * var(--Space-x15));
   }
-  .input {
-    gap: var(--Space-x15);
+  .formContent {
+    gap: var(--Space-x2);
   }
   .inputRow {
     flex: 1;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -31,11 +31,13 @@ type BookingWidgetFormContentProps = {
   formId: string
   onSubmit: () => void
   isSearching: boolean
+  isFloating: boolean
 }
 export default function FormContent({
   formId,
   onSubmit,
   isSearching,
+  isFloating,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const {
@@ -61,7 +63,7 @@ export default function FormContent({
   const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
 
   return (
-    <div className={styles.input}>
+    <div className={cx(styles.formContent, { [styles.floating]: isFloating })}>
       <div className={styles.inputRow}>
         <div className={styles.inputContainer}>
           <div className={styles.where}>
@@ -170,7 +172,7 @@ export function BookingWidgetFormContentSkeleton() {
   const intl = useIntl()
 
   return (
-    <div className={styles.input}>
+    <div className={styles.formContent}>
       <div className={styles.inputRow}>
         <div className={styles.inputContainer}>
           <div className={styles.where}>

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx

@@ -32,9 +32,14 @@ const formId = "booking-widget"
 
 type BookingWidgetFormProps = {
   type?: BookingWidgetType
+  isFloating: boolean
   onClose: () => void
 }
-export default function Form({ type, onClose }: BookingWidgetFormProps) {
+export default function Form({
+  type,
+  isFloating,
+  onClose,
+}: BookingWidgetFormProps) {
   const router = useRouter()
   const pathname = usePathname()
   const lang = useLang()
@@ -106,6 +111,7 @@ export default function Form({ type, onClose }: BookingWidgetFormProps) {
           formId={formId}
           onSubmit={handleSubmit(onSubmit)}
           isSearching={isPending}
+          isFloating={isFloating}
         />
       </FormRAC>
     </section>