Merged in feat/sw-2874-move-select-rate (pull request #2750)

Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/index.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { useRouter, useSearchParams } from "next/navigation"
+import { useState, useTransition } from "react"
+
+import { useSelectRateContext } from "../../../../contexts/SelectRate/SelectRateContext"
+import { ErrorBoundary } from "../../../ErrorBoundary/ErrorBoundary"
+import { DesktopSummary } from "./DesktopSummary"
+import { MobileSummary } from "./MobileSummary"
+
+import styles from "./rateSummary.module.css"
+
+export function RateSummary() {
+  return (
+    <ErrorBoundary fallback={<div>Unable to render summary</div>}>
+      <InnerRateSummary />
+    </ErrorBoundary>
+  )
+}
+
+function InnerRateSummary() {
+  const { selectedRates, input } = useSelectRateContext()
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const router = useRouter()
+  const params = useSearchParams()
+  const [_, startTransition] = useTransition()
+
+  if (selectedRates.state === "NONE_SELECTED") {
+    return null
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setIsSubmitting(true)
+    startTransition(() => {
+      router.push(`details?${params}`)
+    })
+  }
+
+  const totalPriceToShow = selectedRates.totalPrice
+
+  if (
+    !totalPriceToShow ||
+    !selectedRates.rates.some((room) => room?.isSelected ?? false)
+  ) {
+    return null
+  }
+
+  // attribute data-footer-spacing used to add spacing
+  // beneath footer to be able to show entire footer upon
+  // scrolling down to the bottom of the page
+  return (
+    <form
+      data-footer-spacing
+      action={`details?${params}`}
+      method="GET"
+      onSubmit={handleSubmit}
+    >
+      <div className={styles.summary}>
+        <div className={styles.content}>
+          <ErrorBoundary fallback={<div>Unable to render desktop summary</div>}>
+            <DesktopSummary
+              isSubmitting={isSubmitting}
+              input={input}
+              selectedRates={selectedRates}
+              bookingCode={input.data?.booking.bookingCode || ""}
+            />
+          </ErrorBoundary>
+        </div>
+        <div className={styles.mobileSummary}>
+          <ErrorBoundary fallback={<div>Unable to render mobile summary</div>}>
+            <MobileSummary />
+          </ErrorBoundary>
+        </div>
+      </div>
+    </form>
+  )
+}