Merged in feat/sw-3241-move-readme-to-booking-flow (pull request #2660)

feat(SW-3241): Move ReadMe to booking-flow and rename to OpenSidePeekButton

* Move ReadMe to booking-flow

* Rename ReadMore to OpenSidePeekButton

* Fix self-referencing import


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx

@@ -0,0 +1,52 @@
+"use client"
+import { useEffect } from "react"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import useSidePeekStore, { type SidePeekEnum } from "../../stores/sidepeek"
+import { useTrackingContext } from "../../trackingContext"
+
+interface OpenSidePeekButtonProps {
+  label: string
+  hotelId: string
+  showCTA: boolean
+  sidePeekKey: SidePeekEnum
+}
+
+export default function OpenSidePeekButton({
+  label,
+  hotelId,
+  showCTA,
+  sidePeekKey,
+}: OpenSidePeekButtonProps) {
+  const tracking = useTrackingContext()
+  const { openSidePeek, closeSidePeek } = useSidePeekStore((state) => ({
+    openSidePeek: state.openSidePeek,
+    closeSidePeek: state.closeSidePeek,
+  }))
+
+  useEffect(() => {
+    return () => {
+      closeSidePeek()
+    }
+  }, [closeSidePeek])
+
+  return (
+    <Button
+      onPress={() => {
+        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
+        tracking.trackOpenSidePeek({
+          name: sidePeekKey,
+          hotelId,
+          includePathname: true,
+        })
+      }}
+      variant="Text"
+      typography="Body/Paragraph/mdBold"
+    >
+      {label}
+      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+    </Button>
+  )
+}