Merged in feat/SW-1719-strikethrough-rates (pull request #2266)

Feat/SW-1719 strikethrough rates

* feat(SW-1719): Strikethrough rate if logged in on regular rate cards

* feat(SW-1719): Strikethrough rate if logged in on rate summary

* feat(SW-1719): Strikethrough rate if logged in on mobile rate summary

* feat(SW-1719): Strikethrough rate if logged in on enter details

* feat(SW-1719): Strikethrough rate support for multiple rooms

* feat(SW-1719): booking receipt fixes on confirmation page

* feat(SW-1719): improve initial total price calculation

* feat: harmonize enter details total price to use one and the same function


Approved-by: Michael Zetterberg

packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx

@@ -34,13 +34,13 @@ export const Default: Story = {
     paymentTerm: 'PAY NOW',
     rate: {
       label: 'Standard Price',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      price: '1980',
+      unit: 'SEK/NIGHT',
     },
     memberRate: {
       label: 'Member Price',
-      price: '190',
-      unit: 'EUR/NIGHT',
+      price: '1900',
+      unit: 'SEK/NIGHT',
     },
     approximateRate: {
       price: '198',
@@ -49,8 +49,8 @@ export const Default: Story = {
     },
     omnibusRate: {
       label: 'Lowest past price (last 30 days)',
-      price: '169',
-      unit: 'EUR',
+      price: '1690',
+      unit: 'SEK/NIGHT',
     },
     rateTermDetails: [
       {
@@ -70,13 +70,13 @@ export const Selected: Story = {
     paymentTerm: 'PAY NOW',
     rate: {
       label: 'Standard Price',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      price: '1980',
+      unit: 'SEK/NIGHT',
     },
     memberRate: {
       label: 'Member Price',
-      price: '190',
-      unit: 'EUR/NIGHT',
+      price: '1900',
+      unit: 'SEK/NIGHT',
     },
     approximateRate: {
       price: '198',
@@ -92,7 +92,7 @@ export const Selected: Story = {
   },
 }
 
-export const HidePublicRate: Story = {
+export const MemberRateActive: Story = {
   args: {
     name: 'regular',
     value: 'regular',
@@ -100,20 +100,20 @@ export const HidePublicRate: Story = {
     paymentTerm: 'PAY NOW',
     rate: {
       label: 'Standard Price',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      price: '1980',
+      unit: 'SEK',
     },
     memberRate: {
       label: 'Member Price',
-      price: '190',
-      unit: 'EUR/NIGHT',
+      price: '1900',
+      unit: 'SEK/NIGHT',
     },
     approximateRate: {
-      price: '198',
+      price: '190',
       label: 'Approx.',
       unit: 'EUR',
     },
-    hidePublicRate: true,
+    isMemberRateActive: true,
     rateTermDetails: [
       {
         title: 'Rate definition 1',

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -17,7 +17,7 @@ interface RegularRateCardProps {
   memberRate?: Rate
   omnibusRate?: Rate
   approximateRate?: Rate
-  hidePublicRate?: boolean
+  isMemberRateActive?: boolean
   handleChange: () => void
   rateTermDetails: RateTermDetails[]
 }
@@ -32,7 +32,7 @@ export default function RegularRateCard({
   omnibusRate,
   rate,
   memberRate,
-  hidePublicRate,
+  isMemberRateActive,
   handleChange,
   rateTermDetails,
 }: RegularRateCardProps) {
@@ -97,7 +97,7 @@ export default function RegularRateCard({
             </div>
           </header>
           <div>
-            {!hidePublicRate && rate ? (
+            {!isMemberRateActive && rate ? (
               <div className={styles.rateRow}>
                 <Typography variant="Body/Supporting text (caption)/smBold">
                   <p>{rate.label}</p>
@@ -118,15 +118,29 @@ export default function RegularRateCard({
                   <p>{memberRate.label}</p>
                 </Typography>
                 <Typography variant="Title/Subtitle/md">
-                  <p>
+                  <span>
                     {`${memberRate.price} `}
                     <Typography variant="Body/Supporting text (caption)/smBold">
                       <span>{memberRate.unit}</span>
                     </Typography>
-                  </p>
+                  </span>
                 </Typography>
               </div>
             ) : null}
+            {isMemberRateActive && rate ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <div
+                  className={`${styles.rateRow} ${styles.strikeThroughRate}`}
+                >
+                  <s>
+                    {`${rate.price} `}
+                    <Typography variant="Tag/sm">
+                      <span>{rate.unit}</span>
+                    </Typography>
+                  </s>
+                </div>
+              </Typography>
+            ) : null}
             {approximateRate ? (
               <div className={`${styles.rateRow} ${styles.approximateRate}`}>
                 <Typography variant="Body/Supporting text (caption)/smRegular">

packages/design-system/lib/components/RateCard/rate-card.module.css

@@ -90,6 +90,13 @@ label:not(:has(.radio:checked)) .checkIcon {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--Space-x1);
+
+  &.strikeThroughRate {
+    grid-template-columns: 1fr;
+    justify-items: end;
+    text-decoration: line-through;
+    color: var(--Text-Secondary);
+  }
 }
 
 .highlightedRate {