feat(SW-791): make confirmation page dynamic

components/HotelReservation/BookingConfirmation/Actions/actions.module.css

@@ -0,0 +1,34 @@
+.actions {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  grid-area: actions;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+@media screen and (max-width: 767px) {
+  .actions {
+    & > button[class*="btn"][class*="icon"][class*="small"] {
+      border-bottom: 1px solid var(--Base-Border-Subtle);
+      border-radius: 0;
+      justify-content: space-between;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      & > svg {
+        order: 2;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .actions {
+    gap: var(--Spacing-x1);
+    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
+    justify-content: center;
+    padding: var(--Spacing-x1) var(--Spacing-x3);
+  }
+}

components/HotelReservation/BookingConfirmation/Actions/index.tsx

@@ -0,0 +1,38 @@
+import {
+  CalendarIcon,
+  ContractIcon,
+  DownloadIcon,
+  PrinterIcon,
+} from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import { getIntl } from "@/i18n"
+
+import styles from "./actions.module.css"
+
+export default async function Actions() {
+  const intl = await getIntl()
+  return (
+    <div className={styles.actions}>
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <CalendarIcon />
+        {intl.formatMessage({ id: "Add to calendar" })}
+      </Button>
+      <Divider color="subtle" variant="vertical" />
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <ContractIcon />
+        {intl.formatMessage({ id: "View terms" })}
+      </Button>
+      <Divider color="subtle" variant="vertical" />
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <PrinterIcon />
+        {intl.formatMessage({ id: "Print confirmation" })}
+      </Button>
+      <Divider color="subtle" variant="vertical" />
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <DownloadIcon />
+        {intl.formatMessage({ id: "Download invoice" })}
+      </Button>
+    </div>
+  )
+}