feat: SW-2028 Fix after rebase

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Redemptions.tsx

@@ -17,6 +17,7 @@ interface RedemptionsProps extends SharedRateCardProps {
 export default function Redemptions({
   handleSelectRate,
   redemptions,
+  roomTypeCode,
 }: RedemptionsProps) {
   const intl = useIntl()
   const rateTitles = useRateTitles()
@@ -39,7 +40,10 @@ export default function Redemptions({
 
   let selectedRateCode = ""
   if (selectedRate?.product && "redemption" in selectedRate.product) {
-    selectedRateCode = selectedRate.product.redemption.rateCode
+    selectedRateCode =
+      selectedRate.roomTypeCode === roomTypeCode
+        ? selectedRate.product.redemption.rateCode
+        : ""
   }
 
   function handleSelect(rateCode: string) {
@@ -61,10 +65,12 @@ export default function Redemptions({
           }
         : undefined,
     currency: "PTS",
-    isDisabled: !!r.redemption.localPrice.pointsPerNight, // TODO: FIX
+    isDisabled: !r.redemption.hasEnoughPoints,
-    points: r.redemption.localPrice.pointsPerNight.toString(),
+    points: r.redemption.localPrice.pointsPerStay.toString(),
+    rateCode: r.redemption.rateCode,
   }))
 
+  const notEnoughPoints = rates.every((rate) => rate.isDisabled)
   const firstRedemption = redemptions[0]
   const bannerText = firstRedemption.breakfastIncluded
     ? `${rewardNight} ∙ ${breakfastIncluded}`
@@ -79,6 +85,8 @@ export default function Redemptions({
       rates={rates}
       rateTitle={rateTitles[firstRedemption.rate].title}
       selectedRate={selectedRateCode}
+      isNotEnoughPoints={notEnoughPoints}
+      notEnoughPointsText={intl.formatMessage({ id: "Not enough points" })}
     />
   )
 }

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

@@ -37,6 +37,7 @@ export const Default: Story = {
       {
         points: '20000',
         currency: 'PTS',
+        rateCode: 'REDNIGHT7',
       },
       {
         points: '15000',
@@ -45,6 +46,7 @@ export const Default: Story = {
           price: '250',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7A',
       },
       {
         points: '10000',
@@ -53,6 +55,7 @@ export const Default: Story = {
           price: '500',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7B',
       },
     ],
     selectedRate: undefined,
@@ -70,6 +73,7 @@ export const WithDisabledRates: Story = {
         points: '20000',
         currency: 'PTS',
         isDisabled: true,
+        rateCode: 'REDNIGHT7',
       },
       {
         points: '15000',
@@ -79,6 +83,7 @@ export const WithDisabledRates: Story = {
           price: '250',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7A',
       },
       {
         points: '10000',
@@ -87,6 +92,7 @@ export const WithDisabledRates: Story = {
           price: '500',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7B',
       },
     ],
     selectedRate: '2',
@@ -103,6 +109,7 @@ export const NotEnoughPoints: Story = {
       {
         points: '20000',
         currency: 'PTS',
+        rateCode: 'REDNIGHT7',
       },
       {
         points: '15000',
@@ -111,6 +118,7 @@ export const NotEnoughPoints: Story = {
           price: '250',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7A',
       },
       {
         points: '10000',
@@ -119,6 +127,7 @@ export const NotEnoughPoints: Story = {
           price: '500',
           currency: 'EUR',
         },
+        rateCode: 'REDNIGHT7B',
       },
     ],
     selectedRate: undefined,

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

@@ -60,11 +60,15 @@ export default function PointsRateCard({
           </Typography>
         </header>
         <div className={styles.content}>
-          <RadioGroup value={selectedRate} onChange={onRateSelect}>
+          <RadioGroup
+            aria-label={rateTitle}
+            value={selectedRate}
+            onChange={onRateSelect}
+          >
             {rates.map((rate, index) => (
               <div key={index} className={styles.rateRow}>
                 <Radio
-                  value={index.toString()}
+                  value={rate.rateCode}
                   isDisabled={rate.isDisabled || isNotEnoughPoints}
                 >
                   <div className={styles.pointsRow}>
@@ -73,7 +77,7 @@ export default function PointsRateCard({
                         {`${rate.points} `}
                         <Typography variant="Body/Supporting text (caption)/smBold">
                           <span>
-                            {`${rate.currency} ${rate.additionalPrice && ' + '}`}
+                            {`${rate.currency} ${rate.additionalPrice ? ' + ' : ''}`}
                           </span>
                         </Typography>
                       </p>
@@ -83,7 +87,7 @@ export default function PointsRateCard({
                         <p>
                           {`${rate.additionalPrice.price} `}
                           <Typography variant="Body/Supporting text (caption)/smBold">
-                            <span>{rate.currency}</span>
+                            <span>{rate.additionalPrice.currency}</span>
                           </Typography>
                         </p>
                       </Typography>
@@ -98,9 +102,9 @@ export default function PointsRateCard({
           <footer className={styles.footer}>
             <Typography variant="Body/Supporting text (caption)/smBold">
               <p className={styles.notEnoughPoints}>
-                <div className={styles.filledIcon}>
+                <span className={styles.filledIcon}>
                   <MaterialIcon icon="info" isFilled size={20} />
-                </div>
+                </span>
                 {notEnoughPointsText}
               </p>
             </Typography>

packages/design-system/lib/components/RateCard/types.ts

@@ -5,6 +5,7 @@ export type Rate = {
 }
 
 export type RatePointsOption = {
+  rateCode: string
   points: string
   currency: string
   isDisabled?: boolean