feat/SW-843-UI-hotel-card-select-hotel (pull request #887)

Approved-by: Pontus Dreij Approved-by: Niclas Edenvin
2024-11-14 09:14:26 +00:00
parent cc7f4e0478
commit 87a89c5d81
32 changed files with 848 additions and 183 deletions
--- a/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx
+++ b/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx
@@ -0,0 +1,71 @@
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "../hotelPriceList.module.css"
+
+import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
+
+export default function HotelPriceCard({
+  currency,
+  memberAmount,
+  regularAmount,
+}: PriceCardProps) {
+  const intl = useIntl()
+
+  return (
+    <dl className={styles.priceCard}>
+      {memberAmount && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="red">
+              {intl.formatMessage({ id: "Member price" })}
+            </Caption>
+          </dt>
+        </div>
+      )}
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            type="bold"
+            color={memberAmount ? "red" : "uiTextHighContrast"}
+          >
+            {intl.formatMessage({ id: "From" })}
+          </Caption>
+        </dt>
+        <dd>
+          <div className={styles.price}>
+            <Subtitle
+              type="two"
+              color={memberAmount ? "red" : "uiTextHighContrast"}
+            >
+              {memberAmount ? memberAmount : regularAmount}
+            </Subtitle>
+            <Body
+              color={memberAmount ? "red" : "uiTextHighContrast"}
+              textTransform="bold"
+            >
+              {currency}
+              <span className={styles.perNight}>
+                /{intl.formatMessage({ id: "night" })}
+              </span>
+            </Body>
+          </div>
+        </dd>
+      </div>
+      {/*   TODO add correct local price when API change */}
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption color={"disabled"}>
+            {intl.formatMessage({ id: "Approx." })}
+          </Caption>
+        </dt>
+        <dd>
+          <Caption color="disabled"> - EUR</Caption>
+        </dd>
+      </div>
+    </dl>
+  )
+}