Merged in fix/SW-1631-rate-terms-modal (pull request #1699)

fix(SW-1631): add rate terms modal

* fix(SW-1631): add rate terms modal


Approved-by: Simon.Emanuelsson

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

@@ -21,6 +21,7 @@ const meta: Meta<typeof PointsRateCard> = {
     onRateSelect: { action: 'onRateSelect' },
     isNotEnoughPoints: { control: 'boolean' },
     notEnoughPointsText: { control: 'text' },
+    rateTermDetails: { control: 'object' },
   },
 }
 
@@ -60,6 +61,12 @@ export const Default: Story = {
     ],
     selectedRate: undefined,
     onRateSelect: (value) => console.log(value),
+    rateTermDetails: [
+      {
+        title: 'Rate definition 1',
+        terms: ['term 1', 'term 2', 'term 3'],
+      },
+    ],
   },
 }
 
@@ -97,6 +104,12 @@ export const WithDisabledRates: Story = {
     ],
     selectedRate: '2',
     onRateSelect: (value) => console.log(value),
+    rateTermDetails: [
+      {
+        title: 'Rate definition 1',
+        terms: ['term 1', 'term 2', 'term 3'],
+      },
+    ],
   },
 }
 
@@ -134,5 +147,11 @@ export const NotEnoughPoints: Story = {
     isNotEnoughPoints: true,
     notEnoughPointsText: 'Not enough points',
     onRateSelect: (value) => console.log(value),
+    rateTermDetails: [
+      {
+        title: 'Rate definition 1',
+        terms: ['term 1', 'term 2', 'term 3'],
+      },
+    ],
   },
 }

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

@@ -1,5 +1,5 @@
 import { Typography } from '../../Typography'
-import { RatePointsOption } from '../types'
+import { RatePointsOption, RateTermDetails } from '../types'
 
 import styles from '../rate-card.module.css'
 import { Button } from '../../Button'
@@ -7,6 +7,7 @@ import { Radio } from '../../Radio'
 import { RadioGroup } from 'react-aria-components'
 import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons'
+import Modal from '../Modal'
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -17,7 +18,7 @@ interface PointsRateCardProps {
   onRateSelect: (value: string) => void
   isNotEnoughPoints?: boolean
   notEnoughPointsText?: string
-  handleTermsClick?: () => void
+  rateTermDetails: RateTermDetails[]
 }
 
 export default function PointsRateCard({
@@ -29,7 +30,7 @@ export default function PointsRateCard({
   isNotEnoughPoints,
   notEnoughPointsText,
   onRateSelect,
-  handleTermsClick,
+  rateTermDetails,
 }: PointsRateCardProps) {
   const classNames = variants({
     variant: 'Points',
@@ -44,14 +45,36 @@ export default function PointsRateCard({
         <header>
           <Typography variant="Tag/sm">
             <h3 className={styles.title}>
-              <Button
-                variant="Icon"
-                color="IconDefault"
-                size="Small"
-                onPress={handleTermsClick}
+              <Modal
+                title={rateTitle}
+                subtitle={paymentTerm}
+                trigger={
+                  <Button variant="Icon" color="IconDefault" size="Small">
+                    <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                  </Button>
+                }
               >
-                <MaterialIcon icon="info" size={20} color="CurrentColor" />
-              </Button>
+                {rateTermDetails.map((termGroup) => (
+                  <div key={termGroup.title} className={styles.terms}>
+                    <Typography variant={'Body/Paragraph/mdBold'}>
+                      <p>{termGroup.title}</p>
+                    </Typography>
+                    {termGroup.terms.map((term) => (
+                      <Typography key={term}>
+                        <p className={styles.term}>
+                          <MaterialIcon
+                            icon="check"
+                            color="Icon/Feedback/Success"
+                            size={20}
+                            className={styles.termsIcon}
+                          />
+                          {term}
+                        </p>
+                      </Typography>
+                    ))}
+                  </div>
+                ))}
+              </Modal>
               {rateTitle}
               <span className={styles.textSecondary}>
                 {` / ${paymentTerm}`}