feat(SW-72): Add flexibility selection

components/HotelReservation/SelectRate/FlexibilitySelection/flexibilitySelection.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
+  padding-bottom: var(--Spacing-x3);
+}
+
+.header {
+  margin-top: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}
+
+.list {
+  margin-top: var(--Spacing-x4);
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: var(--Spacing-x2);
+  row-gap: var(--Spacing-x4);
+}
+
+.list > li {
+  width: 100%;
+}
+
+.list input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}

components/HotelReservation/SelectRate/FlexibilitySelection/index.tsx

@@ -0,0 +1,62 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import SelectionCard from "../SelectionCard"
+
+import styles from "./flexibilitySelection.module.css"
+
+const choices = [
+  {
+    value: "non-refundable",
+    name: "Non refundable",
+    payment: "Pay now",
+    pricePerNight: 0,
+    membersPricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "rebook",
+    name: "Free rebooking",
+    payment: "Pay now",
+    pricePerNight: 77,
+    membersPricePerNight: 20,
+    currency: "SEK",
+  },
+  {
+    value: "cancellation",
+    name: "Free cancellation",
+    payment: "Pay later",
+    pricePerNight: 132,
+    membersPricePerNight: 80,
+    currency: "SEK",
+  },
+]
+
+export default async function FlexibilitySelection() {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <Header title={formatMessage({ id: "Flexibility" })} subtitle={null} />
+      </div>
+
+      <ul className={styles.list}>
+        {choices.map((choice) => (
+          <li key={choice.value}>
+            <label>
+              <input type="radio" name="flexibility" value={choice.value} />
+              <SelectionCard
+                title={choice.name}
+                subtext={choice.payment}
+                price={choice.pricePerNight}
+                membersPrice={choice.membersPricePerNight}
+                currency={choice.currency}
+              />
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}