Merged in feat/SW-1308-booking-codes-track-b (pull request #1607)

Feat/SW-1308 booking codes track b

* feat: SW-1308 Booking codes track b

* feat: SW-1308 Booking codes Track B implementation

* feat: SW-1308 Optimized after rebase


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css

@@ -0,0 +1,19 @@
+.voucherCard {
+  padding: var(--Spacing-x-one-and-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  margin: 0;
+  width: 100%;
+}
+
+.voucherRow,
+.voucher {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.voucher {
+  justify-content: end;
+}

apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx

@@ -0,0 +1,32 @@
+import { useIntl } from "react-intl"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./hotelVoucherCard.module.css"
+
+import { CurrencyEnum } from "@/types/enums/currency"
+import type { ProductTypeVoucher } from "@/types/trpc/routers/hotel/availability"
+
+export default function HotelVoucherCard({
+  productTypeVoucher,
+}: {
+  productTypeVoucher: ProductTypeVoucher
+}) {
+  const intl = useIntl()
+  return (
+    <div className={styles.voucherCard}>
+      <div className={styles.voucherRow}>
+        <Caption>{intl.formatMessage({ id: "From" })}</Caption>
+        <div className={styles.voucher}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {productTypeVoucher.numberOfVouchers}
+          </Subtitle>
+          <Caption color="uiTextHighContrast" className={styles.currency}>
+            {CurrencyEnum.Voucher}
+          </Caption>
+        </div>
+      </div>
+    </div>
+  )
+}