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/Code/index.tsx

@@ -1,10 +1,11 @@
-import { Rate } from '../types'
+import { Rate, RateTermDetails } from '../types'
 
 import styles from '../rate-card.module.css'
 import { Typography } from '../../Typography'
 import { Button } from '../../Button'
 import { variants } from '../variants'
 import { MaterialIcon } from '../../Icons'
+import Modal from '../Modal'
 
 interface CodeRateCardProps {
   name: string
@@ -19,6 +20,7 @@ interface CodeRateCardProps {
   isHighlightedRate?: boolean
   handleChange: () => void
   handleTermsClick?: () => void
+  rateTermDetails: RateTermDetails[]
 }
 
 export default function CodeRateCard({
@@ -33,7 +35,7 @@ export default function CodeRateCard({
   bannerText,
   isHighlightedRate,
   handleChange,
-  handleTermsClick,
+  rateTermDetails,
 }: CodeRateCardProps) {
   const classNames = variants({
     variant: 'Code',
@@ -57,14 +59,40 @@ export default function CodeRateCard({
           <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}`}