feat: merge stores, fix auto navigation, split summary

components/HotelReservation/EnterDetails/Summary/Client.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Summary from "@/components/HotelReservation/Summary"
+import { SummaryBottomSheet } from "@/components/HotelReservation/Summary/BottomSheet"
+
+import styles from "./summary.module.css"
+
+import type { ClientSummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
+import type { DetailsState } from "@/types/stores/enter-details"
+
+function storeSelector(state: DetailsState) {
+  return {
+    bedType: state.bedType,
+    breakfast: state.breakfast,
+    fromDate: state.booking.fromDate,
+    join: state.guest.join,
+    membershipNo: state.guest.membershipNo,
+    packages: state.packages,
+    roomRate: state.roomRate,
+    roomPrice: state.roomPrice,
+    toDate: state.booking.toDate,
+    toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    totalPrice: state.totalPrice,
+  }
+}
+
+export default function ClientSummary({
+  adults,
+  cancellationText,
+  isMember,
+  kids,
+  memberRate,
+  rateDetails,
+  roomType,
+}: ClientSummaryProps) {
+  const {
+    bedType,
+    breakfast,
+    fromDate,
+    join,
+    membershipNo,
+    packages,
+    roomPrice,
+    toDate,
+    totalPrice,
+  } = useEnterDetailsStore(storeSelector)
+
+  const showMemberPrice = !!(isMember && memberRate) || join || !!membershipNo
+  const room = {
+    adults,
+    cancellationText,
+    children: kids,
+    packages,
+    rateDetails,
+    roomPrice,
+    roomType,
+  }
+
+  return (
+    <>
+      <div className={styles.mobileSummary}>
+        <SummaryBottomSheet>
+          <div className={styles.summary}>
+            <Summary
+              bedType={bedType}
+              breakfast={breakfast}
+              fromDate={fromDate}
+              showMemberPrice={showMemberPrice}
+              room={room}
+              toDate={toDate}
+              totalPrice={totalPrice}
+            />
+          </div>
+        </SummaryBottomSheet>
+      </div>
+      <div className={styles.desktopSummary}>
+        <div className={styles.hider} />
+        <div className={styles.summary}>
+          <Summary
+            bedType={bedType}
+            breakfast={breakfast}
+            fromDate={fromDate}
+            showMemberPrice={showMemberPrice}
+            room={room}
+            toDate={toDate}
+            totalPrice={totalPrice}
+          />
+        </div>
+        <div className={styles.shadow} />
+      </div>
+    </>
+  )
+}