feat(SW-472): Add EnterDetails SidePeek

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -1,13 +1,14 @@
 import { dt } from "@/lib/dt"
 
-import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
+import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import ToggleSidePeek from "./ToggleSidePeek"
+
 import styles from "./summary.module.css"
 
 // TEMP
@@ -21,7 +22,6 @@ const rooms = [
 export default async function Summary() {
   const intl = await getIntl()
   const lang = getLang()
-
   const fromDate = dt().locale(lang).format("ddd, D MMM")
   const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
   const diff = dt(toDate).diff(fromDate, "days")
@@ -75,19 +75,8 @@ export default async function Summary() {
           <ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
           {toDate}
         </Body>
-        <Link
-          className={styles.link}
-          color="baseButtonTextOnFillNormal"
-          href="#"
-          variant="icon"
-        >
-          {intl.formatMessage({ id: "See room details" })}
-          <ChevronRightSmallIcon
-            color="baseButtonTextOnFillNormal"
-            height={20}
-            width={20}
-          />
-        </Link>
+
+        <ToggleSidePeek />
       </header>
       <Divider color="primaryLightSubtle" />
       <div className={styles.addOns}>