From 958906d3bf99a0db7f5fc71b7d9c541a5df0bac9 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 3 Jun 2025 05:27:41 +0000
Subject: [PATCH] feat(SW-1901): Adjusted parking pricing on hotel pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
---
 .../ParkingPrices/index.tsx                   | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx b/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx
index 30cebc3c6..1124e2dde 100644
--- a/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx
+++ b/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx
@@ -22,41 +22,60 @@ export default function ParkingPrices({
 }: ParkingPricesProps) {
   const intl = useIntl()
 
-  return freeParking ? (
-    <Typography variant="Body/Paragraph/mdBold">
-      <p className={styles.wrapper}>
-        {intl.formatMessage({ defaultMessage: "Free parking" })}
-      </p>
-    </Typography>
-  ) : (
-    <dl className={styles.wrapper}>
-      {pricing?.map((parking) => (
-        <div key={parking.period} className={styles.period}>
+  if (freeParking) {
+    return (
+      <Typography variant="Body/Paragraph/mdBold">
+        <p className={styles.wrapper}>
+          {intl.formatMessage({ defaultMessage: "Free parking" })}
+        </p>
+      </Typography>
+    )
+  }
+
+  const filteredPricing = pricing.filter((price) => price.amount > 0)
+
+  if (filteredPricing.length === 0) {
+    return (
+      <dl className={styles.wrapper}>
+        <div className={styles.period}>
           <div className={styles.information}>
             <Typography variant="Body/Paragraph/mdBold">
-              <dt>{getPeriod(intl, parking.period)}</dt>
+              <dt>{getPeriod(intl, "Hour")}</dt>
             </Typography>
             <Typography variant="Body/Paragraph/mdRegular">
               <dd>
-                {parking.amount
-                  ? formatPrice(intl, parking.amount, currency)
-                  : intl.formatMessage({
-                      defaultMessage: "At a cost",
-                    })}
+                {intl.formatMessage({
+                  defaultMessage: "At a cost",
+                })}
               </dd>
             </Typography>
           </div>
-          {parking.startTime &&
-            parking.endTime &&
-            parking.period !== Periods.allDay && (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <div className={styles.information}>
-                  <dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
-                  {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-                  <dd>{`${parking.startTime}-${parking.endTime}`}</dd>
-                </div>
-              </Typography>
-            )}
+        </div>
+      </dl>
+    )
+  }
+
+  return (
+    <dl className={styles.wrapper}>
+      {filteredPricing.map(({ period, amount, startTime, endTime }) => (
+        <div key={period} className={styles.period}>
+          <div className={styles.information}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <dt>{getPeriod(intl, period)}</dt>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <dd>{formatPrice(intl, amount, currency)}</dd>
+            </Typography>
+          </div>
+          {startTime && endTime && period !== Periods.allDay ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={styles.information}>
+                <dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
+                {/* eslint-disable formatjs/no-literal-string-in-jsx */}
+                <dd>{`${startTime}-${endTime}`}</dd>
+              </div>
+            </Typography>
+          ) : null}
         </div>
       ))}
     </dl>