feat: new booking confirmation page

components/HotelReservation/SidePanel/index.tsx

@@ -0,0 +1,19 @@
+import { sidePanelVariants } from "./variants"
+
+import styles from "./sidePanel.module.css"
+
+import type { SidePanelProps } from "@/types/components/hotelReservation/sidePanel"
+
+export default function SidePanel({
+  children,
+  variant,
+}: React.PropsWithChildren<SidePanelProps>) {
+  const classNames = sidePanelVariants({ variant })
+  return (
+    <div className={classNames}>
+      <div className={styles.hider} />
+      <div className={styles.wrapper}>{children}</div>
+      <div className={styles.shadow} />
+    </div>
+  )
+}

components/HotelReservation/SidePanel/sidePanel.module.css

@@ -0,0 +1,62 @@
+.sidePanel,
+.hider,
+.shadow {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .sidePanel {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+  }
+
+  .summary {
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .hider {
+    display: block;
+    position: sticky;
+  }
+
+  .receipt .hider {
+    background-color: var(--Main-Grey-White);
+    height: 150px;
+    margin-top: -78px;
+    top: -40px;
+  }
+
+  .summary .hider {
+    background-color: var(--Scandic-Brand-Warm-White);
+    height: 40px;
+    margin-top: var(--Spacing-x4);
+    top: calc(var(--booking-widget-desktop-height) - 6px);
+  }
+
+  .wrapper {
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: none;
+    margin-top: calc(0px - var(--Spacing-x9));
+    position: sticky;
+    top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
+        var(--Spacing-x-half)
+    );
+    z-index: 9;
+  }
+
+  .shadow {
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-style: solid;
+    border-bottom: none;
+    border-top: none;
+    display: block;
+  }
+}

components/HotelReservation/SidePanel/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./sidePanel.module.css"
+
+export const sidePanelVariants = cva(styles.sidePanel, {
+  variants: {
+    variant: {
+      receipt: styles.receipt,
+      summary: styles.summary,
+    },
+  },
+  defaultVariants: {
+    variant: "summary",
+  },
+})