feat: SW-2028 Fix after rebase

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