Merged in fix/SW-2072-ancillary-price-details-ui (pull request #1723)

fix(SW-2072): fix price details on ancillaries

* fix(SW-2072): fix price details on ancillaries


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx

@@ -27,10 +27,10 @@ export default function PriceRow({
       </div>
       <div className={styles.column}>
         <Typography variant="Body/Paragraph/mdRegular">
-          <h2>{label}</h2>
+          <h2 className={styles.priceText}>{label}</h2>
         </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
-          <h2>{value}</h2>
+          <h2 className={styles.priceText}>{value}</h2>
         </Typography>
       </div>
     </>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css

@@ -2,3 +2,7 @@
   display: flex;
   justify-content: space-between;
 }
+
+.priceText {
+  color: var(--Text-Tertiary);
+}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx

@@ -41,7 +41,7 @@ export default function PriceSummary({
 
       {items.map((item) => (
         <>
-          {item.quantityWithCard && (
+          {!!item.quantityWithCard && (
             <PriceRow
               title={item.title}
               quantity={item.quantityWithCard}
@@ -49,7 +49,7 @@ export default function PriceSummary({
               value={formatPrice(intl, item.totalPrice, item.currency)}
             />
           )}
-          {item.quantityWithPoints && (
+          {!!item.quantityWithPoints && (
             <PriceRow
               title={item.title}
               quantity={item.quantityWithPoints}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx

@@ -126,7 +126,9 @@ export default function PriceDetails({
           </Typography>
           {totalPrice && (
             <Typography variant="Body/Paragraph/mdRegular">
-              <p>({intl.formatMessage({ id: "Incl. VAT" })})</p>
+              <p className={styles.vatText}>
+                ({intl.formatMessage({ id: "Incl. VAT" })})
+              </p>
             </Typography>
           )}
         </div>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css

@@ -10,7 +10,7 @@
 
 .totalPriceInclVAT {
   display: flex;
-  gap: var(--Space-x05);
+  gap: var(--Space-x15);
 }
 
 .totalPriceValue {
@@ -18,3 +18,7 @@
   gap: var(--Space-x1);
   height: 20px;
 }
+
+.vatText {
+  color: var(--Text-Tertiary);
+}