fix(BOOK-418): Refactored StandaloneHotelCardDialog and fixed pricing issue when using redemption or booking codes

Approved-by: Bianca Widstam

packages/design-system/lib/components/HotelCard/HotelPointsRow/hotelPointsRow.module.css

@@ -1,6 +1,3 @@
-.poinstRow {
-  display: flex;
-  gap: var(--Space-x1);
-  align-items: baseline;
+.roomPrice {
   color: var(--Text-Default);
 }

packages/design-system/lib/components/HotelCard/HotelPointsRow/index.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from 'react-intl'
 
-import Caption from '../../Caption'
-import Subtitle from '../../Subtitle'
+import { RoomPrice } from '../../HotelCard/RoomPrice'
+import { Typography } from '../../Typography'
 
-import styles from './hotelPointsRow.module.css'
 import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import styles from './hotelPointsRow.module.css'
 
 export type PointsRowProps = {
   pointsPerStay: number
@@ -21,27 +21,28 @@ export function HotelPointsRow({
   const intl = useIntl()
 
   return (
-    <div className={styles.poinstRow}>
-      <Subtitle type="two" color="uiTextHighContrast">
-        {pointsPerStay}
-      </Subtitle>
-      <Caption color="uiTextHighContrast">
-        {pointsCurrency ??
-          intl.formatMessage({
-            defaultMessage: 'Points',
-          })}
-      </Caption>
+    <RoomPrice
+      className={styles.roomPrice}
+      price={pointsPerStay}
+      currency={
+        pointsCurrency ?? intl.formatMessage({ defaultMessage: 'Points' })
+      }
+      includePerNight={false}
+    >
       {additionalPricePerStay ? (
         <>
-          {'+'}
-          <Subtitle type="two" color="uiTextHighContrast">
-            {additionalPricePerStay}
-          </Subtitle>
-          <Caption color="uiTextHighContrast">
-            {additionalPriceCurrency}
-          </Caption>
+          <Typography variant="Body/Paragraph/mdBold">
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            <span> + </span>
+          </Typography>
+          <Typography variant="Title/Subtitle/md">
+            <span>{additionalPricePerStay}</span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdBold">
+            <span> {additionalPriceCurrency}</span>
+          </Typography>
         </>
       ) : null}
-    </div>
+    </RoomPrice>
   )
 }