Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Summary/Mobile/index.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { useEnterDetailsStore } from "../../../../stores/enter-details"
+import SignupPromoMobile from "../../../SignupPromo/Mobile"
+import SummaryUI from "../UI"
+import SummaryBottomSheet from "./BottomSheet"
+
+import styles from "./mobile.module.css"
+
+type Props = {
+  isUserLoggedIn: boolean
+}
+export default function MobileSummary({ isUserLoggedIn }: Props) {
+  const { isSummaryOpen, toggleSummaryOpen } = useEnterDetailsStore(
+    (state) => ({
+      isSummaryOpen: state.isSummaryOpen,
+      toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    })
+  )
+
+  const { booking, rooms, totalPrice, vat, defaultCurrency } =
+    useEnterDetailsStore((state) => ({
+      booking: state.booking,
+      rooms: state.rooms,
+      totalPrice: state.totalPrice,
+      vat: state.vat,
+      defaultCurrency: state.defaultCurrency,
+    }))
+
+  const showPromo =
+    !isUserLoggedIn &&
+    rooms.length === 1 &&
+    !rooms[0].room.guest.join &&
+    !rooms[0].room.guest.membershipNo
+
+  return (
+    <div className={styles.mobileSummary}>
+      {showPromo ? (
+        <div className={styles.signupPromoWrapper}>
+          <SignupPromoMobile />
+        </div>
+      ) : null}
+
+      {isSummaryOpen && (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          aria-hidden="true"
+          onClick={toggleSummaryOpen}
+        />
+      )}
+
+      <SummaryBottomSheet isUserLoggedIn={isUserLoggedIn}>
+        <div className={styles.wrapper}>
+          <SummaryUI
+            booking={booking}
+            rooms={rooms}
+            isUserLoggedIn={isUserLoggedIn}
+            totalPrice={totalPrice}
+            vat={vat}
+            toggleSummaryOpen={toggleSummaryOpen}
+            defaultCurrency={defaultCurrency}
+          />
+        </div>
+      </SummaryBottomSheet>
+    </div>
+  )
+}