Merged in feat/ancillery-card (pull request #1293)

Created AncillaryCard for SW-1504 and SW-1546 * Created AncillaryCard for SW-1504 and SW-1546 * updated divider * added dangerouslySetInnerHTML * Added color="uiTextHighContrast" Approved-by: Bianca Widstam
2025-02-10 14:01:49 +00:00
parent 450a1d4adc
commit ec8db51c47
3 changed files with 104 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { useIntl } from "react-intl"
+
+import Image from "@/components/Image"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./ancillaryCard.module.css"
+
+import type { AncillaryCardProps } from "@/types/components/ancillaryCard"
+
+export function AncillaryCard({ ancillary }: AncillaryCardProps) {
+  const intl = useIntl()
+
+  return (
+    <article className={styles.ancillaryCard}>
+      <div className={styles.imageContainer}>
+        <Image
+          className={styles.image}
+          src={ancillary.imageUrl}
+          alt={ancillary.title}
+          fill
+          style={{ opacity: ancillary.imageOpacity ?? 1 }}
+        />
+      </div>
+      <div className={styles.contentContainer}>
+        <div>
+          <Body textTransform="bold" color="uiTextHighContrast">
+            {ancillary.title}
+          </Body>
+
+          <div className={styles.price}>
+            <Body color="uiTextHighContrast">
+              {formatPrice(
+                intl,
+                ancillary.price.total,
+                ancillary.price.currency
+              )}
+            </Body>
+
+            {ancillary.points && (
+              <>
+                <div>
+                  <Divider variant="vertical" color="subtle" />
+                </div>
+                <Body textAlign="right" color="uiTextHighContrast">
+                  {ancillary.points} {intl.formatMessage({ id: "Points" })}
+                </Body>
+              </>
+            )}
+          </div>
+        </div>
+        {ancillary.description && (
+          <Caption asChild color="uiTextHighContrast">
+            <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
+          </Caption>
+        )}
+      </div>
+    </article>
+  )
+}