From c065101b7c1af1985a5827051d0d393888397c8a Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Wed, 26 Mar 2025 09:38:03 +0000
Subject: [PATCH] Merged in fix/ratecard-adjustments (pull request #1638)

add transparent border to rateCard and make appoximateRate optional

* add transparent border to rateCard and make appoximateRate optional


Approved-by: Simon.Emanuelsson
---
 .../components/RateCard/Campaign/index.tsx    | 28 ++++++++++---------
 .../lib/components/RateCard/Code/index.tsx    |  2 +-
 .../lib/components/RateCard/Points/index.tsx  |  6 ++--
 .../lib/components/RateCard/Regular/index.tsx | 28 ++++++++++---------
 .../components/RateCard/rate-card.module.css  |  1 +
 5 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/packages/design-system/lib/components/RateCard/Campaign/index.tsx b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
index 197fc88e2..f5cb483c7 100644
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -18,7 +18,7 @@ interface CampaignRateCardProps {
   referenceRate: Rate
   comparisonRate?: Omit<Rate, 'label'>
   isHighlightedRate?: boolean
-  approximateRate: Rate
+  approximateRate?: Rate
   handleChange: () => void
   handleTermsClick?: () => void
 }
@@ -85,7 +85,7 @@ export default function CampaignRateCard({
               </Typography>
               <Typography variant="Title/Subtitle/md">
                 <p>
-                  {rate.price}{' '}
+                  {`${rate.price} `}
                   <Typography variant="Body/Supporting text (caption)/smBold">
                     <span>{rate.unit}</span>
                   </Typography>
@@ -99,7 +99,7 @@ export default function CampaignRateCard({
                 </Typography>
                 <Typography variant="Title/Subtitle/md">
                   <p>
-                    {memberRate.price}{' '}
+                    {`${memberRate.price} `}
                     <Typography variant="Body/Supporting text (caption)/smBold">
                       <span>{memberRate.unit}</span>
                     </Typography>
@@ -121,16 +121,18 @@ export default function CampaignRateCard({
                 </Typography>
               </div>
             ) : null}
-            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>{approximateRate.label}</p>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>
-                  {approximateRate.price} {approximateRate.unit}
-                </p>
-              </Typography>
-            </div>
+            {approximateRate ? (
+              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>{approximateRate.label}</p>
+                </Typography>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>
+                    {approximateRate.price} {approximateRate.unit}
+                  </p>
+                </Typography>
+              </div>
+            ) : null}
           </div>
           {referenceRate ? (
             <footer className={styles.footer}>
diff --git a/packages/design-system/lib/components/RateCard/Code/index.tsx b/packages/design-system/lib/components/RateCard/Code/index.tsx
index 6a1a2f568..ddf353df2 100644
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -81,7 +81,7 @@ export default function CodeRateCard({
               </Typography>
               <Typography variant="Title/Subtitle/md">
                 <p>
-                  {rate.price}{' '}
+                  {`${rate.price} `}
                   <Typography variant="Body/Supporting text (caption)/smBold">
                     <span>{rate.unit}</span>
                   </Typography>
diff --git a/packages/design-system/lib/components/RateCard/Points/index.tsx b/packages/design-system/lib/components/RateCard/Points/index.tsx
index 924d75be3..d67b991d1 100644
--- a/packages/design-system/lib/components/RateCard/Points/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Points/index.tsx
@@ -71,10 +71,10 @@ export default function PointsRateCard({
                   <div className={styles.pointsRow}>
                     <Typography variant="Title/Subtitle/md">
                       <p>
-                        {rate.points}{' '}
+                        {`${rate.points} `}
                         <Typography variant="Body/Supporting text (caption)/smBold">
                           <span>
-                            {rate.currency} {rate.additionalPrice && ' + '}
+                            {`${rate.currency} ${rate.additionalPrice && ' + '}`}
                           </span>
                         </Typography>
                       </p>
@@ -82,7 +82,7 @@ export default function PointsRateCard({
                     {rate.additionalPrice && (
                       <Typography variant="Title/Subtitle/md">
                         <p>
-                          {rate.additionalPrice.price}{' '}
+                          {`${rate.additionalPrice.price} `}
                           <Typography variant="Body/Supporting text (caption)/smBold">
                             <span>{rate.currency}</span>
                           </Typography>
diff --git a/packages/design-system/lib/components/RateCard/Regular/index.tsx b/packages/design-system/lib/components/RateCard/Regular/index.tsx
index d6b6bac8a..2df6ced75 100644
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -15,7 +15,7 @@ interface RegularRateCardProps {
   paymentTerm: string
   rate?: Rate
   memberRate?: Rate
-  approximateRate: Rate
+  approximateRate?: Rate
   hidePublicRate?: boolean
   handleChange: () => void
   handleTermsClick?: () => void
@@ -76,7 +76,7 @@ export default function RegularRateCard({
                 </Typography>
                 <Typography variant="Title/Subtitle/md">
                   <p>
-                    {rate.price}{' '}
+                    {`${rate.price} `}
                     <Typography variant="Body/Supporting text (caption)/smBold">
                       <span>{rate.unit}</span>
                     </Typography>
@@ -91,7 +91,7 @@ export default function RegularRateCard({
                 </Typography>
                 <Typography variant="Title/Subtitle/md">
                   <p>
-                    {memberRate.price}{' '}
+                    {`${memberRate.price} `}
                     <Typography variant="Body/Supporting text (caption)/smBold">
                       <span>{memberRate.unit}</span>
                     </Typography>
@@ -99,16 +99,18 @@ export default function RegularRateCard({
                 </Typography>
               </div>
             ) : null}
-            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>{approximateRate.label}</p>
-              </Typography>
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>
-                  {approximateRate.price} {approximateRate.unit}
-                </p>
-              </Typography>
-            </div>
+            {approximateRate ? (
+              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>{approximateRate.label}</p>
+                </Typography>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>
+                    {approximateRate.price} {approximateRate.unit}
+                  </p>
+                </Typography>
+              </div>
+            ) : null}
           </div>
         </div>
       </div>
diff --git a/packages/design-system/lib/components/RateCard/rate-card.module.css b/packages/design-system/lib/components/RateCard/rate-card.module.css
index 233a79aac..42948ff62 100644
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -28,6 +28,7 @@
 .rateCard {
   position: relative;
   background-color: var(--Scandic-Grey-00);
+  border: 1px solid transparent;
   border-radius: var(--Corner-radius-md);
 }